在flask中使用websocket-实时消息推送

- flask默认使用wsgi支持http协议，如需使用websocket需要安装gevent-websocket模块，http，websocket协议都可以支持

　　Django应用：channel
　　Tornado应用：自己有

　pip3 install gevent-websocket

app.py

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


app = Flask(__name__)
app.secret_key = \';lkjnfdidiclsjek\'

GENTIEMAN = {
    \'1\':{\'name\':\'钢弹\',\'count\':0},
    \'2\':{\'name\':\'铁锤\',\'count\':0},
    \'3\':{\'name\':\'闫帅\',\'count\':0},
}

WEBSOCKET_DICT = {}

@app.before_request
def before_reuqest():
    if request.path == \'/login\':
        return None
    user_info = session.get(\'user_info\')
    if user_info:
        return None
    return redirect(\'login\')

@app.route(\'/login\',methods=[\'GET\',\'POST\'])
def login():
    if request.method == \'GET\':
        return render_template(\'login.html\')
    else:
        uid = str(uuid.uuid4())
        session[\'user_info\'] = {\'id\':uid,\'name\':request.form.get(\'user\')}
        return redirect(\'/index\')


@app.route(\'/index\')
def index():
    return render_template(\'index.html\',users=GENTIEMAN)

@app.route(\'/message\')
def message():
    # 1. 判断是否为Websocket请求,http不包含wsgi.websocket
    ws = request.environ.get(\'wsgi.websocket\')
    if not ws:
        return \'use websocket\'
    # 此处连接成功
    current_user_id = session[\'user_info\'][\'id\']
    WEBSOCKET_DICT[current_user_id] = ws
    while True:
        # 2. 等待用户发送消息，并接受
        message = ws.receive()  # 投票对应的ID

        # 关闭 mesaage = None
        if not message:
            del WEBSOCKET_DICT[current_user_id]
            break

        # 3. 获取用户要投票的ID，并+1
        old = GENTIEMAN[message][\'count\']
        new = old + 1
        GENTIEMAN[message][\'count\'] = new

        data = {\'user_id\':message,\'count\':new,\'type\':\'vote\'}
        # 给所有客户端推送消息
        for conn in WEBSOCKET_DICT.values():
            conn.send(json.dumps(data))
    return \'完毕\'

@app.route(\'/notify\')
def notify():
    data = {\'data\':\'订单生成\',\'type\':\'alert\'}
    for conn in WEBSOCKET_DICT.values():
        conn.send(json.dumps(data))
    return \'完毕\'

if __name__ == \'__main__\':
    # 如果是http请求走app使用原有的wsgi处理，如果是websocket请求走WebSocketHandler处理
    http_server = WSGIServer((\'127.0.0.1\', 5000), app, handler_class=WebSocketHandler)
    http_server.serve_forever()

index.html

<body>
    <h1>投票系统:参与投票的人</h1>
    <ul>
        {% for k,v in users.items() %}
            <li id="user_{{k}}" ondblclick="vote(\'{{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 socket = new WebSocket("ws://127.0.0.1:5000/message");

        socket.onmessage = function (event) {
            /* 服务器端向客户端发送数据时，自动执行 */
            var response = JSON.parse(event.data); // {\'user\':1,\'count\':new}
            if(response.type == \'vote\'){
                var nid = \'#user_\' + response.user_id;
                $(nid).find(\'span\').text(response.count)
            }else{
                alert(response.data);
            }

        };

        /*
        我要给某人投票
         */
         function vote(id) {
            socket.send(id);
        }

    </script>
</body>

<body>
<form method="post">
    <input type="text" name="user">
    <input type="submit" value="提交">
</form>
</body>