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

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 头的验证)

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('客户端已连接');
});

http://www.dtcms.com/a/150290.html

相关文章:

  • 栈和队列学习记录
  • 【playwright】学习--持续汇总
  • onlyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
  • 视频监控从安装到优化的技术指南,视频汇聚系统EasyCVR智能安防系统构建之道
  • 高并发下单库存扣减异常?飞算 JavaAI 自动化生成分布式事务解决方案
  • 使用Python创建带边框样式的Word表格
  • HTML+CSS对角背景变色
  • C# 中的 `lock` 关键字本质
  • Saas、Paas、Faas、Baas的概念学习与对比
  • 精益数据分析(18/126):权衡数据运用,精准把握创业方向
  • 前端js需要连接后端c#的wss服务
  • 【3】CICD持续集成-k8s集群中安装Jenkins-agent(主从架构)
  • 【自然语言处理与大模型】大模型参数规模与部署配置调查2025第一季度
  • [特殊字符] 大模型对话风格微调项目实战——模型篇 [特殊字符]✨
  • 深度解析:透过十问十答洞悉大模型SFT的应用策略
  • gem5-gpu教程04 高速缓存一致性协议和缓存拓扑
  • 【电机仿真】MPC模型预测转速、电流双闭环控制器——PMSM有感FOC控制
  • Java面试:探索Spring Boot与微服务的深度挑战
  • 关于编译原理——语义翻译器的设计
  • 图文结合 - 储能系统产品需求文档(PRD)- (慧哥)慧知开源充电桩平台
  • 互联网大厂Java面试:RocketMQ、RabbitMQ与Kafka的深度解析
  • QT6 源(45):分隔条 QSplitter 允许程序的用户修改布局,程序员使用 IDE时,就是分隔条的用户,以及其 QSplitter 源代码
  • MyBatis中的@Param注解-如何传入多个不同类型的参数
  • (09)Vue脚手架的使用(Vite、vue-cli、create-vue)
  • 软件项目实施全流程及交付物清单
  • 逻辑漏洞安全
  • 硬核科普丨2025年安全、高效网络准入控制系统深度解析
  • 配电室安全用电漏电保护装置的安全用电措施
  • 【水印图片文字识别】水印相机拍摄的照片提取重要的信息可以批量改名,批量识别水印文字内容批量给图片改名,基于QT和腾讯OCR的识别方案
  • 2025.04.23华为机考第二题-200分