html5 http的轮询和Websocket原理

2019-01-28 11:26:01王冬梅

加密方式:

import struct msg_bytes = "5555555".encode("utf8") token = b"x81" length = len(msg_bytes) if length < 126: token += struct.pack("B", length) elif length == 126: token += struct.pack("!BH", 126, length) else: token += struct.pack("!BQ", 127, length) msg = token + msg_bytes print(msg)

四、基于flask框架、Websocket协议实现的客户端和服务端链接通信示例:

pip3 install gevent-websocket

from flask import Flask, request from geventwebsocket.websocket import WebSocket from gevent.pywsgi import WSGIServer from geventwebsocket.handler import WebSocketHandler app = Flask(__name__) @app.route("/ws") def websocket(): # 得到用户的链接 user_socket = request.environ.get("wsgi.websocket") # type:WebSocket print("访问成功") while True: msg = user_socket.receive() # 接受消息 print(msg) user_socket.send(msg) # 发送消息 if __name__ == '__main__': # 指定地址、端口号开启Websocket服务 http_serv = WSGIServer(("127.0.0.1", 8001), app, handler_class=WebSocketHandler) # 启动Websocket服务 http_serv.serve_forever()

html文件:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> </head> <body> <botton class="btn btn-default" onclick="createsocket()">点击创建链接</botton> <br> <p>请您输入消息:<input type="text" placeholder="输入消息" id="msg"></p> <buttom class="btn btn-success" onclick="send_msg()">发送消息</buttom> <script> var ws = null; function createsocket() { ws = new WebSocket("ws://127.0.0.1:8001/ws"); ws.onmessage = function (data) { console.log("从服务端收到的消息=",data.data); } } function send_msg() { var to_msg = document.getElementById("msg").value; ws.send(to_msg) } </script> </body> </html>
第一步:运行flask 第二步:运行html文件 第三步:点击创建链接 第四步:输入消息 第五步:点击发送消息

 

客户端.png

服务器端.png

这样我们就简单实现了通过Websocket协议的客户端服务端通信。并且我们可以创建多个链接同时对服务器端通信。