在 Web 开发中，实时通信是一种非常常见的需求。在实时聊天、直播、在线游戏等应用场景中，实时性是非常重要的。所以，对于前端开发来说，学习如何使用 Express.js 和 Socket.IO 实现实时通信，是一个必不可少的技能。
什么是 Express.js 和 Socket.IO
Express.js 是一个基于 Node.js 平台的快速开发 web 应用的开发框架，可以帮助开发者方便地搭建基于 Node.js 的 web 应用程序。Socket.IO 是一个实现了浏览器和服务器之间双向实时通信的 JavaScript 库，可以轻松实现实时通信功能。
如何使用 Express 和 Socket.IO 实现实时通信
首先，需要先安装这两个库：
npm install express socket.io --save
1. 创建 Express 应用
const express = require('express')
const app = express()
const server = app.listen(3000, () => {
console.log('Server started on port 3000')
})2. 注册 Socket.IO
const io = require('socket.io')(server)3. 监听连接事件
当客户端连接到服务器时，就会触发一个 connection 事件。可以在这个事件的回调函数中实现以下事情：
- 存储用户信息
- 发送欢迎消息
- 广播客户端上线信息
-- -------------------- ---- -------
--- ----- - --
------------------- -------- -- -
-- ------
--- ---- - -
--- ----------
----- ------ - ------------- - --
-
----------------
-------------- - ----
-- ------
---------------------- -
----- ---------
-------- ------------------
--
-- ---------
------------------ -
----- ---------
-------- --- ------------ ----
--
--4. 监听客户端消息
在 connection 事件中，还可以监听客户端发送的消息。当收到客户端发来的消息时，可以广播给所有的客户端。
socket.on('message', (data) => {
io.emit('message', {
user: socket.user.name,
content: data.content
})
})5. 监听客户端断开
在客户端断开连接时，可以广播下线信息，并从用户列表中删除用户信息。
-- -------------------- ---- -------
----------------------- -- -- -
-- ---------
------------------ -
----- ---------
-------- --- ------------------- ----
--
-- ------------
--- ----- - ----------------- -- ---- --- ----------
------------------- --
--6. 在客户端页面中引入 Socket.IO
在客户端页面中，需要引入 Socket.IO。
<script src="/socket.io/socket.io.js"></script>
7. 建立 Socket.IO 连接
在客户端页面中，需要建立 Socket.IO 连接，并监听 message 事件。
const socket = io()
socket.on('message', (data) => {
// 处理消息
})示例代码
在上面的步骤中，我们已经介绍了如何使用 Express.js 和 Socket.IO 实现实时通信。下面是一个完整的示例代码：
Server
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
----- ------ - ---------------- -- -- -
------------------- ------- -- ---- ------
--
----- -- - ----------------------------
--- ----- - --
------------------- -------- -- -
-- ------
--- ---- - -
--- ----------
----- ------ - ------------- - --
-
----------------
-------------- - ----
-- ------
---------------------- -
----- ---------
-------- ------------------
--
-- ---------
------------------ -
----- ---------
-------- --- ------------ ----
--
-- -------
-------------------- ------ -- -
-- ----
------------------ -
----- -----------------
-------- ------------
--
--
-- -------
----------------------- -- -- -
-- ---------
------------------ -
----- ---------
-------- --- ------------------- ----
--
-- ------------
--- ----- - ----------------- -- ---- --- ----------
------------------- --
--
--Client
-- -------------------- ---- -------
--------- -----
------
------
--------------------
------- ------------------------------------------------------------------
------- ---------------------------------------
-------
------
--------------
---- -------------
------
-----
------ ------------------
------- ----------------------------
------
--------
----- ------ - ----
-------------------- ------ -- -
--- ------- - -------------- ----------------
--- ---- - ------------------------
--------------------------
--
-------------------------- -- -
--- ------- - ------------------------
--- ---- - -
-------- -------
-
---------------------- -----
--------------------------
--
---------
-------
-------总结
本文介绍了使用 Express.js 和 Socket.IO 实现实时通信的方法。需要注意的是，实时通信有很多种场景，需要根据实际需求进行定制开发。本文中的示例代码只是一个简单的实现，大家可以根据自己的需求进行二次开发，以适应更复杂的场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cdef91b5eee0b5255e2e08