0 实时跟服务端通信方案

1 轮询：

客户端向服务端无限循环发送http请求，一旦服务端有最新消息，从当次http响应中带回，客户端就能收到变化

2 长轮回（web版微信采用此方式）

客户端和服务端保持一个长连接（http），等服务端有消息返回就断开，
如果没有消息，就会hold住，等待一定时间，然后再重新连接，也是个循环的过程

3 websocket协议

客户端发起HTTP握手，告诉服务端进行WebSocket协议通讯，并告知WebSocket协议版本。
服务端确认协议版本，升级为WebSocket协议。之后如果有数据需要推送，会主动推送给客户端
1 WebSocket介绍
WebSocket是一种通信协议，可在单个TCP连接上进行全双工通信。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以建立持久性的连接，并进行双向数据传输。
说白了就是WebSocket可以主动向客户端推送消息实现双工通信

握手阶段采用 HTTP 协议。
数据格式轻量，性能开销小。客户端与服务端进行数据交换时，服务端到客户端的数据包头只有2到10字节，客户端到服务端需要加上另外4字节的掩码。HTTP每次都需要携带完整头部。
更好的二进制支持，可以发送文本，和二进制数据
没有同源限制，客户端可以与任意服务器通信
1.1 请求协议
GET / HTTP/1.1\r\n # 请求首行，握手阶段还是使用http协议
Host: 127.0.0.1:8080\r\n # 请求头
Connection: Upgrade\r\n # 表示要升级协议
Pragma: no-cache\r\n
Cache-Control: no-cache\r\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36\r\n
Upgrade: websocket\r\n # 要升级协议到websocket协议
Origin: http://localhost:63342\r\n
Sec-WebSocket-Version: 13\r\n # 表示websocket的版本。如果服务端不支持该版本，需要返回一个Sec-WebSocket-Versionheader，里面包含服务端支持的版本号
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8\r\n
Sec-WebSocket-Key: 07EWNDBSpegw1vfsIBJtkg\r\n # 对应服务端响应头的Sec-WebSocket-Accept，由于没有同源限制，websocket客户端可任意连接支持websocket的服务。这个就相当于一个钥匙一把锁，避免多余的，无意义的连接
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits\r\n\r\n
1.2 响应协议（响应成功，便握手成功，就可以双工通信了）
HTTP/1.1 101 Switching Protocols\r\n # 响应首行，还是使用http协议
Upgrade:websocket\r\n # 表示要升级到websocket协议
Connection: Upgrade\r\n # 表示要升级协议
Sec-WebSocket-Accept: 07EWNDBSpegw1vfsIBJtkg\r\n # 根据客户端请求首部的Sec-WebSocket-Key计算出来。
WebSocket-Location: ws://127.0.0.1:8000\r\n\r\n
1.3 通信数据帧格式
详见：https://www.cnblogs.com/chyingp/p/websocket-deep-in.html
2 使用python的socket模块写一个websocket服务端
2.1 服务端
import base64
import hashlib
import socket

sock = socket.socket()

绑定host，默认端口8000

sock.bind(("127.0.0.1", 8000))

半连接池大小

sock.listen(5)

def get_headers(data):
"""
将请求头转换为字典
"""
header_dict = {}
data = str(data, encoding="utf-8")
"""
请求头格式：
GET / HTTP/1.1\r\n # 请求首行，握手阶段还是使用http协议
Host: 127.0.0.1:8080\r\n # 请求头
Connection: Upgrade\r\n # 表示要升级协议
Pragma: no-cache\r\n
Cache-Control: no-cache\r\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36\r\n
Upgrade: websocket\r\n # 要升级协议到websocket协议
Origin: http://localhost:63342\r\n
Sec-WebSocket-Version: 13\r\n # 表示websocket的版本。如果服务端不支持该版本，需要返回一个Sec-WebSocket-Versionheader，里面包含服务端支持的版本号
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8\r\n
Sec-WebSocket-Key: 07EWNDBSpegw1vfsIBJtkg==\r\n # 对应服务端响应头的Sec-WebSocket-Accept，由于没有同源限制，websocket客户端可任意连接支持websocket的服务。这个就相当于一个钥匙一把锁，避免多余的，无意义的连接
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits\r\n\r\n
"""
header, body = data.split("\r\n\r\n", 1) # 因为请求头信息结尾都是\r\n,并且最后末尾部分是\r\n\r\n；
# 所以以此分割
header_list = header.split("\r\n")
for i in range(0, len(header_list)):
if i == 0:
if len(header_list[0].split(" ")) == 3:
header_dict['method'], header_dict['url'], header_dict['protocol'] = header_list[0].split(" ")
else:
k, v = header_list[i].split(":", 1)
header_dict[k] = v.strip()
return header_dict

