当前位置：首页 > news >正文

WebSocket是h5定义的，双向通信，节省资源，更好的及时通信

news 来源：原创 2025/4/24 8:17:26

浏览器和服务器之间的通信更便利，比http的轮询等效率提高很多，

WebSocket并不是权限的协议，而是利用http协议来建立连接

websocket必须由浏览器发起请求，协议是一个标准的http请求，格式如下

GET ws://example.com:3000/chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
Origin: https://example.com:3000

关键字段解释：‌

‌Upgrade: websocket‌：表示客户端希望升级到 WebSocket 协议。
‌Connection: Upgrade‌：确认协议升级。
‌Sec-WebSocket-Key‌：一个 Base64 编码的随机值（16字节），用于握手验证。
‌Sec-WebSocket-Version‌：指定 WebSocket 协议版本（通常为 13）。
‌Origin‌（可选）：用于跨域控制，服务器可据此决定是否允许连接。

服务器响应（Server Handshake Response）‌
服务器返回 ‌HTTP 101 Switching Protocols‌ 状态码，确认协议升级：

Copy Code
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

‌关键字段解释：‌

‌Sec-WebSocket-Accept‌：服务器将客户端的 Sec-WebSocket-Key 与固定 GUID 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 拼接后，进行 SHA-1 哈希并 Base64 编码，返回此值供客户端验证。

握手成功后，通信将脱离 HTTP，转为基于帧的 WebSocket 协议。

为什么websocket连接可以实现双工通信，而http不可以呢？实际上上，http是建立在tcp之上的，tcp本身就实现了双工通信，但http协议的请求--应答机制限制了全双工通信。websocket连接建立以后，其实只是简单规定了一下：咱们接下来的通信就不使用http了，咱们直接互发数据吧。

安全的websocket连接机制和https类似，首先，浏览器用wss://创建websocket连接，会先通过https创建安全连接，然后，该https升级为websocket连接，底层通信仍然走的是安全的SSL/TLS

uniapp使用websocket，需实现心跳‌：防止因网络空闲导致连接断开

let timer;
const socketTask = uni.connectSocket({ url: 'wss://example.com' });socketTask.onOpen(() => {timer = setInterval(() => {socketTask.send({ data: 'ping' });}, 30000);
});socketTask.onClose(() => {clearInterval(timer);
});

Node.js 服务端设置 WebSocket 跨域：（关键在于 ‌握手阶段对 Origin 头的验证）

const WebSocket = require('ws');// 允许的 Origin 白名单
const allowedOrigins = ['https://your-frontend-domain.com','http://localhost:3000'
];const wss = new WebSocket.Server({port: 8080,verifyClient: (info) => {const origin = info.origin || info.req.headers.origin;if (!allowedOrigins.includes(origin)) {console.log(`拒绝来自 ${origin} 的跨域请求`);return false; // 阻止握手}return true; // 允许连接}
});wss.on('connection', (ws) => {console.log('客户端已连接');
});