在开始我们的程序代码之前，先来了解一下相关的基础知识：
1、什么是websocket？
（1）WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket通讯协议于2011年被IETF定为标准RFC 6455，WebSocketAPI被W3C定为标准；
（2）在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送；
（3）现在，很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP request的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽和服务器资源；
（4）而比较新的技术去做轮询的效果是Comet，使用了AJAX。但这种技术虽然可达到双向通信，但依然需要发出请求，而且在Comet中，普遍采用了长链接，这也会大量消耗服务器带宽和资源；
（5）面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。
2、web socket优点
（1）服务器与客户端之间交换的数据包档头很小，大概只有2字节；
（2）服务器可以主动传送数据给客户端。
3、gevent-websocket介绍；
（1）是使用gevent封装的websocket库；
（2）可以很方便和其他网络框架结合。
好啦，了解以上的基础知识，就开始我们的简单的聊天室代码之路吧！
Test.py
from flask import Flask,render_template,request from geventwebsocket.handler import WebSocketHandler from geventwebsocket.websocket import WebSocket from gevent.pywsgi import WSGIServer import json app=Flask(__name__) user_socket_list = [] user_socket_dict = {} @app.route("/ws/<username>") def ws(username): print(11111,request.environ) user_socket = request.environ.get("wsgi.websocket") #type:WebSocket if user_socket: user_socket_dict[username] = user_socket print(len(user_socket_dict),user_socket_dict) while 1: msg = user_socket.receive() # 收件人 消息 发件人 msg_dict = json.loads(msg) msg_dict["from_user"] = username to_user = msg_dict.get("to_user") # chat = msg_dict.get("msg") u_socket = user_socket_dict.get(to_user) # type:WebSocket u_socket.send(json.dumps(msg_dict)) # for u_socket in user_socket_list: # if u_socket == user_socket: # continue # try: # u_socket.send(msg) # except: # continue @app.route("/") def index(): return render_template("ws.html") if __name__ == '__main__': # app.run("0.0.0.0",9527,debug=True) http_serv = WSGIServer(("0.0.0.0",9527),app,handler_class=WebSocketHandler) http_serv.serve_forever()
html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <input type="text" id="username"> <button onclick="login()">登录聊天室</button> 给<input type="text" id="to_user">发送：<input type="text" id="msg"> <button onclick="send_msg()">发送</button> <div id="chat_list" style=" 500px;height: 500px;"></div> </body> <script type="application/javascript"> var ws = null; function login() { var username = document.getElementById("username").value; ws = new WebSocket("ws://192.168.13.195:9527/ws/"+username); ws.onmessage = function (data) { console.log(data.data); var recv_msg = JSON.parse(data.data); var ptag = document.createElement("p"); ptag.innerText= recv_msg.from_user + ":" + recv_msg.msg; document.getElementById("chat_list").appendChild(ptag); } } function send_msg() { var to_user = document.getElementById("to_user").value; var msg = document.getElementById("msg").value; var send_str = { "to_user" :to_user, "msg":msg }; ws.send(JSON.stringify(send_str)); } </script> </html>
实现的页面如下：
