引言
WebSocket 是一种新型网络协议，它允许在客户端和服务器之间双向的实时通信。与传统的 HTTP 请求-响应模式相比，WebSocket 消除了客户端发送 ping 请求并等待服务器响应数据的过程。在现代 Web 应用程序中，WebSocket 已成为实现实时通信的常用选择。
Express 是一个流行的 Node.js Web 应用程序框架。它提供了一系列工具和函数，简化了基于 Node.js 的 Web 应用程序的开发过程。结合 WebSocket，Express 可以轻松地构建跨浏览器的实时通信应用。本文将介绍如何使用 Express.js 构建 WebSocket 应用程序。
安装和设置
首先，我们需要使用 npm 安装 Express.js 和 socket.io：
npm install express socket.io --save
在项目中创建一个新的 app.js 文件，并添加以下代码：
-- -------------------- ---- ------- -- -------- ----- ------- - ------------------ ----- --- - --------- ----- ---- - --------------------------------- ----- -- - -------------------------- -- -- ------- ---- --------------- ---------------- -- ----- -- --------- -------------------------------- - ----------- -- ---- ---------------------------- -- -- - -------------------- ------ --------- -- ---- - - ---------------- --
上述代码将创建一个 Express 应用程序并将其设置为侦听端口 3000。然后，将静态文件夹路径设置为 /public ，这意味着我们可以在 public 文件夹中存放客户端代码。Socket.IO 库将包含在应用程序中，将其绑定到 Express 应用程序并使用 http 服务器。
设置 Socket.IO
现在，我们需要为 Socket.IO 添加一些更多的代码。在 app.js 文件中添加以下代码：
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- -----------
-- -------
--------------- --------- ----- -- -
--------------------- - - ----
------------- --------- ----
--
-- --------
----------------------- -- -- -
-------------- ---- --------------
--
--上述代码将在客户端连接到服务器时触发 connection 事件，然后将打印一条消息。然后，我们通过 socket.on 函数监听了名为 chat message 的客户端事件。在处理客户端事件时，我们使用 io.emit 发送 chat message 事件，以便我们可以在所有连接的客户端中传输消息。最后，我们通过 socket.on('disconnect', () => { ... }) 监听 “disconnect” 事件，以便我们在客户端与服务器断开连接时得到通知。
创建客户端代码
客户端代码很简单 - 我们只需在 HTML 文件中添加以下 JavaScript 代码：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ---------------
------- ---------------------------------------
------- -----------------------------------------------------------
-------
------
--- -------------------
----- -----------------
------ ----------------- -------------------
---------------------
-------
--------
----- ------ - ----
-- ------------
-------------------- -- -- -
---------------------- -- --------
--
-- ------- ----------
--------------- --------- ----- -- -
------------------------------------------
--
-- ----------------------
---------------------------- -- -
------------------
----------------- --------- -------------------------
--------------------------
------ -----
--
---------
-------
-------上述代码创建一个 HTML 表单和一个用于显示聊天消息的标记列表。当用户提交表单时，我们将 chat message 事件发送到服务器，服务器将该消息传递给所有已连接的客户端。
运行应用程序
现在我们已经设置好了所有代码，我们可以启动应用程序并打开浏览器，访问 http://localhost:3000。当您打开浏览器并导航到该网址时，应该会看到类似以下内容的屏幕：
现在您可以在当前聊天中输入消息并单击“发送”按钮，该消息将出现在其他所有已连接的客户端中。
结论
在本文中，我们介绍了如何使用 Express.js 和 Socket.IO 创建一个简单的 WebSocket 应用程序。通过使用这种技术，我们可以轻松地构建具有实时通信功能的 Web 应用程序，这是现代 Web 应用程序的重要特征之一。在您开发自己的 WebSocket 应用程序时，建议您根据上述示例进行实践并且不断尝试添加更复杂的功能来进一步扩展您的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67062115d91dce0dc858b32f