JS 连接到 WebSocket - Javascript

WebSocket 是一种基于 TCP 的协议，它允许在两个端点之间进行全双工通信。在 JavaScript 中，我们可以使用 WebSocket API 来与服务器进行实时通信。

前提条件

在连接 WebSocket 之前，我们需要确保服务器正在运行 WebSocket 服务器。在本文中，我们将使用 Node.js 和 ws 库来运行 WebSocket 服务器。你可以使用以下命令安装 ws 库：

npm install ws

建立 WebSocket 连接

在 JavaScript 中，我们可以使用 WebSocket 对象来建立与服务器的 WebSocket 连接。以下是建立 WebSocket 连接的示例代码：

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

在上面的代码中，我们创建了一个 WebSocket 对象，并将服务器的 WebSocket 地址传递给了它。请注意，我们在地址前面使用了 ws:// 而不是 http://。

监听 WebSocket 事件

建立 WebSocket 连接后，我们可以监听以下事件：

• open: 当与服务器建立连接后触发。
• message: 当从服务器接收到消息时触发。
• close: 当 WebSocket 连接关闭时触发。

以下是具体的代码示例：

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

// 当与服务器建立连接后触发
socket.addEventListener('open', () => {
  console.log('WebSocket 连接已建立');
});

// 当从服务器接收到消息时触发
socket.addEventListener('message', (event) => {
  console.log('从服务器接收到消息:', event.data);
});

// 当 WebSocket 连接关闭时触发
socket.addEventListener('close', () => {
  console.log('WebSocket 连接已关闭');
});

在上面的代码中，我们通过 addEventListener 方法添加了三个事件监听器，分别监听了 open、message 和 close 事件。在事件监听器中，我们可以执行一些逻辑来处理 WebSocket 事件。

发送消息到服务器

在建立 WebSocket 连接后，我们可以使用 send 方法向服务器发送消息。以下是发送消息的示例代码：

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

socket.addEventListener('open', () => {
  console.log('WebSocket 连接已建立');

  // 发送消息到服务器
  socket.send('Hello, server!');
});

在上面的代码中，我们在成功建立 WebSocket 连接后使用 send 方法向服务器发送了一条消息。

关闭 WebSocket 连接

在与服务器完成通信后，我们需要关闭 WebSocket 连接以释放资源和停止与服务器的通信。以下是关闭 WebSocket 连接的示例代码：

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

socket.addEventListener('open', () => {
  console.log('WebSocket 连接已建立');

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

在上面的代码中，我们在成功建立 WebSocket 连接后使用 close 方法关闭了连接。

总结

通过本文，我们了解了如何在 JavaScript 中建立 WebSocket 连接、监听 WebSocket 事件、发送消息到服务器以及关闭 WebSocket 连接。WebSocket 提供了一种实时通信的机制，它可以使我们的应用程序更加响应快速，并且减少服务器的开销。