一，带昵称的群聊

  1. #!/usr/bin/env python
  2. # -*- coding:utf8 -*-
  3.  
  4. import json
  5. from flask import Flask, request, render_template
  6. from geventwebsocket.websocket import WebSocket
  7. from gevent.pywsgi import WSGIServer
  8. from geventwebsocket.handler import WebSocketHandler
  9.  
  10. app = Flask(__name__)
  11. user_socket_dict = {}
  12.  
  13. @app.route("/")
  14. def index():
  15.     return render_template("index_nickname.html")
  16.  
  17. @app.route("/ws/<nick_name>")  # ws://127.0.0.1:8000/ws
  18. def ws(nick_name):
  19.     # print(request.environ)
  20.     # print(request.environ.get("wsgi.websocket"))
  21.     # 链接 <geventwebsocket.websocket.WebSocket object at 0x000001A7380D0C78>
  22.     user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket # 写上这个，代码可以有提示
  23.     if user_socket:
  24.         user_socket_dict[nick_name] = user_socket
  25.     else:
  26.         return render_template("index.html", msg="请使用web_socket链接")
  27.     while 1:
  28.         msg = user_socket.receive()
  29.         for user_name, u_socket in user_socket_dict.items():  # type:WebSocket
  30.             if user_socket != u_socket:  # 不给自己发消息
  31.                 try:
  32.                     u_socket.send(json.dumps({"nick_name": nick_name, "msg": msg}))  # 发送人是
  33.                 except Exception as e:
  34.                     continue
  35.  
  36. if __name__ == '__main__':
  37.     http_server = WSGIServer(("127.0.0.1", 8000), app, handler_class=WebSocketHandler)
  38.     # 使用WSGIServer，而不是flask自带的werkzeug,处理, 如果本次请求是ws开头的,就交给WebSocketHandler
  39.     # 处理数据(给environ中添加websocket相关的键值对),处理完之后交给app
  40.     http_server.serve_forever()
  41.     # app.run()

templates:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. {{ msg }}
  9. <h1>群P开始了</h1>
  10. 输入你的昵称:<input type="text" id="nick_name">
  11. <button onclick="createWebsocket()">链接群聊</button>
  12.  
  13. 编辑消息:<input type="text" id="msg_s">
  14. <button onclick="send_msg()">发送</button>
  15. <div style="border: 2px solid; width: 500px;height: 800px;" id="text_div">
  16.  
  17. </div>
  18.  
  19. <script>
  20.     var ws = "";
  21.     var text_div = document.getElementById("text_div");
  22.     var nickName = "";
  23.     function createWebsocket() {
  24.         let nick_name = document.getElementById("nick_name").value;
  25.         nickName = nick_name;
  26.         let w_s = new WebSocket("ws://127.0.0.1:8000/ws/" + nickName);  // 把名称当作url参数发过去
  27.         ws = w_s;
  28.         console.log("ws://127.0.0.1:8000/ws/" + nickName);
  29.         ws.onmessage = function (data) {
  30.             var obj_data = JSON.parse(data.data);
  31.             console.log(data.data);
  32.             var p_ele = '<p>'+ obj_data.nick_name + ':'+ obj_data.msg +'</p>';
  33.             text_div.innerHTML += p_ele
  34.     }}
  35.  
  36.     function send_msg() {
  37.         var msg_s = document.getElementById("msg_s").value;
  38.         let p_ele_s = "<p style='text-align: right'>" + msg_s + ':' + nickName + "</p>";
  39.         text_div.innerHTML += p_ele_s;
  40.         ws.send(msg_s);
  41.     }
  42. </script>
  43. </body>
  44. </html>

