网站怎么做移动图片不显示不出来吗,如何制作ppt视频教程,免费网站建设排行表,群晖个人网站建设在HTML5 的早期开发过程中#xff0c;由于意识到现有的 HTTP 协议在实时通信方面的不足#xff0c;开发者开始探索能够在 Web 环境下实现双向实时通信的新的通信协议#xff0c;提出了 WebSocket 协议的概念。
一、什么是 WebSocket#xff1f;
WebSocket 是一种在单个 T…在HTML5 的早期开发过程中由于意识到现有的 HTTP 协议在实时通信方面的不足开发者开始探索能够在 Web 环境下实现双向实时通信的新的通信协议提出了 WebSocket 协议的概念。
一、什么是 WebSocket
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。与 HTTP 协议不同的是WebSocket 允许服务器和客户端在连接建立后能够在不需要重新请求的情况下相互发送数据。即浏览器和服务器只需要完成一次握手两者之间就直接可以创建持久性的连接 并进行双向数据传输。这个特性使得 WebSocket 特别适合于需要实时数据交换的应用场景。
二、WebSocket 的使用场景
即时聊天应用、多人在线游戏、股票行情及天气预报等实时数据更新、在线白板工具、协同开发平台、在线协同绘图工具、设计协作平台等
三、简要介绍WebSocket 的工作原理 握手过程 WebSocket 连接的建立始于客户端的 HTTP 请求。服务器接收到请求后会进行确认 并切换为 WebSocket 协议从而建立连接。 握手成功后HTTP 连接切换为 WebSocket 连接此时客户端和服务器之间可以进行全双工通信。 数据传输 一旦 WebSocket 连接建立客户端和服务器之间就可以进行双向的数据传输。 连接关闭 WebSocket 连接可以由客户端或服务器任意一方发起关闭。包括以下步骤
发送关闭帧一方发送一个关闭帧表明希望关闭连接。确认关闭请求接收方回应一个关闭帧确认关闭请求。完成关闭在双方都发送关闭帧后连接正式关闭。客户端和服务器随后释放相关资源。
四、WebSocket 的连接建立过程
客户端发送 WebSocket 握手请求请求头包含 Upgrade 和 Connection 字段指定协议升级和建立连接。服务器收到握手请求后验证请求头的字段并返回握手响应响应头包含 Upgrade 和 Connection 字段以及一个随机的 Sec-WebSocket-Key 字段。客户端收到握手响应后验证响应头的字段并生成一个 Sec-WebSocket-Accept 值进行验证。验证通过后WebSocket 连接建立成功客户端和服务器可以开始进行实时通信。
五、WebSocket 在前端的实现
1. 创建 WebSocket 连接
使用 WebSocket 构造函数并传入服务器的 URL。URL 通常以 ws:// 或 wss://用于安全连接开头。
// 创建 WebSocket 连接
const socket new WebSocket(wss://example.com/socket);2. 处理 WebSocket 事件
WebSocket 对象提供了几个事件处理器可以通过这些处理器来处理连接的各种状态和数据传输。
onopen连接成功打开时触发。onmessage接收到消息时触发。onerror连接发生错误时触发。onclose连接关闭时触发。
// 创建 WebSocket 连接
const socket new WebSocket(wss://localhost:8080);// 连接成功打开时的处理
socket.onopen function(event) {console.log(WebSocket 连接已打开);// 发送一条消息到服务器socket.send(halo啊哈哈哈哈哈哈(*´▽)ノノ!);
};// 接收到消息时的处理
socket.onmessage function(event) {// 处理接收到的消息const message event.data;console.log(接收到消息咯O(∩_∩)O:, message);
};// 连接关闭时的处理
socket.onclose function(event) {console.log(啊喔…… WebSocket连接已关闭(・ω・´));
};// 连接发生错误时的处理
socket.onerror function(error) {console.error(WebSocket发生错误啦:, error);
};3. 发送消息
使用 send 方法向服务器发送文本消息。
// 发送文本消息
socket.send(Hello Server!);WebSocket 除了发送和接收文本消息外还支持发送和接收二进制数据。对于发送二进制数据可以使用 send() 方法传递一个 ArrayBuffer 或 Blob 对象例如
// 发送二进制数据
const buffer new ArrayBuffer(8);// 创建一个 8 字节的 ArrayBuffer 对象
//ArrayBuffer 是一个表示通用、固定长度原始二进制数据缓冲区的对象。//本身不提供操作数据的直接方法而是通过 TypedArray 或 DataView 对其进行读写操作。
const view new DataView(buffer);// 创建一个 DataView 对象以便操作 ArrayBuffer 中的数据
//DataView 提供了一种对 ArrayBuffer 中数据进行读取和写入的方式支持多种数据类型如整数、浮点数等的读取和写入。
//创建 DataView 对象时传入了之前创建的 ArrayBuffer这使得 DataView 可以操作这个缓冲区中的数据。
view.setUint8(0, 255);
//setUint8(offset, value) 方法将 8 位无符号整数值写入 ArrayBuffer 的指定位置。
//offset 是偏移量从缓冲区的起始位置value 是要写入的值。
//0 表示数据将写入 ArrayBuffer 的第一个字节位置255 是要写入的值。由于 Uint8 是 8 位无符号整数范围从 0 到 255。socket.send(buffer);
//send(data) 方法将指定的数据发送到 WebSocket 服务器。
//在这里发送的是 ArrayBuffer 对象即我们之前 创建并修改的 数据缓冲区。在接收二进制数据时可以通过 event.data 获取到 ArrayBuffer 对象然后进行处理。
4. 关闭连接
可以调用 close 方法关闭 WebSocket 连接。可以传递一个关闭状态码和可选的原因描述。
// 关闭 WebSocket 连接
socket.close(1000, Normal closure);六、WebSocket的安全性和跨域问题处理
WebSocket 支持通过 wss:// 前缀建立加密的安全连接使用 TLS / SSL 加密通信确保数据的安全性。在使用加密连接时服务器需要配置相应的证书。
对于跨域问题WebSocket 遵循同源策略只能与同源的服务器建立连接。 如果需要与不同域的服务器通信可以使用 CORS 跨域资源共享 来进行跨域访问控制。
七、WebSocket 协议和 HTTP 协议的区别
连接方式WebSocket 提供持久的连接通过握手过程建立连接后保持打开状态直到主动关闭而 HTTP 是无状态的每次请求都需要重新建立连接。数据格式WebSocket 支持文本和二进制数据的传输而 HTTP 主要是传输文本数据。数据传输方式WebSocket 实现了全双工通信数据传输是双向的客户端和服务器可以 同时发送和接收 数据数据通过帧frame进行传输减少了传输开销。而 HTTP 数据传输是单向的客户端发起请求服务器响应数据。每个请求都包含完整的 HTTP 头部。协议标识WebSocket 使用 ws:// 或 wss:// 前缀标识而 HTTP 使用 http:// 或 https://协议切换WebSocket 使用 HTTP 协议进行初始的握手之后切换到 WebSocket 协议进行通信。握手过程包括协议升级的请求和响应。HTTP 协议在每次请求时都是独立的不涉及协议切换。应用场景WebSocket适用于实时交互的场景如即时聊天、在线游戏、实时数据推送等需要快速且频繁的数据交换。HTTP适用于传统的 Web 请求和响应场景如静态资源加载、表单提交等。
八、WebSocket 相对于传统 HTTP 请求的优势
实时性WebSocket 提供了低延迟的实时通信能力能够在服务器端有新数据时立即推送给客户端。双向通信WebSocket 支持客户端和服务器之间的双向通信可以实现实时聊天、实时数据更新等场景。较低的网络开销WebSocket 使用长连接连接保持持久减少了频繁建立和关闭连接的开销和服务器资源消耗。更高的性能由于减少了 HTTP 请求的开销WebSocket 在建立连接后不再需要重复的 HTTP 请求头数据通过帧进行传输支持文本和二进制数据灵活性高使WebSocket 在性能上更高效。跨域支持WebSocket 具备跨域通信的能力可以跨域进行实时通信。
九、WebSocket 的性能优化
减少数据量合理控制发送的数据量大小避免不必要的数据传输。心跳机制通过定时发送心跳消息保持连接的活跃状态防止连接被关闭。数据压缩可以使用压缩算法对数据进行压缩减少网络传输的数据量。服务器端优化合理配置服务器端的连接数和资源管理以支持更多的并发连接。
参考
developer.mozilla.org/zh-CN/docs/…ruanyifeng.com/blog/2017/0…www.cnblogs.com/nnngu/p/934…
