Flask中使用websocket

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':'22','count':0},
    '2':{'name':'222','count':0},
    '3':{'name':'2222','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}))
    return  "websocket"

@app.route('/test')
def test():
    print("测试")
    return "Test"

if __name__ == '__main__':
    #app.run("0.0.0.0",port=5001)
    http_server = WSGIServer(('0.0.0.0', 5001), app, handler_class=WebSocketHandler)
    http_server.serve_forever()

app.py

<!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>1111</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:5001/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>

index.html

具体详细下载地址

相关阅读:
Linux修改root密码报错
Python中的排序---冒泡法
Python随机数
Python中的深拷贝和浅拷贝
Couldn’t download https://raw.githubusercontent.com/certbot/certbot/ 问题解决
Python内置数据结构----list
Python内置数据结构
Vue指令
computed 和 watch
Vue的数据响应式

原文地址：https://www.cnblogs.com/weidaijie/p/13678981.html