Node.js 中的 WebSockets 简单使用

发布于 2022-08-01 12:32:38 字数 4016 浏览 300 评论 0

WebSockets 是一种用于浏览器客户端和服务器之间双向通信的工具。特别是，WebSockets 使服务器能够将数据推送到客户端。这与您使用的标准 HTTP 请求不同 fetch() 或 axios ，因为除非客户端先发送请求，否则服务器无法与客户端通信。

WebSocket 更灵活，但也更难实现和扩展。 WebSockets 给开发人员带来了更多的负担，因此请谨慎使用它们，并且仅在您绝对需要它们时使用。在本文中，您将学习如何使用 WebSockets 构建一个简单的实时聊天应用程序。

WebSocket 服务器

这 wsnpm 包是 Node.js 的事实上的 WebSocket 库。您也可以使用 Socket.IO ，但 Socket.IO 是 WebSockets 之上的更高级别的框架，而不是 WebSocket 协议。

下面是一个 WebSocket 服务器的基本示例，它跟踪所有打开的套接字并将入站消息发送到所有打开的套接字。你可以把它想象成一个简单的聊天服务器：当一个人发送消息时，服务器会将消息广播给所有收听的人。

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

let sockets = [];
server.on('connection', function(socket) {
  sockets.push(socket);

  // When you receive a message, send that message to every socket.
  socket.on('message', function(msg) {
    sockets.forEach(s => s.send(msg));
  });

  // When a socket closes, or disconnects, remove it from the array.
  socket.on('close', function() {
    sockets = sockets.filter(s => s !== socket);
  });
});

Node.js 中的 WebSocket 客户端

WebSocket 连接有两个组件，一个客户端和一个服务器。在上面的示例中，您创建了一个服务器。客户端发起请求以打开 WebSocket 连接，服务器响应入站请求以打开 WebSocket 连接。

您还可以使用在 Node.js 中创建 WebSocket 客户端 ws，这非常适合测试您的 WebSocket 逻辑，尽管您也可以使用 WebSockets 在后端服务之间进行通信。下面是一个与上述服务器对话的 WebSocket 客户端示例。

let clients = [
  new WebSocket('ws://localhost:8080'),
  new WebSocket('ws://localhost:8080')
];

clients.map(client => {
  client.on('message', msg => console.log(msg));
});

// Wait for the client to connect using async/await
await new Promise(resolve => clients[0].once('open', resolve));

// Prints "Hello!" twice, once for each client.
clients[0].send('Hello!');

浏览器中的 WebSocket 客户端

大多数现代浏览器都支持开箱即用的 WebSocket 。换句话说，您可以使用 WebSocket 浏览器中的类 without without without ws 或转译器，除非您想支持 Internet Explorer 9 或 Opera Mini。下面是来自的 caniuse.com WebSockets 部分。

以下是连接到上述服务器的聊天页面示例：

<html>
  <head>
    <script type="text/javascript">
      const ws = new WebSocket('ws://localhost:8080');

      // Browser WebSockets have slightly different syntax than `ws`.
      // Instead of EventEmitter syntax `on('open')`, you assign a callback
      // to the `onopen` property.
      ws.onopen = function() {
        document.querySelector('#send').disabled = false;

        document.querySelector('#send').addEventListener('click', function() {
          ws.send(document.querySelector('#message').value);
        });
      };

      ws.onmessage = function(msg) {
        document.querySelector('#messages').innerHTML += `<div>${msg.data}</div>`;
      };
    </script>
  </head>
  <body>
    <h1>Chat</h1>
    <div>
      <input placeholder="Message">
      <button disabled="true">Send</button>
    </div>
    <div>
    </div>
  </body>
</html>

语法略有不同等待连接和从服务器接收消息的。代替 on('message', messageHandler)，你应该写 onmessage = messageHandler。

分享到QQ

分享到微博