基于Flask框架使用Web Socket实现收发机制

前端js的收发机制：

　 // 新建一个websocket链接
var ws = new WebSocket("%s://%s/foobar/");

　　// 链接成功时，可以在函数中做一些操作

　　ws.onopen = function() {}

// 接收后端发送过来的数据
　　ws.onmessage = function(e) {}

　　// 进行异常处理
　　ws.onerror = function(e) {}

　　// 关闭链接
　　ws.onclose = function(e) {}

// 向后端发送数据
　　s.send(value);

后端代码：

from flask import Flask,request
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer

from geventwebsocket.websocket import WebSocket  # 做语法提示用的

app = Flask(__name__)  # type: Flask


@app.route("/ws")
def web_sck():
    # print(request.environ)  #  打印的原始请求数据
    # 这个东西其实就是WebSocket的长链接
    user_socket = request.environ.get("wsgi.websocket")   # type: WebSocket
    while 1:
        msg = user_socket.receive()  # 接收客户端传入数据
        # 在浏览器中content的中输入ws ，readyState如果为1 表示连接成功，如果等于3表示，连接成功后又断开了连接，0 表示没有开启
        print(msg)
        try:
            user_socket.send(msg)  # 把接收到的数据，返回给前端
        except:
            return

if __name__ == "__main__":
    # app.run("0.0.0.0",8000,debug=True)
    http_serve = WSGIServer(("0.0.0.0",8000),app,handler_class=WebSocketHandler)
    http_serve.serve_forever()  # 启动这个web-server请求

前端代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>多人聊天</title>
</head>
<body>
<script type="application/javascript">
    var ws = new WebSocket("ws://127.0.0.1:8000/ws") ; // 指定发送的链接地址
    ws.onopen = function(){
        ws.send("hello")
    };

    // 前端接收消息   ws_info 接收数据的容器
    ws.onmessage = function (ws_info) {
        console.log(ws_info.data)
    }
</script>
</body>
</html>