WebSocket 的 API

WebSocket API 是 HTML5 中用于实现浏览器与服务器之间全双工通信的一套接口：

WebSocket 构造函数

• var socket = new WebSocket('ws://example.com/socket');
• 用于创建一个 WebSocket 实例，连接到指定的 WebSocket 服务器地址。其中 ws:// 是 WebSocket 的协议前缀，类似于 HTTP 的 http://。如果是加密的 WebSocket 连接，则使用 wss://。

WebSocket 事件

open 事件

• 当 WebSocket 连接成功建立时触发。
• 示例：

  socket.addEventListener('open', function (event) {
       
  console.log('WebSocket connection established.');
  });
  

message 事件

• 当服务器向客户端发送消息时触发，通过 event.data 获取服务器发送的数据。
• 示例：

  socket.addEventListener('message', function (event) {
       
  console.log('Received message:', event.data);
  });
  

close 事件

• 当 WebSocket 连接关闭时触发，可通过 event.code 和 event.reason 获取关闭的状态码和原因。
• 示例：

  socket.addEventListener('close', function (event) {
       
  console.log('WebSocket connection closed:', event.code, event.reason);
  });
  

error 事件

• 当 WebSocket 连接发生错误时触发，可通过 event.error 获取错误对象。
• 示例：

  socket.addEventListener('error', function (event) {
       
  console.log('WebSocket error:', event.error);
  });
  

WebSocket 方法

send()

• 用于向服务器发送数据，数据可以是字符串、ArrayBuffer、Blob 等类型。
• 示例：

  socket.send('Hello, Server!');
  var buffer = new ArrayBuffer(10);
  socket.send(buffer);
  

close()

• 用于关闭 WebSocket 连接，可传入可选的状态码和关闭原因。
• 示例：

  socket.close(1000, 'Normal closure');
  

WebSocket 属性

readyState

• 表示 WebSocket 连接的当前状态，有以下几种取值：
  • WebSocket.CONNECTING (0)：连接正在建立。
  • WebSocket.OPEN (1)：连接已建立，可以进行通信。
  • WebSocket.CLOSING (2)：连接正在关闭。
  • WebSocket.CLOSE (3)：连接已关闭。
• 示例：

  console.log('WebSocket state:', socket.readyState);
  

bufferedAmount

• 表示已发送但尚未从网络中传输完成的数据量，以字节为单位。可用于控制发送数据的频率，避免发送过快导致网络拥塞。
• 示例：

  if (socket.bufferedAmount === 0) {
       
  socket.send('Another message.');
  }
  

通过使用 WebSocket API，开发者可以轻松地在浏览器中实现与服务器的实时双向通信，为各种实时性要求高的 Web 应用，如在线游戏、实时聊天、股票行情推送等提供了强大的技术支持，极大地提升了 Web 应用的交互性和用户体验。