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 客户端的示例代码：
// www.javascriptcn.com code example
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
socket.on('connect', () => {
console.log('connected to server');
});
socket.on('disconnect', () => {
console.log('disconnected from server');
});
</script>代码中，socket.io.js 是 Socket.IO 客户端库，需要在 HTML 页面中引入。io() 方法用于连接到 Socket.IO 服务器，返回一个 socket 对象，可以用于发送和接收消息。socket.on('connect', callback) 方法用于监听连接事件，当客户端成功连接到服务器时，会触发回调函数 callback。socket.on('disconnect', callback) 方法用于监听断开连接事件，当客户端与服务器的连接断开时，会触发回调函数 callback。
实现即时聊天
使用 Socket.IO 可以轻松地实现即时聊天功能。下面是一个简单的即时聊天应用的示例代码：
服务器端代码
// www.javascriptcn.com code example
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('user disconnected');
});
});代码中，socket.on('chat message', callback) 方法用于监听客户端发送的消息事件，当客户端发送消息时，会触发回调函数 callback，其中 msg 参数表示客户端发送的消息内容。在回调函数中，使用 io.emit('chat message', msg) 方法将消息广播给所有客户端，从而实现即时聊天的功能。
客户端代码
// www.javascriptcn.com code example
<ul id="messages"></ul>
<form id="chat-form">
<input id="message-input" autocomplete="off" /><button>Send</button>
</form>
<script>
const socket = io();
const form = document.getElementById('chat-form');
const input = document.getElementById('message-input');
const messages = document.getElementById('messages');
form.addEventListener('submit', (e) => {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', (msg) => {
const li = document.createElement('li');
li.textContent = msg;
messages.appendChild(li);
});
</script>代码中，<ul id="messages"></ul> 是用于显示聊天消息的列表，<form id="chat-form"> 是用于发送消息的表单。当用户提交表单时，会触发 submit 事件，通过 socket.emit('chat message', input.value) 方法将消息发送给服务器。同时，使用 socket.on('chat message', callback) 方法监听服务器广播的消息事件，当有新消息时，会触发回调函数 callback，在回调函数中，将消息显示在聊天列表中。
实现在线多人对战游戏
使用 Socket.IO 还可以实现在线多人对战游戏功能。下面是一个简单的在线多人对战游戏的示例代码：
服务器端代码
// www.javascriptcn.com code example
const io = require('socket.io')(server);
let players = {};
io.on('connection', (socket) => {
console.log('a player connected');
players[socket.id] = { x: 0, y: 0 };
socket.emit('init', { id: socket.id, players: players });
socket.broadcast.emit('player join', socket.id);
socket.on('player move', (data) => {
players[socket.id] = { x: data.x, y: data.y };
io.emit('player move', { id: socket.id, x: data.x, y: data.y });
});
socket.on('disconnect', () => {
console.log('a player disconnected');
delete players[socket.id];
io.emit('player leave', socket.id);
});
});代码中，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 发送给所有客户端，以便其他客户端可以删除该玩家。
客户端代码
// www.javascriptcn.com code example
<style>
#game {
position: relative;
width: 400px;
height: 400px;
border: 1px solid black;
}
.player {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}
</style>
<div id="game"></div>
<script>
const socket = io();
let players = {};
const game = document.getElementById('game');
socket.on('init', (data) => {
players = data.players;
for (const id in players) {
const player = document.createElement('div');
player.classList.add('player');
player.setAttribute('id', id);
player.style.left = players[id].x + 'px';
player.style.top = players[id].y + 'px';
game.appendChild(player);
}
});
socket.on('player join', (id) => {
players[id] = { x: 0, y: 0 };
const player = document.createElement('div');
player.classList.add('player');
player.setAttribute('id', id);
game.appendChild(player);
});
socket.on('player move', (data) => {
players[data.id].x = data.x;
players[data.id].y = data.y;
const player = document.getElementById(data.id);
player.style.left = data.x + 'px';
player.style.top = data.y + 'px';
});
socket.on('player leave', (id) => {
const player = document.getElementById(id);
game.removeChild(player);
delete players[id];
});
game.addEventListener('mousemove', (e) => {
const x = e.clientX - game.offsetLeft;
const y = e.clientY - game.offsetTop;
socket.emit('player move', { x: x, y: y });
});
</script>代码中，<div id="game"></div> 是游戏画面的容器，玩家会在其中移动。当客户端收到服务器发送的 init 消息时，会将所有玩家的位置信息显示在游戏画面中。当客户端收到服务器发送的 player join 消息时，会创建新玩家的 DOM 元素并添加到游戏画面中。当客户端收到服务器发送的 player move 消息时，会更新对应玩家的位置信息并更新其 DOM 元素的位置。当客户端收到服务器发送的 player leave 消息时，会删除对应玩家的 DOM 元素。同时，当鼠标在游戏画面中移动时，会触发 mousemove 事件，并通过 socket.emit('player move', data) 方法将自己的位置信息发送给服务器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d969efa941bf7134108dcd