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

浏览器和服务器之间的通信更便利,比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 头的验证)

javascript 复制代码
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('客户端已连接');
});
相关推荐
熊文豪19 分钟前
KingbaseES 数据加密全解:从 SSL 到全密态
网络·网络协议·ssl
91刘仁德21 分钟前
Linux网络编程从入门到实战:UDP/TCP协议与socket编程全解析
linux·网络·笔记·tcp/ip·udp
网络小江43 分钟前
上网第三十八课:TCP 三次握手与四次挥手——连接到底是怎么“谈“成的
网络协议
小此方1 小时前
Linux网络(二十):TCP拥塞控制与延迟应答详解:从拥塞窗口到TCP性能优化,理解TCP与UDP的效率差异
linux·网络·php
迪康coolmu1 小时前
屏幕水印与防拍照落地:从水印类型到泄密溯源的完整配置
运维·网络·安全·网络安全·数据安全
AIgorithmGEEK1 小时前
[Linux]HTTP 应用层协议全解(下篇)
linux·网络·网络协议·http·cookie·无连接·无状态
名誉寒冰2 小时前
我是怎么理解 eBPF、AppArmor 和 Seccomp 的?
linux·网络·内核
DP DPharness2 小时前
手机连不上 DSH 时的排错顺序:从 401 到 WebSocket 放行
websocket·网络协议·智能手机
‎ദ്ദിᵔ.˛.ᵔ₎2 小时前
linux 进程间通信
linux·网络
91刘仁德2 小时前
传输层协议深度拆解:端口寻址、UDP 报文与 TCP 可靠性机制全解析
linux·网络·c++·网络协议·tcp/ip·udp·c