def get_data(info):
"""
对返回消息进行解码
比较复杂，详见数据帧格式解析：
https://www.cnblogs.com/chyingp/p/websocket-deep-in.html
"""
payload_len = info[1] & 127
if payload_len == 126:
mask = info[4:8]
decoded = info[8:]
elif payload_len == 127:
mask = info[10:14]
decoded = info[14:]
else:
mask = info[2:6]
decoded = info[6:]
bytes_list = bytearray() # 使用字节将数据全部收集，再去字符串编码，这样不会导致中文乱码
for i in range(len(decoded)):
chunk = decoded[i] ^ mask[i % 4] # 解码方式
bytes_list.append(chunk)
body = str(bytes_list, encoding='utf-8')
return body

等待用户连接

conn, addr = sock.accept()
print("客户端连接了：", conn, addr)

获取握手消息，magic string ,sha1加密

data = conn.recv(1024)
headers = get_headers(data)

对请求头中的sec-websocket-key进行加密

res_tpl = "HTTP/1.1 101 Switching Protocols\r\n"
"Upgrade:websocket\r\n"
"Connection: Upgrade\r\n"
"Sec-WebSocket-Accept: %s\r\n"
"WebSocket-Location: ws://%s%s\r\n\r\n"

固定的RFC规定的

magic_string = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'

确认握手Sec-WebSocket-Key固定格式：headers头部的Sec-WebSocket-Key+'258EAFA5-E914-47DA-95CA-C5AB0DC85B11'

确认握手的秘钥值为 传入的秘钥+magic_string，使用sha1算法加密，然后base64转码

value = headers['Sec-WebSocket-Key'] + magic_string
ac = base64.b64encode(hashlib.sha1(value.encode('utf-8')).digest())
response_str = res_tpl % (ac.decode('utf-8'), headers['Host'], headers['url'])

响应握手信息，这样就建立连接成功，双方就可以互通信息了

conn.send(bytes(response_str, encoding='utf-8'))

可以进行通信--接收客户端发送的消息

while True:
data = conn.recv(1024)
data = get_data(data)
print(data)
2.2 客户端

application = ProtocolTypeRouter({
# 'websocket': AuthMiddlewareStack( # 使用AuthMiddlewareStack，后续在视图类中可以取出self.scope，相当于request对象
# URLRouter(
# routing.websocket_urlpatterns# 指明路由文件是django_websocket/routing.py,类似于路由分发
# )
# ),
'websocket': URLRouter(
routing.websocket_urlpatterns # 指明路由文件是django_websocket/routing.py,类似于路由分发
),
})
最后在app里配置路由和对应的消费者，(我是app01下的routing.py)：
from django.urls import path
from . import consumers

websocket_urlpatterns = [
path('ws/chat', consumers.Chatting), #consumers.Chatting 是该路由的消费者
]
第四步:在app目录下编写consumers.py
from channels.generic.websocket import AsyncWebsocketConsumer
import json
class Chatting(AsyncWebsocketConsumer):
async def connect(self):
print('connect')
# AuthMiddlewareStack：封装了django的auth模块，使用这个配置我们就可以在consumer中通过下边的代码获取到用户的信息
print(self.scope)
self.room_group_name = 'xiaoyuanqujing'
# 加入聊天室
await self.channel_layer.group_add(
self.room_group_name,
self.channel_name
)

    await self.accept()

async def disconnect(self, close_code):
    # 离开聊天室
    print('disconnect')
    print(self.scope)
    await self.channel_layer.group_discard(
        self.room_group_name,
        self.channel_name
    )

# 通过WebSocket，接收数据
async def receive(self, text_data):
    print('receive')
    text_data_json = json.loads(text_data)
    message = text_data_json['message']
    print(message)
    # Send message to room group
    await self.channel_layer.group_send(
        self.room_group_name,
        {
            'type': 'chat_message', # 写一个当前类中的方法名，会触发该方法执行,组里有多少人会触发多少次
            'message': message,
            'username':str(self.scope['query_string']) # 把当前客户端的名字传入（也可以去ip地址）
        }
    )

# Receive message from room group
async def chat_message(self, event):
    print('chat_message')
    # 取出发言人的名字和说的话
    message = event['username'] + event['message']
    # 通过WebSocket发送
    await self.send(text_data=json.dumps({
        'message': message
    }))

第五步：前端发起websocket请求

姓名： 加入聊天室

动图封面

