zoukankan      html  css  js  c++  java
  • WebSocket

    什么是WebSocket

    websocket是HTML5出的东西(协议), 也就会说HTTP协议没有变化, 或者说没关系, 但HTTP是不支持持久连接的.(长连接, 循环连接的不算)

    websocket是一个支持持久化的协议,服务端可以实时(主动)给客户端发消息, 客户端可以主动向服务端发送消息, 是真正平等的对话

    websocket原理

    1. 服务端运行, 等待客户端连接

    2. 客户端来连接, 服务端同意

    3. 客户端立即发送一个'握手信息'

    4. 服务端接收握手信息后需要对数据加密, 并给客户端返回

    a. 握手信息 + magic_string
    b. sha1
    c. base64

    # 双方可以进行互相通信

    5. 服务端接收客户端的消息

    读取第二字节的后7位(转成十进制之后)
    		127:10,4,数据		# 4是头信息, 下同
    		126:4,4,数据
    	  <=125: 2,4,数据

    6. 服务端给客户端发消息

    token = b"x81"
    length = len(msg_bytes)
    if length < 126:
    	token += struct.pack("B", length)
    elif length <= 0xFFFF:
    	token += struct.pack("!BH", 126, length)
    else:
    	token += struct.pack("!BQ", 127, length)

    在Flask中使用

    from flask import Flask, render_template, request
    # 1 先导入
    from geventwebsocket.handler import WebSocketHandler
    from gevent.pywsgi import WSGIServer
    
    import json
    import time
    
    app = Flask(__name__)
    
    
    @app.route('/index')
    def index():
    
        return render_template('index.html')
    
    
    @app.route('/message')
    def message():
        ws = request.environ.get('wsgi.websocket')
        if not ws:
            return '这是一个http请求'
    
        while 1:
            req = ws.receive()          # 接收客户端发来的消息
            print(req)
            ws.send('hello client')     # 向客户端发送消息
    
        return 'websocket请求'
    
    
    if __name__ == '__main__':
        # 2 改用websocket方式运行
        http_server = WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler)
        http_server.serve_forever()
    server.py
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>投票系统</title>
    </head>
    <body>
    <h2>投票系统</h2>
    
    
    
    <script>
        // 1 与服务端建立一个websocketsocket请求
        var ws = new WebSocket('ws://127.0.0.1:5000/message');
        // 2 通过websocket给服务端发送一条消息
        // ws.send('hello')
        ws.onmessage = function (event) {
            /* 服务器端向客户端发送数据时,自动执行 */
            // {'cid':cid,'count':new}
    
            var response = event.data;  // 3 服务端传来的数据
            console.log(response)
    
        };
    
    
    </script>
    
    
    </body>
    </html>
    client.html
  • 相关阅读:
    项目Alpha冲刺(团队)-代码规范、冲刺任务与计划
    团队Github实战训练
    项目系统设计与数据库设计
    项目需求分析
    项目原型设计
    项目Alpha冲刺(团队)-第六天冲刺
    项目Alpha冲刺(团队)-第五天冲刺
    项目Alpha冲刺(团队)-第四天冲刺
    项目Alpha冲刺(团队)-第三天冲刺
    项目Alpha冲刺(团队)-第二天冲刺
  • 原文地址:https://www.cnblogs.com/sunch/p/10782042.html
Copyright © 2011-2022 走看看