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

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.xdnf.cn/news/1441.html

相关文章:

  • LLM优化提示词方案的方法
  • 深度探究获取淘宝商品数据的途径|API接口|批量自动化采集商品数据
  • 使用Python实现简单爬虫:从入门到实践
  • 21.disql命令登录达梦数据库,查询并操作数据库
  • MVVM框架详解:原理、实现与框架对比
  • 数据集 | 苹果目标检测数据集
  • 【AI提示词】营养师顾问
  • 树莓派超全系列教程文档--(42)树莓派config.txt旧版配置HDMI和杂项选项
  • 【因果推断】(一)知识点介绍
  • class文件(二)
  • Vue3父子组件数据双向同步实现方法
  • canoe 利用log进行故障重现方式
  • [架构之美]Ubuntu源码部署APISIX全流程详解(含避坑指南)
  • CSS初识
  • 测试基础笔记第十天
  • c++的jsoncpp使用
  • jdk17的新特性
  • Linux命令-sar
  • Java_day25-29
  • 扣子空间 (Coze Space) 使用入门,邀请码获取指南
  • Unity 创建、读取、改写Excel表格数据
  • c++中的enum变量 和 constexpr说明符
  • 策略模式:动态切换算法的设计智慧
  • 安装win11自带linux是报错:WslRegisterDistribution failed with error: 0x800701bcErr
  • 使用rclone迁移minio文件
  • PHP 反序列化CLI 框架类PHPGGC 生成器TPYiiLaravel 等利用
  • 深入微服务核心:从架构设计到规模化
  • Openharmony 和 HarmonyOS 区别?
  • RecyclerView中实现横向左滑加载更多功能
  • 【鸿蒙HarmonyOS】深入理解router与Navigation