Socket.IO 是一个基于 Node.js 的 JavaScript 框架，用于实现实时应用程序，比如聊天、协作开发、游戏等。它是建立在 Web Sockets 协议之上，可以实现方便的双向通信。本文将介绍 Socket.IO 的基本概念、用法及示例代码。
Socket.IO 的基本概念
- 服务器：使用 Socket.IO 程序运行的计算机或服务器，用于启动 Socket.IO 应用程序或提供 Socket.IO 服务。
- 客户端：使用 Socket.IO 库的浏览器、移动设备或桌面应用程序。
- 套接字：连接服务器和客户端的管道，用于在它们之间传递数据。
- 事件：当某个操作发生时，服务器或客户端会发出事件，触发监听该事件的套接字上的回调。
Socket.IO 的用法
1. 创建 Socket.IO 服务器
在 Node.js 中，可以使用 Socket.IO 库来创建 Socket.IO 服务器。您需要安装 Node.js 和 Socket.IO 库，然后编写以下代码：
const io = require('socket.io')(3000);
io.on('connection', (socket) => {
console.log('a user connected');
});在上面的代码中，我们创建了一个 Socket.IO 服务器，并将其绑定到端口 3000。当有客户端连接到服务器时，connection 事件将触发，并打印一条日志。
2. 创建 Socket.IO 客户端
在浏览器中，可以使用之前创建的服务器的网络地址创建一个 Socket.IO 客户端：
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js"></script>
<script>
const socket = io('http://localhost:3000');
socket.on('connect', () => {
console.log('connected');
});
</script>在上面的代码中，我们提供了 Socket.IO 库的 CDN，创建了一个 Socket.IO 客户端，然后将其连接到之前创建的服务器。当客户端连接成功时，connect 事件将触发，并打印一条日志。
3. 发送和接收事件
一旦建立了连接，客户端和服务器之间就可以通过发送和接收事件来通信。
-- -------------------- ---- -------
-- ---
------------------- -------- -- -
-------------------- --------- -- -
---------------------
-------------------- --------- -- ------
---
---
-- ---
---------------------- --------- -- ----
---------------------- --------- -- - -- ------
---------------------
---在上面的代码中，我们使用 message 事件在客户端和服务器之间发送消息。服务器接收该消息并打印它，然后将相同的消息广播给所有连接的客户端。
Socket.IO 的实战
下面，我们来实现一个简单的多人聊天室。以下是大致实现步骤：
- 创建一个 Socket.IO 服务器
- 处理新连接事件，为新用户分配唯一的 ID，并将其连接传送到所有其他用户
- 处理用户消息事件，将其广播到所有其他用户
1. 服务器实现
-- -------------------- ---- -------
----- -- - ---------------------------
----- ----- - ---
------------------- -------- -- -
-- ------- --
----- ------ - ----------
------------- - -
----- ------- - ------------------- ---
------- ------
--
------------------------------ - - ------------
-- --------
--------------------------- ----------- --------------------
-- --------
-------------------- --------- -- -
------------------------------ - -- - - ---------
-------------------- -
----- -------------------
-------- -------
---
---
-- ----------
----------------------- -------- -- -
------------------------------ - - ------------ - - --------
------ --------------
------------- -------------- --------
---
---在上面的代码中，我们创建了一个 users 对象，用于存储每个用户的信息。当新用户连接到服务器时，我们会为其分配唯一的用户 ID，并将其添加到 users 对象中，然后广播用户连接事件。
当某个用户发出消息时，我们会将其广播到所有其他用户。当用户断开连接时，我们从 users 对象中删除其信息，并广播用户断开连接事件。
2. 客户端实现
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
---------------- ---- ------------
-------
-------- -
---------- -----
-------- ----
-------------- ----
----------------- -----
-------------- ----
-
----------- -
----------------- --------
-
--------
-------
------
---- --------------------
------
------ ---------- ------------------ --
---------------------
-------
------- -----------------------------------------------------------------------------------
--------
----- ------ - ----------------------------
----- -------- - ------------------------------------
----- ----- - ---------------------------------
-------------------- -- -- -
-------------------------
-- ------------
--------------- ----------- ------ -- -
----- ------- - -------- -----------
----- --- - ------------------------------
------------- - --------
--------------------------
---
-- --------------
--------------- -------------- -------- -- -
----- ------- - ------------------ - - --------------
----- --- - ------------------------------
------------- - --------
--------------------------
---
-- ----------
---------------------- ------ -- -
----- ------- - -------------- -----------------
----- --- - ------------------------------
------------- - --------
-----------------------------
-- ---------- --- ---------------------- -
--------------------------------
-
--------------------------
---
---
-- --------
--------------------------------------------------------- ------- -- -
-----------------------
----- ------- - -------------------
-- --------- -
---------------------- ---------
----------- - ---
-
---
---------
-------
-------在上面的代码中，我们创建了一个用户界面，并使用 Socket.IO 客户端监听服务器的用户连接、用户断开连接和广播事件。当某个事件触发时，我们会将其显示在界面上。
我们还新增一个表单，用于向服务器发送消息。当用户点击发送按钮时，我们会将输入的消息发送到服务器，然后清空表单。
总结
本文介绍了 Socket.IO 的基本概念、用法及示例代码，并实现了一个简单的多人聊天室。Socket.IO 可以用于许多实时应用程序，比如聊天、协作开发、游戏等，具有广泛的应用前景。如果你想要深入了解 Socket.IO 和实时应用程序的开发，请继续学习相关技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d1ac6ab5eee0b5258ebce8