你使用过websocket吗？

2023-10-10 494 阅读 0评论

什么是WebSocket？

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它的出现是为了解决 Web 应用中实时通信的需求。传统的 HTTP 协议是基于请求-响应模式的，即客户端发送请求，服务器响应请求，然后连接关闭。然而，有些场景需要保持长时间的连接，以实现实时性较高的数据交换，这就是 WebSocket 出现的背景。

WebSocket 具有以下特点：

全双工通信：WebSocket 允许客户端和服务器在连接建立后双向传输数据，不像传统的 HTTP 请求-响应模式那样需要等待服务器的响应。
持久连接：一旦建立 WebSocket 连接，它将保持打开状态，允许在连接的生命周期内随时传输数据，避免了频繁地建立和关闭连接的开销。
低延迟：WebSocket 的连接一旦建立，数据可以实时传输，无需等待额外的握手和请求。
双方通知：服务器可以主动向客户端发送数据，而不需要客户端首先请求。这对于实时更新和通知非常有用。
减少网络流量：WebSocket 通过在连接保持打开的情况下传输数据，可以减少 HTTP 请求的开销，从而减少网络流量。

什么场景可以用WebSocket

WebSocket 适用于需要实时、高效、双向通信的场景，特别是在 Web 应用中。以下是一些适合使用 WebSocket 的场景：

实时聊天应用：WebSocket 可以使聊天应用实现实时消息传递，从而用户可以即时收到新消息，无需手动刷新页面。
实时协作工具：协作工具可以使用 WebSocket 实现多用户同时编辑文档，实时更新内容。
在线游戏：多人在线游戏通常需要实时的玩家间通信，WebSocket 可以提供低延迟的双向通信，使游戏状态和动作可以及时传递。
实时更新：当应用需要实时更新数据，如股票市场价格、新闻、天气等，WebSocket 可以将更新直接推送给客户端，而不需要客户端不断地轮询服务器。
通知和提醒：应用可以使用 WebSocket 发送实时通知和提醒，如社交媒体的新消息提醒。
在线交互式应用：需要实时反馈和即时用户输入响应的应用，如实时投票应用、即时问答平台等。
数据监控和控制：监控系统和远程控制系统需要实时更新数据和状态，WebSocket 可以满足这些需求。

WebSocket工作原理

握手阶段：

客户端通过发送一个 HTTP 请求到服务器，包含了一些特殊的头部，如 Upgrade: websocket 和 Connection: Upgrade。
如果服务器支持 WebSocket，它会响应一个 HTTP 101 切换协议的状态码，并同样包含 Upgrade 和 Connection 头部。

建立连接：

一旦握手成功，HTTP 连接就会升级为 WebSocket 连接。
这意味着客户端和服务器之间的连接将保持开放状态，双方可以随时传输数据，而无需频繁地建立和关闭连接。

数据传输：

一旦连接建立，客户端和服务器可以在任何时候发送数据。
数据被分成一个个消息（message）进行传输。消息可以是文本或二进制数据。
由于是全双工通信，客户端和服务器可以同时发送和接收消息。

关闭连接：

任何一方都可以随时发起关闭连接的请求。
关闭连接的请求是通过发送一个特殊的关闭帧（frame）来实现的。
另一方接收到关闭帧后，也会发送一个关闭帧进行确认，并最终关闭连接。

WebSocket 的优势在于它相对于传统的轮询或长轮询技术来说更加高效。在传统的 HTTP 请求中，每次请求都会带有一定的开销，而 WebSocket 的连接是长期保持的，避免了不必要的开销，从而在实时通信场景下更具优势。

前端如何使用WebSocket

在前端使用 WebSocket 可以通过 JavaScript 中的 WebSocket 对象来建立和管理 WebSocket 连接。以下是一个基本的步骤示例：

创建 WebSocket 连接：使用 new WebSocket(url) 来创建一个 WebSocket 连接。url 参数是 WebSocket 服务器的地址。
```
const socket = new WebSocket('ws://your-websocket-server.com');
```

监听事件：一旦连接建立，WebSocket 对象会触发一系列事件，你可以监听这些事件来处理连接状态和数据。

socket.addEventListener('open', (event) => {  console.log('WebSocket connection opened.');});
socket.addEventListener('message', (event) => {  console.log('Received message:', event.data);});
socket.addEventListener('error', (event) => {  console.error('WebSocket error:', event);});
socket.addEventListener('close', (event) => {  console.log('WebSocket connection closed:', event);});

open 事件：连接成功建立时触发。
message 事件：当从服务器接收到消息时触发。
error 事件：在连接错误时触发。
close 事件：在连接关闭时触发。

发送和接收数据：使用 send(data) 方法将数据发送到服务器，并在接收到消息时可以在 message 事件的回调中处理数据。

// 发送数据socket.send('Hello, server!');
// 接收数据在 message 事件中处理socket.addEventListener('message', (event) => {  const receivedData = event.data;  console.log('Received data:', receivedData);});

关闭连接：使用 close(code, reason) 方法来关闭连接，其中 code 是可选的状态码，reason 是可选的关闭原因描述。
```
// 关闭连接socket.close();
```

以上就是在前端使用 WebSocket 的基本步骤。要使用 WebSocket，只需在适当的时机创建连接并监听事件，然后可以通过 send 方法发送数据。注意，WebSocket 连接通常在安全的 HTTPS 环境下工作，但也可以在开发环境中使用不安全的 HTTP。同时，WebSocket 服务器端也需要支持 WebSocket 协议。