一、什么是WebSocket？
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
具体原理可以看我之前文章传送门(使用WebSocket进行全双工通信)
二、代码实现
整体是基于flask框架之上开发的，gevent包中WSGIServer代替flask的werkzeug，geventwebsocket.handler 导入WebSocketHandler，这两个是重点。
http_serv = WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler)
http_serv.serve_forever()
后台的全部代码
from flask import Flask, request, render_template
from geventwebsocket.websocket import WebSocket
from gevent.pywsgi import WSGIServer
from geventwebsocket.handler import WebSocketHandler
app = Flask(__name__)
app.config['debug'] = True
user_socket_list = []
@app.route('/')
def index():
return render_template('index.html')
@app.route('/ws')
def ws():
user_socket = request.environ.get("wsgi.websocket") #type:WebSocket
if user_socket:
user_socket_list.append(user_socket)
print(len(user_socket_list), user_socket_list)
while True:
msg = user_socket.receive()
for usersocket in user_socket_list:
try:
if user_socket != usersocket:
usersocket.send(msg)
except:
continue
if __name__ == '__main__':
# app.run()
http_serv = WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler)
http_serv.serve_forever()
前端代码比较简单,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>WebSocket测试</h1>
<p>{{ messages }}</p>
<input type="text" id="send_text">
<button id="send" onclick="send_msg()">发送</button>
<div style="border: 2px solid; width: 500px; height: 800px" id="text_div">
</div>
</body>
<script type="text/javascript">
var ws = new WebSocket("ws://127.0.0.1:5000/ws");
ws.onmessage = function (data) {
var text_div = document.getElementById("text_div");
var add_msg = "<p>" + data.data + "</p>";
text_div.innerHTML += add_msg;
};
function send_msg() {
var msg = document.getElementById("send_text").value;
var text_div = document.getElementById("text_div");
var add_msg = "<p>" + msg + "</p>";
text_div.innerHTML += add_msg;
ws.send(msg)
}
</script>
</html>
网友评论