什么是WebSocket？

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

WebSocket 具有以下特点：

  1. 全双工通信：WebSocket 允许客户端和服务器在连接建立后双向传输数据，不像传统的 HTTP 请求-响应模式那样需要等待服务器的响应。

  2. 持久连接：一旦建立 WebSocket 连接，它将保持打开状态，允许在连接的生命周期内随时传输数据，避免了频繁地建立和关闭连接的开销。

  3. 低延迟：WebSocket 的连接一旦建立，数据可以实时传输，无需等待额外的握手和请求。

  4. 双方通知：服务器可以主动向客户端发送数据，而不需要客户端首先请求。这对于实时更新和通知非常有用。

  5. 减少网络流量：WebSocket 通过在连接保持打开的情况下传输数据，可以减少 HTTP 请求的开销，从而减少网络流量。

什么场景可以用WebSocket

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

  1. 实时聊天应用：WebSocket 可以使聊天应用实现实时消息传递，从而用户可以即时收到新消息，无需手动刷新页面。

  2. 实时协作工具：协作工具可以使用 WebSocket 实现多用户同时编辑文档，实时更新内容。

  3. 在线游戏：多人在线游戏通常需要实时的玩家间通信，WebSocket 可以提供低延迟的双向通信，使游戏状态和动作可以及时传递。

  4. 实时更新：当应用需要实时更新数据，如股票市场价格、新闻、天气等，WebSocket 可以将更新直接推送给客户端，而不需要客户端不断地轮询服务器。

  5. 通知和提醒：应用可以使用 WebSocket 发送实时通知和提醒，如社交媒体的新消息提醒。

  6. 在线交互式应用：需要实时反馈和即时用户输入响应的应用，如实时投票应用、即时问答平台等。

  7. 数据监控和控制：监控系统和远程控制系统需要实时更新数据和状态，WebSocket 可以满足这些需求。

WebSocket工作原理

  1. 握手阶段：

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

  2. 建立连接：

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

  3. 数据传输：

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

  4. 关闭连接：

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

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

前端如何使用WebSocket

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

  1. 创建 WebSocket 连接： 使用 new WebSocket(url) 来创建一个 WebSocket 连接。url 参数是 WebSocket 服务器的地址。

    const socket = new WebSocket('ws://your-websocket-server.com');


  2. 监听事件： 一旦连接建立，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 事件：在连接关闭时触发。

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

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

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

    // 关闭连接socket.close();

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

常用的请求头与响应头

WebSocket 握手请求头字段：

  1. Upgrade：标识请求将升级为 WebSocket 连接。
  2. Connection：标识请求将保持连接，值为 Upgrade。
  3. Sec-WebSocket-Key：包含一个基于随机数的密钥，用于计算握手响应的 Sec-WebSocket-Accept 值。
  4. Sec-WebSocket-Version：指定支持的 WebSocket 协议版本，如 13。
  5. Sec-WebSocket-Extensions：指定支持的扩展，如压缩等。
  6. Sec-WebSocket-Protocol：指定客户端请求的子协议，用于多个子协议的支持。

WebSocket 握手响应头字段：

  1. Upgrade：标识响应将升级为 WebSocket 连接。
  2. Connection：标识响应将保持连接，值为 Upgrade。
  3. Sec-WebSocket-Accept：包含基于客户端的 Sec-WebSocket-Key 计算的响应密钥。
  4. Sec-WebSocket-Extensions：指定服务器支持的扩展。
  5. Sec-WebSocket-Protocol：指定实际使用的子协议。

状态码

在 WebSocket 协议中，有一组标准的状态码用于表示连接和关闭的状态。这些状态码通过数字表示，每个状态码都有特定的含义。以下是一些常见的 WebSocket 状态码：

  1. 连接状态码：

    • 1000：正常关闭。表示连接已经完成关闭。
    • 1001：终端关闭。表示终端或用户主动关闭连接。
    • 1006：无法连接。表示连接由于某种原因无法建立。

  2. 保留状态码：

    • 1002：协议错误。表示服务器收到了一个无效的帧或违反了协议规定。
    • 1003：数据类型错误。表示服务器无法接受客户端发送的数据类型。
    • 1004：保留。此状态码当前未使用。
    • 1005：保留。此状态码当前未使用。

  3. 错误状态码：

    • 1007：数据错误。表示服务器在接收到数据时遇到数据格式错误或不一致。
    • 1008：消息过大。表示接收到的消息太大，服务器无法处理。
    • 1009：数据过大。表示服务器在处理消息时接收到过大的数据。
    • 1010：扩展错误。表示客户端在扩展握手中出现错误。
    • 1011：服务错误。表示服务器由于遇到不可恢复的错误而关闭连接。

  4. 保留状态码：

    • 1012：保留。此状态码当前未使用。
    • 1013：保留。此状态码当前未使用。

  5. 应用程序状态码：

    • 3000-3999：这个范围的状态码是供应用程序自定义使用的，用于特定的应用需求。