zoukankan      html  css  js  c++  java

  • 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

     具体详细下载地址
  • 相关阅读:
    别再重复造轮子了，利用list创建任意数据类型的链表
    可配置内存池实现
    简单内存池实现
    基于本博客版本中的循环缓冲的测试（Linux环境）
    循环缓冲实现（ring buffer/circular buffer)
    recvfrom超时设置
    Linux系统如何做性能测试？
    深入理解虚拟内存机制
    Linux 内核的测试和调试
    python学习之路 实现简单的计算机功能。
  • 原文地址：https://www.cnblogs.com/weidaijie/p/13678981.html
Copyright © 2011-2022 走看看