type
status
date
slug
summary
tags
category
icon
password
URL
一. WebSocket 基本概念
1. WebSocket 是什么？
WebSocket 是基于 TCP的一种新的应用层网络协议。它提供了一个全双工的通道，允许服务器和客户端之间实时双向通信。因此，在WebSocket中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。
2. WebSocket 与 HTTP 协议的区别
与 HTTP 协议相比，WebSocket 具有以下优点：
- 更高的实时性能：WebSocket允许服务器和客户端之间实时双向通信，从而提高了实时通信场景中的性能。
- 更少的网络开销：HTTP 请求和响应之间需要额外的数据传输，而WebSocket 通过在同一个连接上双向通信，减少了网络开销。
- 更灵活的通信方式：HTTP 请求和响应通常是一一对应的，而 WebSocket允许服务器和客户端之间以多种方式进行通信，例如消息Push、事件推送等。
- 更简洁的 API：WebSocket 提供了简洁的API，使得客户端开发人员可以更轻松地进行实时通信。
当然肯定有缺点的：
- 不支持无连接: WebSocket是一种持久化的协议，这意味着连接不会在一次请求之后立即断开。这是有利的，因为它消除了建立连接的开销，但是也可能导致一些资源泄漏的问题。
- 不支持广泛: WebSocket 是 HTML5中的一种标准协议，虽然现代浏览器都支持，但是一些旧的浏览器可能不支持WebSocket。
- 需要特殊的服务器支持: WebSocket需要服务端支持，只有特定的服务器才能够实现 WebSocket协议。这可能会增加系统的复杂性和部署的难度。
- 数据流不兼容: WebSocket 的数据流格式与 HTTP不同，这意味着在不同的网络环境下，WebSocket的表现可能会有所不同。
3. WebSocket 工作原理
3.1. 握手阶段
WebSocket在建立连接时需要进行握手阶段。握手阶段包括以下几个步骤：
- 客户端向服务端发送请求，请求建立 WebSocket 连接。请求中包含一个Sec-WebSocket-Key 参数，用于生成 WebSocket 的随机密钥。
- 服务端接收到请求后，生成一个随机密钥，并使用随机密钥生成一个新的Sec-WebSocket-Accept 参数。
- 客户端接收到服务端发送的新的 Sec-WebSocket-Accept参数后，使用原来的随机密钥和新的 Sec-WebSocket-Accept参数共同生成一个新的 Sec-WebSocket-Key 参数，用于加密数据传输。
- 客户端将新的 Sec-WebSocket-Key参数发送给服务端，服务端接收到后，使用该参数加密数据传输。
3.2. 数据传输阶段
建立连接后，客户端和服务端就可以通过 WebSocket进行实时双向通信。数据传输阶段包括以下几个步骤：
- 客户端向服务端发送数据，服务端收到数据后将其转发给其他客户端。
- 服务端向客户端发送数据，客户端收到数据后进行处理。
WebSocket的每条消息可能会被切分成多个数据帧（最小单位）。发送端会将消息切割成多个帧发送给接收端，接收端接收消息帧，并将关联的帧重新组装成完整的消息。
发送方 -> 接收方：ping。
接收方 -> 发送方：pong。
ping 、pong 的操作，对应的是 WebSocket 的两个控制帧
3.3. 关闭阶段
当不再需要 WebSocket连接时，需要进行关闭阶段。关闭阶段包括以下几个步骤：
- 客户端向服务端发送关闭请求，请求中包含一个 WebSocket的随机密钥。
- 服务端接收到关闭请求后，向客户端发送关闭响应，关闭响应中包含服务端生成的随机密钥。
- 客户端收到关闭响应后，关闭 WebSocket 连接。
总的来说，WebSocket通过握手阶段、数据传输阶段和关闭阶段实现了服务器和客户端之间的实时双向通信。
二. WebSocket 数据帧结构和控制帧结构。
1. 数据帧结构
WebSocket 数据帧主要包括两个部分：帧头和有效载荷。以下是 WebSocket数据帧结构的简要介绍：
- 帧头：帧头包括四个部分：fin、rsv1、rsv2、rsv3、opcode、masked 和payload_length。其中，fin 表示数据帧的结束标志，rsv1、rsv2、rsv3表示保留字段，opcode 表示数据帧的类型，masked示是否进行掩码处理，payload_length 表示有效载荷的长度。
- 有效载荷：有效载荷是数据帧中实际的数据部分，它由客户端和服务端进行数据传输。
2. 控制帧结构
除了数据帧之外，WebSocket 协议还包括一些控制帧，主要包括 Ping、Pong和 Close 帧。以下是 WebSocket 控制帧结构的简要介绍：
- Ping 帧：Ping帧用于测试客户端和服务端之间的连接状态，客户端向服务端发送 Ping帧，服务端收到后需要向客户端发送 Pong 帧进行响应。
- Pong 帧：Pong 帧用于响应客户端的 Ping帧，它用于测试客户端和服务端之间的连接状态。
- Close 帧：Close帧用于关闭客户端和服务端之间的连接，它包括四个部分：fin、rsv1、rsv2、rsv3、opcode、masked和 payload_length。其中，opcode 的值为 8，表示 Close 帧。
三. JavaScript 中 WebSocket 对象的属性和方法，以及如何创建和连接 WebSocket。
1. WebSocket 对象的属性和方法：
WebSocket对象：WebSocket 对象表示一个新的 WebSocket连接。
WebSocket.onopen事件处理程序：当 WebSocket连接打开时触发。
WebSocket.onmessage事件处理程序：当接收到来自WebSocket 的消息时触发。
WebSocket.onerror事件处理程序：当 WebSocket发生错误时触发。
WebSocket.onclose事件处理程序：当 WebSocket连接关闭时触发。
WebSocket.send方法：向 WebSocket发送数据。
WebSocket.close方法：关闭 WebSocket 连接。
2. 创建和连接 WebSocket：
2.1. 创建 WebSocket 对象：
其中，
ws://example.com 是 WebSocket 的URL，表示要连接的服务器。2.2. 连接 WebSocket：
使用
WebSocket.onopen 事件处理程序检查 WebSocket是否成功连接。2.3. 接收来自 WebSocket 的消息：
使用
WebSocket.onmessage 事件处理程序接收来自 WebSocket的消息。2.4. 向 WebSocket 发送消息：
使用
WebSocket.send 方法向 WebSocket 发送消息。2.5. 关闭 WebSocket：
当需要关闭 WebSocket 时，使用
WebSocket.close 方法。注意：在 WebSocket 连接成功打开和关闭时，会分别触发
WebSocket.onopen 和 WebSocket.onclose事件。在接收到来自 WebSocket 的消息时，会触发WebSocket.onmessage 事件。当 WebSocket 发生错误时，会触发WebSocket.onerror 事件。四. webSocket 简单示例
以下是一个简单的 WebSocket 编程示例，通过 WebSocket向服务器发送数据，并接收服务器返回的数据：
首先，创建一个 HTML文件，添加一个按钮和一个用于显示消息的文本框：
接下来，创建一个 JavaScript 文件（例如main.js），并在其中编写以下代码：
五. webSocket 应用场景
- 实时通信：WebSocket非常适合实时通信场景，例如聊天室、在线游戏、实时数据传输等。通过WebSocket，客户端和服务器之间可以实时通信，无需依赖轮询，从而提高通信效率和减少网络延迟。
- 监控数据传输：WebSocket可以在监控系统中实现实时数据传输，例如通过WebSocket，客户端可以实时接收和处理监控数据，而无需等待轮询数据。
- 自动化控制：WebSocket 可以在自动化系统中实现远程控制，例如通过WebSocket，客户端可以远程控制设备或系统，而无需直接操作。
- 数据分析：WebSocket可以在数据分析场景中实现实时数据传输和处理，例如通过WebSocket，客户端可以实时接收和处理数据，而无需等待数据存储和分析。
- 人工智能：WebSocket可以在人工智能场景中实现实时数据传输和处理，例如通过WebSocket，客户端可以实时接收和处理数据，而无需等待数据处理和分析。
六. WebSocket 错误处理
WebSocket 的错误处理
WebSocket is not supported：当浏览器不支持 WebSocket时，会出现此错误。解决方法是在浏览器兼容性列表中检查是否支持WebSocket。
WebSocket connection closed：当 WebSocket连接被关闭时，会出现此错误。解决方法是在WebSocket.onclose事件处理程序中进行错误处理。
WebSocket error：当 WebSocket发生错误时，会出现此错误。解决方法是在WebSocket.onerror事件处理程序中进行错误处理。
WebSocket timeout：当 WebSocket连接超时时，会出现此错误。解决方法是在WebSocket.ontimeout事件处理程序中进行错误处理。
WebSocket handshake error：当 WebSocket握手失败时，会出现此错误。解决方法是在WebSocket.onerror事件处理程序中进行错误处理。
WebSocket closed by server：当 WebSocket连接被服务器关闭时，会出现此错误。解决方法是在WebSocket.onclose事件处理程序中进行错误处理。
WebSocket closed by protocol：当 WebSocket连接被协议错误关闭时，会出现此错误。解决方法是在WebSocket.onclose事件处理程序中进行错误处理。
WebSocket closed by network：当 WebSocket连接被网络错误关闭时，会出现此错误。解决方法是在WebSocket.onclose事件处理程序中进行错误处理。
WebSocket closed by server：当 WebSocket连接被服务器错误关闭时，会出现此错误。解决方法是在WebSocket.onclose事件处理程序中进行错误处理。
通过为
WebSocket 对象的onclose、onerror 和 ontimeout事件添加处理程序，可以及时捕获和处理 WebSocket错误，从而确保程序的稳定性和可靠性。七. 利用单例模式创建完整的 wesocket 连接
原文地址
- 作者:Orcatt
- 链接:https://orcatt.one/article/9f991e1e-6309-453e-8628-64d301a8e52f
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。