二，带昵称的单聊

  1. #!/usr/bin/env python
  2. # -*- coding:utf8 -*-
  3.  
  4. import json
  5. from flask import Flask, request, render_template
  6. from geventwebsocket.websocket import WebSocket
  7. from gevent.pywsgi import WSGIServer
  8. from geventwebsocket.handler import WebSocketHandler
  9.  
  10. app = Flask(__name__)
  11. user_socket_dict = {}
  12.  
  13. @app.route("/")
  14. def index():
  15.     return render_template("index_nickname_danren.html")
  16.  
  17. @app.route("/ws/<nick_name>")  # ws://127.0.0.1:8000/ws
  18. def ws(nick_name):
  19.     # print(request.environ)
  20.     # print(request.environ.get("wsgi.websocket"))
  21.     # 链接 <geventwebsocket.websocket.WebSocket object at 0x000001A7380D0C78>
  22.     user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket # 写上这个，代码可以有提示
  23.     if user_socket:
  24.         user_socket_dict[nick_name] = user_socket
  25.     else:
  26.         return render_template("index.html", msg="请使用web_socket链接")
  27.     while 1:
  28.         msg = user_socket.receive()
  29.         msg_dict = json.loads(msg)
  30.         to_user = msg_dict.get('to_user')
  31.         msg = msg_dict.get("msg")
  32.         to_user_socket = user_socket_dict.get(to_user)  # type:WebSocket
  33.         to_user_socket.send(json.dumps({"nick_name": nick_name, "msg": msg}))
  34.  
  35. if __name__ == '__main__':
  36.     http_server = WSGIServer(("127.0.0.1", 8000), app, handler_class=WebSocketHandler)
  37.     # 使用WSGIServer，而不是flask自带的werkzeug,处理, 如果本次请求是ws开头的,就交给WebSocketHandler
  38.     # 处理数据(给environ中添加websocket相关的键值对),处理完之后交给app
  39.     http_server.serve_forever()
  40.     # app.run()

templates:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. {{ msg }}
  9. <h1>群P开始了</h1>
  10. 输入你的昵称:<input type="text" id="nick_name">
  11. <button onclick="createWebsocket()">链接群聊</button>
  12.  
  13. <p>与：<input type="text" id="to_user">轻声细语</p>
  14.  
  15. 编辑消息:<input type="text" id="msg_s">
  16. <button onclick="send_msg()">发送</button>
  17. <div style="border: 2px solid; width: 500px;height: 800px;" id="text_div">
  18.  
  19. </div>
  20.  
  21. <script>
  22.     var ws = "";
  23.     var text_div = document.getElementById("text_div");
  24.     var nickName = "";
  25.     function createWebsocket() {
  26.         let nick_name = document.getElementById("nick_name").value;
  27.         nickName = nick_name;
  28.         let w_s = new WebSocket("ws://127.0.0.1:8000/ws/" + nickName);  // 把名称当作url参数发过去
  29.         ws = w_s;
  30.         console.log("ws://127.0.0.1:8000/ws/" + nickName);
  31.         ws.onmessage = function (data) {
  32.             var obj_data = JSON.parse(data.data);
  33.             console.log(data.data);
  34.             var p_ele = '<p>'+ obj_data.nick_name + ':'+ obj_data.msg +'</p>';
  35.             text_div.innerHTML += p_ele
  36.     }}
  37.  
  38.     function send_msg() {
  39.         var msg_s = document.getElementById("msg_s").value;
  40.         var to_user = document.getElementById("to_user").value;
  41.         let p_ele_s = "<p style='text-align: right'>" + msg_s + ':' + nickName + "</p>";
  42.         text_div.innerHTML += p_ele_s;
  43.         var msg_obj = JSON.stringify({to_user:to_user,msg:msg_s});
  44.         ws.send(msg_obj);
  45.     }
  46. </script>
  47. </body>
  48. </html>

