在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>

posted on 2018-09-10 22:45 孙龙-程序员阅读(2362) 评论(0) 编辑收藏举报

刷新页面返回顶部