介绍
WebSocket 是一种在 Web 浏览器和服务器之间进行全双工通信的网络协议，允许服务器向客户端推送消息。然而，与传统的 HTTP 请求/响应模型不同，WebSocket 需要一个专门的服务器端实现。
Socket.io 是一个基于 WebSocket 的库，提供了一个双向的实时通信信道，允许服务器向客户端推送消息，并在需要时允许客户端向服务器发送消息。它支持广泛的协议，包括常用的 HTTP、TCP 和 UDP 等。
在本文中，我们将学习如何使用 Socket.io 实现 WebSocket 的功能，并构建一个实时聊天应用程序。
准备工作
在开始之前，您需要安装 Node.js 和 npm。您还需要安装 Socket.io，可以使用以下命令完成：
npm install socket.io
创建应用程序
首先，我们需要创建一个基本的 Express 应用程序。如果您不熟悉如何创建一个 Express 应用程序，请先查看 Express 官方文档。使用以下命令初始化应用程序：
npm init npm install express --save
其中，--save 参数将 Express 添加到 package.json 的 dependencies 值中。创建一个名为 index.js 的文件，我们将在其中编写代码。
在服务器端使用 Socket.io
启用 Socket.io 非常简单，只需在服务器端将其绑定到服务器上，然后启动监听器即可。在 index.js 中添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------------------
----- -- - ---------------------------
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
----------------- ---------------
---
---
----------------- -- -- -
---------------------- -- ---------
---在这里，我们使用 io.on() 来监听新的连接，一旦有一个新的客户端连接成功，就会触发回调函数。在回调函数中，我们可以编写逻辑来处理客户端发送的消息，或向客户端推送消息。
接下来，我们可以在浏览器中访问 http://localhost:3000，并打开浏览器的控制台，查看连接的细节。您将看到“a user connected”消息在控制台中打印出来。
现在，我们已经完成了服务器的基本设置，接下来我们将编写一个简单的客户端代码并测试实时聊天的功能。
实现实时聊天
我们将添加一些客户端 JavaScript 代码，以便客户端能够接收并发送消息。在 HTML 页面中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ------------
------- ---------------------------------------
------- --------------------------------------------------------
-------
------
--- -------------------
----- ----------
------ ---------- -------------------
---------------------
-------
--------
--- ------ - -----
----------------------------
----------------- --------- -------------------
--------------------
------ ------
---
--------------- --------- --------------
-------------------------------------------
---
---------
-------
-------在这里，我们使用 jQuery 监听表单的 submit 事件，并通过 Socket.io 发送聊天消息。同时，我们还监听来自服务器的“chat message”事件，并将其添加到我们的 HTML 中。请确保客户端上的 socket.io.js 脚本文件与您的服务器上的位置相同。
在服务器端，我们需要改进我们的代码，以处理来自客户端的消息。在 index.js 文件中添加以下代码：
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- ------------
--------------- --------- ----- -- -
--------------------- - - -----
------------- --------- -----
---
----------------------- -- -- -
----------------- ---------------
---
---在这里，我们为来自客户端的“chat message”事件添加了监听器。当服务器收到一个聊天消息时，它将通过所有已连接的套接字（包括发送它的套接字）广播消息。
现在，重新启动服务器，您应该能够使用聊天应用程序在实时的聊天中交流。在浏览器中打开两个标签页或同时启动两个浏览器，尝试在其中一个浏览器中发送消息，并在另一个浏览器中查看消息是否成功到达。
总结
在本文中，我们学习了如何使用 Socket.io 实现 WebSocket 的功能，并构建了一个实时聊天应用程序。我们了解了如何在服务器端使用 Socket.io，以及如何与客户端通信，并发送和接收消息。如果您需要实现实时通信功能，Socket.io 是一个轻量级且易于使用的库，可以让您快速开始构建您的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d6dcd968c7c53b0c1be17