webSocket使用详情

WebSocket是一种在Web浏览器和服务器之间进行双向通信的协议。它允许在一个持久化的TCP连接上进行实时的、双向通信。WebSocket协议是HTML5中的一项新技术，它可以用于替代传统的轮询和长轮询方法。本文将详细介绍WebSocket的使用方法，并提供代码示例。

WebSocket的基本用法

创建WebSocket对象
要使用WebSocket，需要创建一个WebSocket对象。可以通过调用WebSocket构造函数来创建一个WebSocket对象。构造函数接受一个URL作为参数，该URL指向要连接的WebSocket服务器。以下是一个创建WebSocket对象的示例：

const socket = new WebSocket("ws://localhost:8080");

在这个例子中，我们创建了一个名为socket的WebSocket对象，并将其连接到ws://localhost:8080。

WebSocket事件

WebSocket对象提供了几个事件来处理WebSocket连接的不同阶段和状态。以下是一些常用的WebSocket事件：

• open：当WebSocket连接成功打开时触发。
• message：当收到来自WebSocket服务器的消息时触发。
• error：当WebSocket连接发生错误时触发。
• close：当WebSocket连接关闭时触发。

可以通过将回调函数分配给这些事件来处理WebSocket的不同状态。以下是一个处理WebSocket事件的示例：

const socket = new WebSocket("ws://localhost:8080");

socket.addEventListener("open", () => {
  console.log("WebSocket连接已打开");
});

socket.addEventListener("message", (event) => {
  console.log("收到消息：", event.data);
});

socket.addEventListener("error", () => {
  console.error("WebSocket连接发生错误");
});

socket.addEventListener("close", () => {
  console.log("WebSocket连接已关闭");
});

在这个例子中，我们使用addEventListener方法将回调函数分配给open、message、error和close事件。

发送消息

要向WebSocket服务器发送消息，可以使用WebSocket对象的send方法。该方法接受一个字符串参数，该字符串将作为消息发送到服务器。以下是一个发送消息的示例：

const socket = new WebSocket("ws://localhost:8080");

socket.addEventListener("open", () => {
  console.log("WebSocket连接已打开");
  socket.send("Hello, server!");
});

socket.addEventListener("message", (event) => {
  console.log("收到消息：", event.data);
});

在这个例子中，我们在WebSocket连接打开时使用send方法向服务器发送了一条消息。

关闭连接

要关闭WebSocket连接，可以使用WebSocket对象的close方法。可以向该方法传递一个可选的状态码和原因字符串。以下是一个关闭WebSocket连接的示例：

const socket = new WebSocket("ws://localhost:8080");

socket.addEventListener("open", () => {
  console.log("WebSocket连接已打开");
});

socket.addEventListener("message", (event) => {
  console.log("收到消息：", event.data);
  socket.close();
});

socket.addEventListener("close", () => {
  console.log("WebSocket连接已关闭");
});

在这个例子中，我们在收到一条消息后使用close方法关闭WebSocket连接。

WebSocket的高级用法

使用WebSocket协议扩展
WebSocket协议支持使用WebSocket扩展来增强WebSocket的功能。这些扩展可以在握手期间进行协商，以便客户端和服务器使用相同的扩展。以下是一个使用WebSocket协议扩展的示例：

const socket = new WebSocket("ws://localhost:8080", "chat");

socket.addEventListener("open", () => {
  console.log("WebSocket连接已打开");
});

socket.addEventListener("message", (event) => {
  console.log("收到消息：", event.data);
});

socket.addEventListener("close", () => {
  console.log("WebSocket连接已关闭");
});

在这个例子中，我们在创建WebSocket对象时将chat作为第二个参数传递给构造函数。这表示我们希望使用WebSocket协议中的chat扩展。

使用WebSocket子协议

WebSocket协议还支持使用子协议来增强WebSocket的功能。子协议是在握手期间协商的，并且在连接期间保持不变。以下是一个使用WebSocket子协议的示例：

const socket = new WebSocket("ws://localhost:8080", "chat");

socket.addEventListener("open", () => {
  console.log("WebSocket连接已打开");
});

socket.addEventListener("message", (event) => {
  console.log("收到消息：", event.data);
});

socket.addEventListener("close", () => {
  console.log("WebSocket连接已关闭");
});

在这个例子中，我们在创建WebSocket对象时将chat作为第二个参数传递给构造函数。这表示我们希望使用名为chat的子协议。

使用WebSocket二进制数据

WebSocket协议支持发送和接收二进制数据。要发送二进制数据，可以使用WebSocket.send方法并传递一个ArrayBuffer或Blob对象。要接收二进制数据，可以使用WebSocket对象的binaryType属性。以下是一个使用WebSocket二进制数据的示例：

const socket = new WebSocket("ws://localhost:8080");

socket.binaryType = "arraybuffer";

socket.addEventListener("open", () => {
  console.log("WebSocket连接已打开");
  const buffer = new ArrayBuffer(8);
  const view = new DataView(buffer);
  view.setInt16(0, 42);
  view.setInt16(2, 1337);
  socket.send(buffer);
});

socket.addEventListener("message", (event) => {
  console.log("收到消息：", new DataView(event.data));
});

socket.addEventListener("close", () => {
  console.log("WebSocket连接已关闭");
});

在这个例子中，我们将binaryType属性设置为"arraybuffer"，以便接收ArrayBuffer对象。我们还使用ArrayBuffer构造函数创建一个包含8个字节的缓冲区，并使用DataView对象来设置缓冲区中的值。最后，我们使用WebSocket.send方法将缓冲区发送到服务器。

使用WebSocket心跳包

WebSocket连接可能会由于网络问题或服务器问题而断开。为了检测连接是否断开，可以使用WebSocket心跳包。心跳包是定期发送到服务器的小消息。如果服务器在一段时间内没有收到心跳包，它将假定连接已断开，并关闭连接。以下是一个使用WebSocket心跳包的示例：

const socket = new WebSocket("ws://localhost:8080");

function sendHeartbeat() {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send("heartbeat");
  }
}

socket.addEventListener("open", () => {
  console.log("WebSocket连接已打开");
  setInterval(sendHeartbeat, 5000);
});

socket.addEventListener("message", (event) => {
  console.log("收到消息：", event.data);
});

socket.addEventListener("close", () => {
  console.log("WebSocket连接已关闭");
});

在这个例子中，我们定义了一个名为sendHeartbeat的函数，该函数将在WebSocket连接打开后每隔5秒钟发送一条心跳包。我们还在open事件处理程序中使用setInterval方法来调用sendHeartbeat函数。

WebSocket服务器端的实现

WebSocket服务器是一个Web服务器，它可以使用WebSocket协议与客户端进行通信。以下是一个使用Node.js实现WebSocket服务器的示例：

import WebSocket from "ws";

const server = new WebSocket.Server({ port: 8080 });

server.on("connection", (socket) => {
  console.log("WebSocket连接已打开");

  socket.send("Welcome to the server!");

  socket.on("message", (message) => {
    console.log("收到消息：", message);
    socket.send(`Echo: ${message}`);
  });

  socket.on("close", () => {
    console.log("WebSocket连接已关闭");
  });
});

在这个例子中，我们使用Node.js的ws库创建了一个WebSocket服务器。我们使用Server构造函数创建一个名为server的WebSocket服务器，并将其绑定到8080端口。在connection事件处理程序中，我们处理新的WebSocket连接。我们使用send方法向客户端发送欢迎消息，并使用on(“message”)方法来处理客户端发送的消息