最近几年来，前后端分离的开发方式越来越流行。这种开发方式的优点是明显的：前端和后端工作独立，可以更快地进行迭代开发；前端可以使用更优秀的框架，提高交互性和用户体验。但是这种方式也会带来一个问题：前后端之间的通信如何实现？
使用 AJAX 或者 WebSockets 是比较常见的交互方式。在这篇文章中，我们将看到如何使用 Socket.io，一种流行的 WebSockets 实现，来实现 Express.js 和 HTML 的交互。
什么是 Socket.io？
Socket.io 是一个基于 Node.js 的 WebSockets 实现。它提供了客户端和服务器端的库，使得浏览器和服务器之间的实时通信变得非常容易。
Socket.io 支持各种事件，例如连接、断开连接、发送消息等等。它还提供了房间和命名空间等概念，方便我们将消息发送给特定的客户端或者群体。
Express.js 和 Socket.io 的结合
要使用 Socket.io，我们需要在服务器端和客户端分别引入它的库。如果你使用的是 Express.js，可以像下面这样安装 Socket.io 并引入它：
npm install --save socket.io
-- -------------------- ---- -------
-----------
----- ------- - -------------------
----- --- - ----------
----- ------ - ---------------- -- -- -
------------------- ------- -- ---- -------
---
----- -- - -----------------------------
------------------- -------- -- -
---------------- ------ ------------
----------------------- -- -- -
------------------- ---------------
---
---在这个代码片段中，我们首先创建了一个 Express.js 应用，然后用它的 listen 方法启动了一个服务器。我们还实例化了一个 Socket.io，并将其传递给服务器的构造函数。
当有客户端连接到服务器时，Socket.io 会触发 connection 事件。在这个事件中，我们可以处理客户端的请求。
同时，我们定义了一个 disconnect 事件，表示客户端主动或者被动断开连接时的处理逻辑。
接下来，我们需要在客户端引入 Socket.io 库，并建立一个连接：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
------- ---------------------------------------
-------
------
---------- ---------------
--------
----- ------ - -----
-------------------- -- -- -
---------------------- -- ---------
---
----------------------- -- -- -
------------------------- ---- ---------
---
---------
-------
-------这里我们在 HTML 文件中引入了 Socket.io 库，并在 <script> 标签中实例化了一个 Socket.io 客户端。当客户端连接成功时，会触发 connect 事件；当客户端断开连接时，会触发 disconnect 事件。
发送消息
有了连接，我们还需要在客户端和服务器之间发送消息。在 Socket.io 中，可以使用 emit 方法发送消息：
//server.js
io.on('connection', (socket) => {
socket.on('message', (message) => {
console.log(`Received message: ${message}`);
io.emit('broadcast', message);
});
});-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
------- ---------------------------------------
-------
------
---------- ---------------
------ ------------------ ------------
------- ------------------------------
--- -----------------------
--------
----- ------ - -----
-------------------- -- -- -
---------------------- -- ---------
---
----------------------- -- -- -
------------------------- ---- ---------
---
----- ------------ - -----------------------------------------
----- ---------- - ---------------------------------------
----- ----------- - ----------------------------------------
------------------------------------ -- -- -
----- ------- - -------------------
---------------------- ---------
------------------ - ---
---
---------------------- --------- -- -
----- -- - -----------------------------
-------------- - --------
----------------------------
---
---------
-------
-------在服务器端，我们监听了 message 事件，这个事件会在有客户端发送消息时触发。我们向所有客户端广播了这个消息，使用的是 io.emit 方法。
在客户端，我们首先获取了输入框和按钮，然后添加了一个点击事件的监听器。当用户点击按钮时，我们使用 socket.emit 发送了一个 message 事件。同时，我们在 broadcast 事件中监听服务器返回的消息，并将其添加到一个 <ul> 标签中。
总结
在本篇文章中，我们学习了如何使用 Socket.io 实现 Express.js 和 HTML 的交互。Socket.io 提供了一个简单的方法来实现浏览器和服务器之间的实时通信，并且使用它也十分容易。我们能够发送消息并将其广播到所有客户端，这是一种非常强大的交互方式。
希望这篇文章对你有所帮助，如果你对前端开发或者后端开发感兴趣，可以继续深入探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647848be968c7c53b04882ca