WEBsocket

 

 不同的框架使用 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>

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

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

 

posted on 2018-05-17 20:16  王大拿  阅读(229)  评论(0)    收藏  举报

导航