Flask websocket

Posted 坨之歌

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flask websocket相关的知识,希望对你有一定的参考价值。

websocket

概念

是一套协议,协议规定了:

  - 连接时需要握手

  - 发送数据进行加密

  - 连接之后不断开

意义

  实现长轮询等操作

框架支持

- flask,gevent-websocket

- django,channel

- torando框架自带

应用场景

实时响应页面时,可以使用websocket。

缺点

兼容性比较差,版本较低的IE无法支持

使用方法

导入

from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer

启动

Flask 的启动的地方改成这样即可以支持 websocket ,同时并不会覆盖 http ,两者并存

if __name__ == __main__:
    http_server = WSGIServer((0.0.0.0, 5000), app, handler_class=WebSocketHandler)
    http_server.serve_forever()

后端操作

ws = request.environ.get(wsgi.websocket)  # 要拿到websocket 的标识才可以操作

msg = ws.receive() # 从客户端接收消息

ws.send("你好啊") # 向客户端发送消息

前端操作

var ws = new WebSocket(‘ws://127.0.0.1:5000/message‘)    // 不定义的话默认就是 HTTP,定义后往指定的url 发起 websocket 链接请求


ws.onmessage
= function (event) {  // 服务器端向客户端发送数据时,自动执行 var response = JSON.parse(event.data);    // 接收服务端的数据 };


ws.send("你好呀")   // 向服务端发送消息
 

示例

前端

<!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>
    <h1>丑男投票系统</h1>
    <ul>
        {% for k,v in users.items() %}
            <li onclick="vote({{k}})" id="id_{{k}}">{{v.name}}<span>{{v.count}}</span></li>
        {% endfor %}
    </ul>

    <script src="{{ url_for(‘static‘,filename=‘jquery-3.3.1.min.js‘)}}"></script>
    <script>
        var ws = new WebSocket(ws://127.0.0.1:5000/message)
        ws.onmessage = function (event) {
            /* 服务器端向客户端发送数据时,自动执行 */
            // {‘cid‘:cid,‘count‘:new}
            var response = JSON.parse(event.data);
            $(#id_+response.cid).find(span).text(response.count);

        };

        function vote(cid) {
            ws.send(cid)  // 发送信息
        }
    </script>
</body>
</html>

后端

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

app = Flask(__name__)

USERS = {
    1:{name:钢弹,count:0},
    2:{name:铁锤,count:0},
    3:{name:贝贝,count:100},
}


# http://127.0.0.1:5000/index
@app.route(/index)
def index():
    return render_template(index.html,users=USERS)

# http://127.0.0.1:5000/message
WEBSOCKET_LIST = []
@app.route(/message)
def message():
    ws = request.environ.get(wsgi.websocket)
    if not ws:
        print(http)
        return 您使用的是Http协议
    WEBSOCKET_LIST.append(ws)
    while True:
        cid = ws.receive()  # 接收信息
        if not cid:
            WEBSOCKET_LIST.remove(ws)
            ws.close()
            break
        old = USERS[cid][count]
        new = old + 1
        USERS[cid][count] = new
        for client in WEBSOCKET_LIST:
            client.send(json.dumps({cid:cid,count:new}))



if __name__ == __main__:
    http_server = WSGIServer((0.0.0.0, 5000), app, handler_class=WebSocketHandler)
    http_server.serve_forever()

 

以上是关于Flask websocket的主要内容,如果未能解决你的问题,请参考以下文章

DASH 实时烛台图表不会更新,websocket,sqlalchemy,flask 应用程序

如何访问使用 websockets 发送的烧瓶中的 formData?Flask-SocketIO

flask使用websocket

flask-websocket(1)

基于flask框架,使用websocket实现一对一聊天室功能

Websocket