Socket.io 是一个基于 Node.js 的实时应用程序框架，可以轻松地将实时功能添加到 Web 应用程序中。它提供了一个简单的 API，可以轻松地在客户端和服务器之间建立双向通信。在本文中，我们将使用 Socket.io 实现实时聊天功能。
前提条件
在开始之前，我们需要确保已经安装了 Node.js 和 npm。您可以从官方网站下载并安装它们。
创建一个新的 Node.js 应用程序
首先，我们需要创建一个新的 Node.js 应用程序。打开终端并输入以下命令：
mkdir chat-app cd chat-app npm init -y
这将创建一个名为 chat-app 的新目录，并使用默认设置初始化一个新的 Node.js 应用程序。
安装 Socket.io
接下来，我们需要安装 Socket.io。在终端中输入以下命令：
npm install socket.io
这将安装 Socket.io 并将其添加到我们的项目中。
创建服务器
现在我们将创建一个服务器，该服务器将使用 Socket.io 与客户端通信。在 chat-app 目录中创建一个名为 server.js 的新文件，并添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ---- - ---------------------------- ----- -- - --------------------------- ------------ ----- ---- -- - ---------------------- - --------------- --- ------------------- -------- -- - -------------- ---- ------------ --- ----------------- -- -- - ---------------------- -- --------- ---
这会创建一个 Express 应用程序并将其与 Socket.io 集成。我们使用 app.get() 方法来指定我们的默认路由，并使用 res.sendFile() 方法来发送一个名为 index.html 的文件。这个文件将是我们的客户端代码。
我们使用 io.on() 方法来监听 connection 事件。当客户端连接到服务器时，这个事件将被触发。我们可以使用 socket 参数与客户端通信。
最后，我们使用 http.listen() 方法来启动服务器并监听端口 3000。
创建客户端
现在我们将创建客户端代码。在 chat-app 目录中创建一个名为 index.html 的新文件，并添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------------
-------
------
------------ ---------
---- --------------------
----- ---------------
------ ----------- ------------------ --
------- ---------------------------
-------
------- ---------------------------------------
--------
----- ------ - -----
---------
-------
-------这个文件包含一个简单的 HTML 表单，用于输入和发送消息。我们使用 socket.io.js 文件来建立与服务器的连接。
实现聊天功能
现在我们已经设置了服务器和客户端代码，我们可以开始实现聊天功能了。
首先，让我们监听表单的提交事件，并在用户发送消息时将其发送到服务器。在 index.html 文件中添加以下代码：
-- -------------------- ---- ------- ----- -------- - ------------------------------------- ----- ------------ - ----------------------------------------- ----- -------- - ------------------------------------ ----------------------------------- ------- -- - ----------------------- ----- ------- - ------------------- ----------------- --------- --------- ------------------ - --- ---
我们使用 document.getElementById() 方法获取表单元素和输入元素，并使用 addEventListener() 方法来监听表单的提交事件。当表单提交时，我们使用 event.preventDefault() 方法阻止默认行为，并将用户输入的消息发送到服务器。
接下来，让我们监听来自服务器的消息，并将其显示在页面上。在 index.html 文件中添加以下代码：
socket.on('chat message', (message) => {
const li = document.createElement('li');
li.innerText = message;
messages.appendChild(li);
});我们使用 socket.on() 方法来监听来自服务器的 chat message 事件。当服务器发送消息时，这个事件将被触发。我们创建一个新的 li 元素，并将服务器发送的消息添加到它的文本内容中。最后，我们将 li 元素添加到 messages 容器中。
现在，我们已经完成了聊天功能的实现。
运行应用程序
现在，我们可以运行应用程序并测试它是否正常工作。在终端中输入以下命令：
node server.js
这将启动服务器并监听端口 3000。
现在，在浏览器中打开 http://localhost:3000，您应该可以看到一个简单的聊天应用程序。在输入框中输入一些文本并点击发送按钮，您应该可以看到您的消息出现在页面中。
结论
在本文中，我们已经学习了如何使用 Socket.io 实现实时聊天功能。我们创建了一个简单的 Node.js 应用程序，并使用 Socket.io 将其与客户端集成。我们实现了聊天功能，并使用 Socket.io 在客户端和服务器之间建立了双向通信。我希望这篇文章对您有所帮助，并且您可以将所学到的知识应用到您自己的项目中。
完整代码：
-- -------------------- ---- -------
-- ---------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------------------
----- -- - ---------------------------
------------ ----- ---- -- -
---------------------- - ---------------
---
------------------- -------- -- -
-------------- ---- ------------
--------------- --------- --------- -- -
--------------------- - - ---------
------------- --------- ---------
---
----------------------- -- -- -
----------------- ---------------
---
---
----------------- -- -- -
---------------------- -- ---------
----- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
--------------- ------------
-------
------
------------ ---------
---- --------------------
----- ---------------
------ ----------- ------------------ --
------- ---------------------------
-------
------- ---------------------------------------
--------
----- ------ - -----
----- -------- - -------------------------------------
----- ------------ - -----------------------------------------
----- -------- - ------------------------------------
----------------------------------- ------- -- -
-----------------------
----- ------- - -------------------
----------------- --------- ---------
------------------ - ---
---
--------------- --------- --------- -- -
----- -- - -----------------------------
------------ - --------
-------------------------
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6743e75ef3dd6530329c017d