Socket.IO 是一个基于 Node.js 的实时网络库，它提供了一个简单的 API，使得在客户端和服务器端之间建立实时、双向的通信变得非常容易。在前端开发中，Socket.IO 可以用于实现即时聊天、在线多人对战游戏等功能。本文将详细介绍 Socket.IO 的使用方法，并提供示例代码以供参考。
安装 Socket.IO
在使用 Socket.IO 之前，需要先安装它。可以通过 npm 命令来安装 Socket.IO：
npm install socket.io
创建 Socket.IO 服务器
在服务器端，需要创建一个 Socket.IO 服务器来处理客户端的连接和消息。下面是一个简单的 Socket.IO 服务器的示例代码：
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});代码中，io 对象表示 Socket.IO 服务器，server 是一个 HTTP 服务器，可以是 Node.js 自带的 http 模块创建的服务器，也可以是第三方的 Web 框架（如 Express）创建的服务器。io.on('connection', callback) 方法用于监听客户端的连接事件，当有客户端连接到服务器时，会触发回调函数 callback。在回调函数中，可以处理客户端的消息和断开连接事件。
连接 Socket.IO 客户端
在客户端，需要连接 Socket.IO 服务器，以便建立实时通信的连接。下面是一个简单的 Socket.IO 客户端的示例代码：
-- -------------------- ---- -------
------- ---------------------------------------
--------
----- ------ - -----
-------------------- -- -- -
---------------------- -- ---------
---
----------------------- -- -- -
------------------------- ---- ---------
---
---------代码中，socket.io.js 是 Socket.IO 客户端库，需要在 HTML 页面中引入。io() 方法用于连接到 Socket.IO 服务器，返回一个 socket 对象，可以用于发送和接收消息。socket.on('connect', callback) 方法用于监听连接事件，当客户端成功连接到服务器时，会触发回调函数 callback。socket.on('disconnect', callback) 方法用于监听断开连接事件，当客户端与服务器的连接断开时，会触发回调函数 callback。
实现即时聊天
使用 Socket.IO 可以轻松地实现即时聊天功能。下面是一个简单的即时聊天应用的示例代码：
服务器端代码
-- -------------------- ---- -------
----- -- - -----------------------------
------------------- -------- -- -
-------------- ---- ------------
--------------- --------- ----- -- -
--------------------- - - -----
------------- --------- -----
---
----------------------- -- -- -
----------------- ---------------
---
---代码中，socket.on('chat message', callback) 方法用于监听客户端发送的消息事件，当客户端发送消息时，会触发回调函数 callback，其中 msg 参数表示客户端发送的消息内容。在回调函数中，使用 io.emit('chat message', msg) 方法将消息广播给所有客户端，从而实现即时聊天的功能。
客户端代码
-- -------------------- ---- -------
--- -------------------
----- ---------------
------ ------------------ ------------------ -----------------------
-------
--------
----- ------ - -----
----- ---- - -------------------------------------
----- ----- - -----------------------------------------
----- -------- - ------------------------------------
------------------------------- --- -- -
-------------------
-- ------------- -
----------------- --------- -------------
----------- - ---
-
---
--------------- --------- ----- -- -
----- -- - -----------------------------
-------------- - ----
-------------------------
---
---------代码中，<ul id="messages"></ul> 是用于显示聊天消息的列表，<form id="chat-form"> 是用于发送消息的表单。当用户提交表单时，会触发 submit 事件，通过 socket.emit('chat message', input.value) 方法将消息发送给服务器。同时，使用 socket.on('chat message', callback) 方法监听服务器广播的消息事件，当有新消息时，会触发回调函数 callback，在回调函数中，将消息显示在聊天列表中。
实现在线多人对战游戏
使用 Socket.IO 还可以实现在线多人对战游戏功能。下面是一个简单的在线多人对战游戏的示例代码：
服务器端代码
-- -------------------- ---- -------
----- -- - -----------------------------
--- ------- - ---
------------------- -------- -- -
-------------- ------ ------------
------------------ - - -- -- -- - --
------------------- - --- ---------- -------- ------- ---
----------------------------- ------ -----------
----------------- ------ ------ -- -
------------------ - - -- ------- -- ------ --
--------------- ------ - --- ---------- -- ------- -- ------ ---
---
----------------------- -- -- -
-------------- ------ ---------------
------ -------------------
--------------- ------- -----------
---
---代码中，players 对象用于存储所有玩家的位置信息。当有新玩家连接到服务器时，会将其添加到 players 对象中，并使用 socket.emit('init', data) 方法将当前玩家的 ID 和所有玩家的位置信息发送给客户端。同时，使用 socket.broadcast.emit('player join', data) 方法将新玩家的 ID 发送给其他客户端，以便其他客户端可以显示新玩家。当玩家移动时，会将其位置信息更新到 players 对象中，并使用 io.emit('player move', data) 方法将更新后的位置信息广播给所有客户端。当玩家断开连接时，会将其从 players 对象中删除，并使用 io.emit('player leave', data) 方法将其 ID 发送给所有客户端，以便其他客户端可以删除该玩家。
客户端代码
-- -------------------- ---- -------
-------
----- -
--------- ---------
------ ------
------- ------
------- --- ----- ------
-
------- -
--------- ---------
------ -----
------- -----
----------------- ----
-------------- ----
-
--------
---- ----------------
--------
----- ------ - -----
--- ------- - ---
----- ---- - --------------------------------
----------------- ------ -- -
------- - -------------
--- ------ -- -- -------- -
----- ------ - ------------------------------
-------------------------------
------------------------- ----
----------------- - ------------- - -----
---------------- - ------------- - -----
-------------------------
-
---
----------------- ------ ---- -- -
----------- - - -- -- -- - --
----- ------ - ------------------------------
-------------------------------
------------------------- ----
-------------------------
---
----------------- ------ ------ -- -
------------------ - -------
------------------ - -------
----- ------ - ---------------------------------
----------------- - ------ - -----
---------------- - ------ - -----
---
----------------- ------- ---- -- -
----- ------ - ----------------------------
-------------------------
------ ------------
---
---------------------------------- --- -- -
----- - - --------- - ----------------
----- - - --------- - ---------------
------------------- ------ - -- -- -- - ---
---
---------代码中，<div id="game"></div> 是游戏画面的容器，玩家会在其中移动。当客户端收到服务器发送的 init 消息时，会将所有玩家的位置信息显示在游戏画面中。当客户端收到服务器发送的 player join 消息时，会创建新玩家的 DOM 元素并添加到游戏画面中。当客户端收到服务器发送的 player move 消息时，会更新对应玩家的位置信息并更新其 DOM 元素的位置。当客户端收到服务器发送的 player leave 消息时，会删除对应玩家的 DOM 元素。同时，当鼠标在游戏画面中移动时，会触发 mousemove 事件，并通过 socket.emit('player move', data) 方法将自己的位置信息发送给服务器。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d969efa941bf7134108dcd