WEBsocket Tornado 用flask和长轮询实现对帅哥投票和实时查看票数

不同的框架使用 websocket

本质

建立：双工通道（详见，实例）

分布图：（视频中找）

向客户端发数据：

客户端发送数据给服务端

服务端接收数据

index中写的发送事件客户向服务端发送数据代码（index.html）

web聊天室能够完成实时消息推送

后端

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

                    app = Flask(__name__)
                    app.secret_key = 'xfsdfqw'


                    @app.route('/index')
                    def index():
                        return render_template('index.html')


                    WS_LIST = []

                    @app.route('/test')
                    def test():
                        ws = request.environ.get('wsgi.websocket')
                        if not ws:
                            return '请使用WebSocket协议'
                        # websocket连接已经成功
                        WS_LIST.append(ws)
                        while True:
                            # 等待用户发送消息，并接受
                            message = ws.receive()

                            # 关闭：message=None
                            if not message:
                                WS_LIST.remove(ws)
                                break

                            for item in WS_LIST:
                                item.send(message)

                        return "asdfasdf"


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

前端（笔记中有代码）

　　　　　　　　　　　　<!DOCTYPE html>
                    <html lang="zh-cn">
                    <head>
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1">
                        <title>Title</title>
                        <style>
                            .msg-item{
                                padding: 5px;
                                border: 1px;
                                margin: 0 5px;
                            }
                        </style>
                    </head>
                    <body>
                        <h1>首页</h1>
                        <div>
                            <h2>发送消息</h2>
                            <input id="msg" type="text"  /> <input type="button" value="发送" onclick="sendMsg()">
                            <h2>接收消息</h2>
                            <div id="container">

                            </div>
                        </div>

                        <script src="/static/jquery-3.3.1.min.js"></script>
                        <script>

                            ws = new WebSocket('ws://192.168.12.42:5000/test');
                            ws.onmessage = function (event) {
                                var tag = document.createElement('div');
                                tag.className = 'msg-item';
                                tag.innerText = event.data;
                                $('#container').append(tag);
                            }

                            function sendMsg() {
                                ws.send($('#msg').val());
                            }

                        </script>
                    </body>
                    </html>

WEBsocket Tornado 用flask和长轮询实现对帅哥投票和实时查看票数

使用Tornado基于websocket完成实时聊天室

用flask和长轮询实现对帅哥投票和实时查看票数

猜你喜欢