多次响应接收套接字 - Javascript

在 Web 开发中，我们经常需要向服务器发送请求并等待响应。在某些情况下，我们可能需要等待服务器多次响应，这时就需要使用一个能够多次响应接收的套接字。

Javascript 的 WebSocket 对象正是一种能够多次响应接收的套接字。它提供了一种双向通信的机制，可以在客户端和服务器之间进行实时通信。

基本使用

使用 WebSocket 对象，我们可以通过以下步骤来建立客户端和服务器之间的连接：

1. 创建一个 WebSocket 对象，并指定需要连接的服务器地址：

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

   在该代码中，我们创建了一个 WebSocket 对象并连接到了 localhost 的 8080 端口。

2. 监听 open 事件以确认连接已经建立成功：

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

   在该代码中，我们通过 addEventListener 方法监听了 WebSocket 对象的 open 事件，当连接建立成功后，console.log 方法会输出一条消息。

3. 向服务器发送消息：

   ws.send('Hello, server!');
   

   在该代码中，我们通过 send 方法向服务器发送了一条消息。

4. 监听 message 事件以接收服务器返回的消息：

   ws.addEventListener('message', event => {
     console.log(`服务器返回消息：${event.data}`);
   });
   

   在该代码中，我们通过 addEventListener 方法监听了 WebSocket 对象的 message 事件，当服务器返回消息后，console.log 方法会输出一条消息。

多次响应接收

WebSocket 对象可以进行多次响应接收，我们只需要在监听 message 事件时处理好多次响应即可。例如，在以下代码中，我们定义了一个 WebSocket 对象并监听了 message 事件，当服务器返回的消息包含 REPEAT: 前缀时，我们会将消息原样返回给服务器：

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

ws.addEventListener('message', event => {
  const message = event.data;
  if (message.startsWith('REPEAT:')) {
    const reply = message.substring('REPEAT:'.length);
    ws.send(reply);
  }
});

在该代码中，当服务器返回 REPEAT:foo 时，客户端会返回 foo 给服务器。

参考文献

• MDN Web Docs: WebSocket