单页应用（SPA）的兴起为前端开发带来了新的机遇和挑战。其中一个挑战就是如何实现实时交互的应用，比如聊天室。本文将详细介绍在 SPA 中开发聊天室的实现方法，并包含示例代码。
实现思路
聊天室的实现可以分为客户端和服务器两部分。客户端负责显示聊天信息和发送消息，服务器负责接收和转发客户端的消息。在 SPA 中，我们可以使用 WebSockets 技术来实现实时交互的功能。
具体而言，我们可以在客户端使用 WebSocket API 来建立与服务器的连接，然后利用 WebSocket 对象的 send 方法发送消息，利用 onmessage 方法接收消息。在服务器端，我们可以使用 Node.js 和 ws 模块来实现 WebSocket 服务器，将客户端发送的消息广播给所有连接的客户端。
客户端实现
建立 WebSocket 连接
const socket = new WebSocket('ws://localhost:3000');在客户端代码中，我们使用 WebSocket 对象的构造函数来建立 WebSocket 连接。其中，ws:// 表示使用 WebSocket 协议，localhost:3000 表示连接的服务器地址。
发送消息
const sendMessage = () => {
const input = document.getElementById('input');
const message = input.value;
input.value = '';
socket.send(message);
};客户端需要向服务器发送消息，我们可以定义一个函数，当用户在输入框中输入消息并点击发送按钮时调用该函数。在函数中，首先获取输入框中的文本内容，然后使用 WebSocket 对象的 send 方法将消息发送给服务器。
接收消息
socket.onmessage = (event) => {
const message = event.data;
const messagesDiv = document.getElementById('messages');
const messageDiv = document.createElement('div');
messageDiv.textContent = message;
messagesDiv.appendChild(messageDiv);
};客户端接收来自服务器的消息，我们可以使用 WebSocket 对象的 onmessage 方法，在收到消息时调用该方法。在方法中，我们可以将消息添加到聊天对话框中，以供用户查看。
服务器端实现
建立 WebSocket 服务器
-- -------------------- ---- -------
----- --------------- - ---------------------
----- --- - --- ----------------- ----- ---- ---
-------------------- ---- -- -
---------------- --------- -- -
---------------------------- -- -
-- ------------------ --- --------------- -
---------------------
-
---
---
---和客户端不同，服务器端需要使用第三方模块 ws 来实现 WebSocket 服务器。在代码中，我们首先使用 WebSocketServer 对象的构造函数来创建 WebSocket 服务器，并指定监听的端口号。随后，我们使用 WebSocket 对象的 on 方法来监听连接事件，在客户端连接到服务器时执行回调函数。
接收和转发消息
ws.on('message', (message) => {
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});当客户端发送消息时，我们可以在回调函数中接收到消息，并使用 wss.clients 属性来获取所有连接的客户端。对于每个连接的客户端，我们判断其状态为 OPEN（即已连接），然后使用 WebSocket 对象的 send 方法将消息转发给客户端。
完整示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------
-------
------
---- --------------------
-----
------ ---------- ------------
------- -----------------------------------
------
--------
----- ------ - --- ---------------------------------
----- ----------- - -- -- -
----- ----- - ---------------------------------
----- ------- - ------------
----------- - ---
---------------------
--
---------------- - ------- -- -
----- ------- - -----------
----- ----------- - ------------------------------------
----- ---------- - ------------------------------
---------------------- - --------
------------------------------------
--
---------
-------
--------- -------------------- ---- -------
-- -----
----- --------------- - ---------------------
----- --- - --- ----------------- ----- ---- ---
-------------------- ---- -- -
---------------- --------- -- -
---------------------------- -- -
-- ------------------ --- --------------- -
---------------------
-
---
---
---总结
本文介绍了在 SPA 中开发聊天室的方法。我们使用 WebSocket 技术来实现实时交互的功能，客户端和服务器各自实现了建立连接、发送消息和接收消息三个步骤。通过阅读本文，我们不仅了解了 WebSocket 的运作原理，还掌握了如何使用第三方模块 ws 在 Node.js 中实现 WebSocket 服务器的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64867fa848841e989450e4ea