注意（layer介绍）
信道层是一种通信系统。它允许多个消费者实例彼此交谈，以及与Django的其他部分交谈。
通道层提供以下抽象：
通道是一个可以将邮件发送到的邮箱。每个频道都有一个名称。任何拥有频道名称的人都可以向频道发送消息。
一组是一组相关的通道。一个组有一个名称。任何具有组名称的人都可以按名称向组添加/删除频道，并向组中的所有频道发送消息。无法枚举特定组中的通道。
每个使用者实例都有一个自动生成的唯一通道名，因此可以通过通道层进行通信。
在我们的聊天应用程序中，我们希望同一个房间中的多个聊天消费者实例相互通信。为此，我们将让每个聊天消费者将其频道添加到一个组，该组的名称基于房间名称。这将允许聊天用户向同一房间内的所有其他聊天用户发送消息。
我们将使用一个使用redis作为后备存储的通道层。要在端口6379上启动Redis服务器，首先系统上安装redis，并启动
3.3 django3.0默认支持websocket
新建一个Django3.0的项目（我是用django3.2.2），会发现项目路径下有一个asgi.py

from django.core.asgi import get_asgi_application
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'django_channels_3.settings')
application = get_asgi_application() ```
该文件提供了默认的Django ASGI设置，并公开了一个名为application的ASGI应用程序
可以使用uvicorn或daphne等ASGI服务器运行该应用程序
ASGI介绍
ASGI:“异步服务器网关接口”是用于使用Python构建异步Web服务的规范。
它是WSGI的精神继承者，WSGI已被Django和Flask等框架使用了很长时间。
ASGI使您可以使用Python的本机异步/等待功能来构建支持长期连接的Web服务，例如Websockets和Server Sent Events。
ASGI应用程序是一个异步函数，它带有3个参数：作用域（当前请求的上下文），接收（一个异步函数，可让您侦听传入的事件）和发送（一个异步函数，可将事件发送至客户端）。
在ASGI应用程序内部，您可以根据范围字典中的值路由请求。
例如，您可以通过检查scope [‘type’]的值来检查该请求是HTTP请求还是Websocket请求。要侦听来自客户端的数据，您可以等待接收功能。准备好将数据发送到客户端时，可以等待发送功能，然后将要发送给客户端的任何数据传递给客户端
第一步：修改asgi.py
import os

from django.core.asgi import get_asgi_application
from app01.websocket import websocket_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'django_channels_3.settings')
application_asgi = get_asgi_application()
async def application(scope, receive, send):
    print(scope)
    if scope['type'] == 'http':
        print('http')
        await application_asgi(scope, receive, send)
    elif scope['type'] == 'websocket':
        print('websocket')
        await websocket_application(scope, receive, send)
    else:
        raise NotImplementedError("Unknown scope type %s"%scope['type'])
第二步：在app01下新建一个websocket.py
async def websocket_application(scope, receive, send):

    while True:
        event = await receive()
        if event['type'] == 'websocket.connect':
            await send({
                'type': 'websocket.accept'
            })

        if event['type'] == 'websocket.disconnect':
            break

        if event['type'] == 'websocket.receive':
            print(event['text'])
            import json
            # 收到的内容
            rec=json.loads(event['text'])['message']
            await send({
                'type': 'websocket.send',
                'text': json.dumps({'message':'收到了你的：%s'%rec})
            })
第三步：在app01的view.py中写入
def index(request):
    return render(request,'index.html')
第四步：配置路由urls.py
from app01 import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index),
]
第五步：编写测试html页面（index.html）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket通信</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<button id="btn">点我连接</button>
<hr>
请输入：<input type="text" id="chat-message-input">
<button id="chat-message-submit">发送</button>
<hr>
通信内容：
<br>
<textarea id="chat-log" cols="30" rows="10"></textarea>
</body>
<script>
    var chatSocket
    $('#btn').click(function () {
        chatSocket = new WebSocket('ws://127.0.0.1:8000');

        chatSocket.onmessage = function (e) {
            console.log(e)
            var data = JSON.parse(e.data);

            var message = data['message'];
            console.log(message)
            var datamsg = $('#chat-log').val() + message + '\n'
            $('#chat-log').val(datamsg)
        };

        chatSocket.onclose = function (e) {
            console.error(e);
        };

    })

    $('#chat-message-submit').click(function () {
        console.log(chatSocket.readyState)
        if (chatSocket.readyState === 1) {
            var message = $('#chat-message-input').val()
            chatSocket.send(JSON.stringify({
                'message': message
            }));
            $('#chat-message-input').val("")
        } else {
            console.log("还没有连接")
        }


    })
</script>
</html>
第六步：使用uvicorn 启动项目
# pip3 install uvicorn
uvicorn django_channels_3.asgi:application
4 基于django+websocket+paramiko实现跳板机(堡垒机)
4.1 app01下的routing.py
websocket_urlpatterns = [
    path('ws/chat', consumers.Chatting), #consumers.Chatting 是该路由的消费者
    re_path('ws/webssh/(?P<host>.*)/(?P<username>\w+)/(?P<password>\w+)', consumers.SSHConsumer),
]
4.2 app01下的views.py
def webterminal(request):
    if request.method=='GET':
        return render(request,'webterminal_input.html')
    else:
        host=request.POST.get('host')
        username=request.POST.get('username')
        password=request.POST.get('password')
        print(host)
        print(username)
        return render(request,'webterminal.html',locals())
4.3 webterminal_input.html和webterminal.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请输入远端</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<form action="" method="post">
    <p>地址：<input type="text" name="host"></p>
    <p>用户名：<input type="text" name="username"></p>
    <p>密码：<input type="text" name="password"></p>
    <input type="submit" value="连接">
</form>

</body>

<script>
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>终端</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="/static/css/xterm.css"/>
    <script src="/static/js/xterm.js"></script>



</head>
<body style="margin: 0;padding: 0;">
<div id="terminal"></div>
</body>
<script>


    function terminal_size() {
        return {
            cols: Math.floor($('#terminal').width() / 9),
            rows: Math.floor($(window).height() / 17),
        }
    }

    let cols = terminal_size().cols;
    let rows = terminal_size().rows;

    var term = new Terminal({cursorBlink: true, useStyle: true, cols: cols, rows: rows});
    term.open(document.getElementById('terminal'));
    term.focus();
    var socket = new WebSocket('ws://' + window.location.host + '/ws/webssh/{{ host }}/{{ username }}/{{ password }}');
    socket.onopen = function () {

        term.onData(data => {
            let send_data = JSON.stringify({
                'flag': 'input',
                'data': data,
            });

            console.log(send_data)
            socket.send(send_data)
        })
    }


    socket.onerror = function (event) {
        console.log('error:' + event);
    };

    socket.onmessage = function (event) {
        data = JSON.parse(event.data);
        term.write(data.message);

        if (data.flag === 'failed') {
            socket.close();
        }
    };

    socket.onclose = function (event) {
        term.write('\n\r\x1B[1;3;31m连接关闭.\x1B[0m');
    };


</script>
</html>
4.4 app01下的consumers.py
import paramiko
from threading import Thread


class SSHConsumer(WebsocketConsumer):
    def connect(self):
        print(self.scope)
        query_params = self.scope['url_route']['kwargs']
        host = query_params['host']
        username = query_params['username']
        password = query_params['password']

        self.accept()
        # paramiko 建立连接
        ssh = paramiko.SSHClient()
        ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())
        try:
            ssh.connect(hostname=host, port=22, username=username, password=password, timeout=8)
        except Exception as e:
            message = json.dumps({'flag': 'error', 'message': str(e)})
            self.send(message)
            return False

        # 打开一个ssh通道并建立连接
        transport = ssh.get_transport()
        self.ssh_channel = transport.open_session()
        self.ssh_channel.get_pty(term='xterm')
        self.ssh_channel.invoke_shell()
        recv = self.ssh_channel.recv(1024).decode('utf-8')
        message = json.dumps({'flag': 'success', 'message': recv})
        self.send(message)

    def disconnect(self, close_code):
        self.ssh.close()

    def receive(self, text_data=None):
        text_data = json.loads(text_data)
        # run_shell(data=text_data.get('data', ''))
        # 向远程服务器发送命令
        print(text_data.get('data', ''))
        Thread(target=self.ssh_channel.send,args=[text_data.get('data', '')]).start()
        # self.ssh_channel.send(text_data.get('data', ''))
        def recv_from_host():
            # 从远程服务器接收命令，返回给前端
            while not self.ssh_channel.exit_status_ready():
                data = self.ssh_channel.recv(1024).decode('utf-8', 'ignore')
                if len(data) != 0:
                    message = {'flag': 'success', 'message': data}
                    self.send(json.dumps(message))
                else:
                    break

        Thread(target=recv_from_host).start()

本栏目推荐文章
• websocket
• 升讯威在线客服系统是如何实现对 IE8 完全完美支持的（怎样从 WebSocket 降级到 Http）
• http和websocket的一些思考
• WebSocket与JavaScript：实现实时地理位置定位系统的关键技术
• 如何使用JavaScript和WebSocket实现实时在线投票系统
• 如何使用WebSocket和JavaScript实现在线人脸识别系统
• 如何使用WebSocket和JavaScript实现在线电子签名系统
• 如何使用WebSocket和JavaScript实现在线翻译系统
• 如何利用JavaScript和WebSocket实现实时在线拍卖系统
• 40. 干货系列从零用Rust编写负载均衡及代理，websocket的实现

WebSocketspringboot websocket websocket原理 websocket方法 websocket nginx websocket程序 websocket http websocket消息 websocket_server websocket笔记python netty-websocket-spring-boot-start