在现代 Web 应用程序中，即时通讯是一个不可避免的功能。这就是为什么使用 Socket.io 作为实时通信库的原因。Socket.io 可以为我们的应用程序提供并发和实时性。在本篇文章中，我们将介绍如何使用 Socket.io 实现一个简单的即时聊天系统。
什么是 Socket.io
Socket.io 是一个基于事件的库，用于实现实时、双向、可靠的数据传输。它可以在不同的平台、浏览器和设备之间建立实时通信，如聊天室、游戏、股票交易等。
Socket.io 采用了不同于 WebSocket 的机制来提供实时通信。在传输层，Socket.io 可以同时使用 WebSocket、AJAX、JSONP 等；在应用层，它提供了一堆事件（Event）和 API，使传输更加灵活和高效。
如何安装 Socket.io
安装 Socket.io 非常简单。只需在终端中输入以下命令：
npm install socket.io
在成功安装后，我们可以使用以下代码引入库：
const io = require('socket.io')();如何在客户端和服务器端建立连接
通过以下代码，我们可以在客户端和服务器端建立 Socket 连接：
const socket = io.connect('http://localhost:3000');上面的代码中，“http://localhost:3000” 是服务器的地址和端口号。通过这个地址，客户端可以连接到服务器，以便完成 Socket 通信。
在服务器端，我们可以通过以下代码监听连接事件：
io.on('connection', (socket) => {
console.log('A client connected.');
});在客户端，我们可以通过以下代码监听连接事件：
socket.on('connect', () => {
console.log('Connected to server.');
});当客户端和服务器端成功建立连接后，我们就可以开始实现聊天功能了。
如何实现聊天功能
向服务器发送消息
在客户端中，我们可以通过以下代码向服务器发送消息：
socket.emit('chat message', message);其中，“chat message” 是我们定义的事件名，message 是要发送的消息。
在服务器端，我们可以通过以下代码监听消息事件：
socket.on('chat message', (message) => {
console.log('Received message: ' + message);
});在上面的代码中，我们通过 console.log() 输出了接收到的消息。在正式实现聊天功能中，我们需要将消息广播到所有与服务器建立连接的客户端，并将其显示在聊天室中。
广播消息
在服务器端，我们可以通过以下代码，将接收到的消息广播到所有与服务器建立连接的客户端：
io.emit('chat message', message);在上面的代码中，“chat message” 是我们定义的事件名，message 是要广播的消息。
在客户端，我们可以通过以下代码监听广播事件，以便将接收到的消息显示在聊天室中：
socket.on('chat message', (message) => {
console.log('Received message: ' + message);
// 在聊天室中显示消息
});在正式实现聊天室功能中，我们需要将消息显示在聊天室中。可以使用 jQuery 或其他前端框架实现 DOM 操作。
总结
到目前为止，我们已经了解了如何通过 Socket.io 实现基本的聊天室功能。需要注意的是，socket.emit() 只用于向服务器发送消息，而 io.emit() 可用于将消息广播到所有与服务器建立连接的客户端。我们还可以使用 Socket.io 的其他事件和 API，实现更高级的聊天室功能或其他实时应用程序。
示例代码：
-- -------------------- ---- -------
-- ----
----- -- - -----------------------
------------------- -------- -- -
-------------- ------ -------------
-- ----
--------------- --------- --------- -- -
--------------------- -------- - - ---------
-- ----
------------- --------- ---------
---
----------------------- -- -- -
-------------- ------ ----------------
---
---
----------------
-- ---
----- ------ - ------------------------------------
-- ------
-------------------- -- -- -
---------------------- -- ----------
---
-- ----
----------------- --------- ---------
-- ------
--------------- --------- --------- -- -
--------------------- -------- - - ---------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645dfc25968c7c53b00564a0