websocket之简易聊天室的更多相关文章

  1. 基于Node.js + WebSocket 的简易聊天室

    代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...

  2. php+websocket搭建简易聊天室实践

    1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...

  3. node.js+websocket实现简易聊天室

    (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) websocket提供了一种全双工客户端服务器的异步通信方法,这种通信方法使用ws或者wss协议,可 ...

  4. node+websocket创建简易聊天室

    关于websocket的介绍太多,在这就不一一介绍了,本文主要实现通过websocket创建一个简易聊天室,就是90年代那种聊天室 服务端 1.安装ws模块,uuid模块,ws是websocket模块 ...

  5. 使用Html5下WebSocket搭建简易聊天室

    一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...

  6. WebSocket实现简易聊天室

    前台页面: <html> <head> <meta http-equiv="Content-Type" content="text/html ...

  7. 小案例-WebSocket实现简易聊天室

    前言 在详解 HTTP系列之一讲到HTTP/2.0 突破了传统的"请求-问答模式"这一局限,实现了服务器主动向客户端传送数据.而本章将通过一种在单个TCP连接上进行全双工通信的协议 ...

  8. 基于WebSocket的简易聊天室

    用的是Flash + WebSocket 哦~ Flask 之 WebSocket 一.项目结构: 二.导入模块 pip3 install gevent-websocket 三.先来看一个一对一聊天的 ...

  9. Servlet WebSocket的简易聊天室

    添加依赖 <!-- websocket --> <dependency> <groupId>javax.websocket</groupId> < ...

  10. 使用go，基于martini，和websocket开发简易聊天室

    一.首先,需要了解一下websocket基本原理:here 二.go语言的websocket实现: 基于go语言的websocket也有不少,比如github.com/gorilla/websocke ...

随机推荐

  1. zk集群部署

    一.环境准备 当前环境:centos7.3三台软件版本:zookeeper-3.5.2部署目录:/usr/local/zookeeper启动端口:2181配置文件:/usr/local/zookeep ...

  2. 【Js】单页面多个倒计时问题

    代码: <!DOCTYPE html> <html> <head> <title>多个timeout</title> <script ...

  3. tomcat常见报错解决方法汇总

    报错一:内存泄漏,字眼This is very likely to create a memory leak. 解决方法:修改tomcat内存. 在tomcat/bin目录下,修改catalina.s ...

  4. 使用 Node.js 写一个代码生成器

    背景 第一次接触代码生成器用的是动软代码生成器,数据库设计好之后,一键生成后端 curd代码.之后也用过 CodeSmith , T4.目前市面上也有很多优秀的代码生成器,而且大部分都提供可视化界面操 ...

  5. swoole实战1-初识swoole

    原文地址:https://www.jianshu.com/p/008d5702d01f 安装swoole 以mac操作系统为例,如果你是mac新手,推荐阅读 程序员如何优雅使用mac 环境要求:php ...

  6. javascript实现每秒执行一次的方法

    javascript实现每秒执行一次的方法 <pre> i=0; function showzhandou() { $('.zhandouresult p').eq(i).fadeIn() ...

  7. python实践项目八：生成随机试卷文件

    描述:匹配美国50个州的首府. 下面是程序需要完成的任务: • 创建35 份不同的测验试卷. • 为每份试卷创建50 个多重选择题,次序随机. • 为每个问题提供一个正确答案和3 个随机的错误答案,次 ...

  8. kubelet tls

    当成功签发证书后,目标节点的 kubelet 会将证书写入到 --cert-dir= 选项指定的目录中:此时如果不做其他设置应当生成上述除ca.pem以外的4个文件 kubelet-client.cr ...

  9. flask框架（五）——支持正则写法、模板用法、请求响应、session

    如果用正则的话,我们要用自定义的路由. 1导入from werkzeug.routing import BaseConverter 2我先要写一个类,然后继承BaseConverter,然后实现__i ...

  10. [LOJ2290] [THUWC2017] 随机二分图

    题目链接 LOJ:https://loj.ac/problem/2290 洛谷:https://www.luogu.org/problemnew/show/P4547 Solution 首先考虑只有第 ...