在本文中，我们将会使用 Node.js 和 Socket.io 来实现一个简单的聊天应用。我们将会详细讲解如何建立服务器和客户端的连接，并且演示如何发送聊天信息。
环境和依赖
在开始之前，我们需要准备好以下环境和依赖：
- Node.js
- Socket.io
- Express
- 一个文本编辑器
下面，我们将会使用 Express 框架来搭建 HTTP 服务器，然后使用 Socket.io 可以让我们创建一个双向通信的 WebSocket 连接。
搭建服务器
首先，我们需要创建一个空的目录来存储我们的项目，并使用 npm 初始化一个新的 Node.js 项目：
mkdir chat-app cd chat-app npm init
接下来安装 Express 和 Socket.io：
npm install express socket.io
然后在项目目录下创建一个名为 index.js 的文件，并使用以下代码引入和配置 Express 和 Socket.io：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- -------- - --------------------- ----- --- - ---------- ----- ------ - ----------------------- ----- -- - ----------------- -------------------------------- - ------------ ------------------- -- -- - ------------------- -- ------- -- ---- ------- --- ------------------- -------- -- - ---------------- ---- ---------- --------------- ---
这个代码会启动一个 HTTP 服务器，并根据访问 http://localhost:3000 将静态文件 public 文件夹下的文件进行服务。
这里我们使用了 Socket.io 的 on() 方法监听 connection 事件，当有一个 WebSocket 连接时，会打印一条连接记录。
实现聊天功能
在连接建立后，我们可以通过 socket.on() 和 socket.emit() 方法来实现聊天功能。下面是一个例子，我们将监听客户端发送 message 事件，当有消息时会将该消息广播给所有客户端：
io.on('connection', (socket) => {
console.log(`New user connected: ${socket.id}`);
socket.on('message', (message) => {
console.log(`New message: ${message}`);
io.emit('message', message);
});
});在客户端实现时，我们需要使用 Socket.io 的 io() 方法来创建一个 WebSocket 连接，然后使用 socket.emit() 方法来发送消息。下面是一个简单的例子，当用户在浏览器中输入信息并点击发送时，会将消息发送到服务器：
-- -------------------- ---- -------
--------- -----
------
------
----------- -----------
-------
------
--- -------------------
------
------ ------------ ------------------ --
---------------------
-------
------- ---------------------------------------
--------
----- ------ - -----
----- ---- - -------------------------------
----- ----- - --------------------------------
----- -------- - ------------------------------------
------------------------------- ------- -- -
-----------------------
----- ------- - -------------------
-- --------- -
---------------------- ---------
----------- - ---
-
---
-------------------- --------- -- -
----- ---- - -----------------------------
---------------- - --------
---------------------------
---
---------
-------
-------我们在客户端使用 socket.on() 方法监听服务器发来的 message 事件，并将消息内容添加到 <ul> 元素中，作为聊天记录。
总结
在本文中，我们使用 Node.js 和 Socket.io 构建了一个简单的基于 WebSocket 的聊天应用。我们探讨了如何使用 Socket.io 创建 WebSocket 连接，在服务器和客户端之间传递信息，并在客户端显示聊天记录。
通过本文的学习，你可以了解 Node.js 和 Socket.io 提供的简单而强大的工具，用于建立实时通信的聊天应用。对于那些想要更深入地学习 WebSocket 通信和实时应用开发的人来说，Socket.io 是一个不错的起点。
预祝你打造出更加优秀的聊天应用！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66547955d3423812e490662c