通过构建简单的聊天应用程序学习 WebSockets

WebSocket API 是一种在客户端（用户浏览器）和服务器之间进行通信的方式。在会话期间，数据可以实时双向传输，这意味着客户端可以向服务器发送消息，服务器无需轮询即可响应。通过开放的通道进行通信持久且延迟低。

WebSockets 完美用例：

聊天应用
追踪应用程序
现场观众互动
IoT 设备更新

构建应用程序

为了更好地理解 WebSockets 的功能，让我们构建一个简单的聊天应用程序，用户可以在其中实时发送和接收消息。

对于该应用程序，我们需要：

使用 Node.js 的 WebSocket 库设置 Node.js 服务器ws
使用 WebSocket 实例创建客户端（HTML 和 client.js）来监听来自服务器的消息

设置服务器

从您的终端初始化项目：

npm i -Y && npm i ws && touch server.js

该命令将设置项目、安装ws库并创建server.js文件。

从编辑器打开server.js文件并初始化服务器：

const WebSocket = require('ws');

// starts server instance on http://localhost:8080
const wss = new WebSocket.Server({ port: 8080 });

// waits for connection to be established from the client
// the callback argument ws is a unique for each client
wss.on('connection', (ws) => {

  // runs a callback on message event
  ws.on('message', (data) => {

    // sends the data to all connected clients
    wss.clients.forEach((client) => {
        if (client.readyState === WebSocket.OPEN) {
          client.send(data);
        }
    });
  });
});

设置客户端

创建一个简单的 HTML 文件，其中包含用于输入消息的输入框和用于发送消息的按钮。这些文件的创建位置不限，也可以在其他目录中，只要它们放在一起即可。

<!DOCTYPE html>
<html>

<body>
    <div id="chat"></div>
    <input id="name" type="text" placeholder="name" />
    <input id="message" type="text" placeholder="message" />
    <button id="send">Send</button>

    <script src="client.js"></script>
</body>

</html>

对于client.js文件，我们将通过指定监听连接来创建 WebSocket API 实例localhost:8080。

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

是一个 WebSocket实例connection，它包含一系列事件属性。在本例中，我们不会用到所有属性，但会使用最重要的一些属性来通知客户端并向服务器发送消息：

WebSocket.onopen- 当连接打开时调用
WebSocket.onclose- 当连接关闭时调用
WebSocket.onerror- 发生错误时调用
WebSocket.onmessage- 从服务器收到消息时调用

完整的client.js文件如下所示：

const connection = new WebSocket("ws://localhost:8080");
const button = document.querySelector("#send");

connection.onopen = (event) => {
    console.log("WebSocket is open now.");
};

connection.onclose = (event) => {
    console.log("WebSocket is closed now.");
};

connection.onerror = (event) => {
    console.error("WebSocket error observed:", event);
};

connection.onmessage = (event) => {
  // append received message from the server to the DOM element 
  const chat = document.querySelector("#chat");
  chat.innerHTML += event.data;
};

button.addEventListener("click", () => {
  const name = document.querySelector("#name");
  const message = document.querySelector("#message");
  const data = `<p>${name.value}: ${message.value}</p>`;

  // Send composed message to the server
  connection.send(data);

  // clear input fields
  name.value = "";
  message.value = "";
});

运行应用程序

node server.js在项目目录中的终端运行命令，index.html在不同的浏览器选项卡中打开文件两次，然后尝试发送消息。两个客户端实例都应该实时通过服务器接收消息。
本教程到此结束，希望您能够更好地理解如何在下一个精彩项目中使用 WebSocket。

文章来源：https://dev.to/spukas/learn-websockets-by-building-simple-chat-app-dee