在开发多人在线游戏时，服务器端实时通讯是至关重要的一环。而 Socket.io ，作为实时应用开发中最为流行的库之一，被广泛应用于多人在线游戏的开发中。
Socket.io 的优势在于它提供了基于 WebSockets 的实时通信，可以直观地将服务器端推送的数据及时地响应回到客户端，并且支持了多种协议，包括 WebSockets 、 AJAX 长轮询、 JSONP 等，使它具有了更大的通用性。
本文将介绍如何利用 Socket.io 搭建多人在线游戏服务器，并提供一些实用指导及示例代码。
服务端搭建
首先，需要安装 Socket.io 库和 Express 库。
npm install socket.io npm install express
接着，创建一个 Express 应用来处理 HTTP 请求和响应：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.listen(3000, () => {
console.log('listening on *:3000');
});该应用将会返回一个 index.html 的页面，其中使用 Socket.io 客户端连接到服务器：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>Socket.io</title>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
// 进行服务器连接
socket.on('connect', () => {
socket.emit('my event', { data: 'I\'m connected!' });
});
// 接收服务器数据
socket.on('my response', (msg) => {
console.log(msg);
});
// 发送服务器数据
var form = document.getElementById('form');
var input = document.getElementById('input');
form.onsubmit = (e) => {
e.preventDefault();
socket.emit('my event', { data: input.value });
input.value = '';
return false;
};
</script>
</head>
<body>
<form id="form">
<input id="input" autocomplete="off">
<button>Send</button>
</form>
</body>
</html>通过以上代码，就可以成功连接上服务器和进行数据的收发了。
实现多人在线游戏
接着，我们将实现一个简单的多人在线游戏，这里以回合制游戏为例。在游戏开始后，服务器将会随时向所有客户端广播当前游戏信息，当玩家操作时，将实时向服务器发送数据。请参考以下代码实现：
服务端
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// 游戏逻辑部分
let gameState = {
"isGameStarted": false,
"currentPlayer": 0,
"players": [
{"playerId": 0, "playerName": "Alice", "score": 0},
{"playerId": 1, "playerName": "Bob", "score": 0},
{"playerId": 2, "playerName": "Charlie", "score": 0}
]
};
io.on('connection', (socket) => {
console.log('a user connected');
// 向客户端发送目前的游戏状态
socket.emit('gameState', gameState);
socket.on('disconnect', () => {
console.log('user disconnected');
});
socket.on('startGame', () => {
if (gameState.isGameStarted === true) return;
gameState.isGameStarted = true;
io.emit('gameState', gameState);
});
socket.on('endGame', () => {
if (gameState.isGameStarted === false) return;
gameState.isGameStarted = false;
io.emit('gameState', gameState);
});
socket.on('playerAction', (data) => {
if (gameState.isGameStarted === false) return;
if (data.playerId !== gameState.currentPlayer) return;
gameState.players[data.playerId].score += data.score;
gameState.currentPlayer = (gameState.currentPlayer + 1) % gameState.players.length;
io.emit('gameState', gameState);
});
});
http.listen(3000, () => {
console.log('listening on *:3000');
});客户端
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>Socket.io</title>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
socket.on('connect', () => {
socket.emit('my event', { data: 'I\'m connected!' });
});
// 接收游戏状态，更新游戏界面
socket.on('gameState', (gameState) => {
if (gameState.isGameStarted === true) {
// 游戏开始时的操作
// ...
} else {
// 游戏结束时的操作
// ...
}
});
// 发送玩家操作到服务器
var button = document.getElementById('button');
button.onclick = () => {
var score = Number(document.getElementById('input').value);
socket.emit('playerAction', {
"playerId": 1,
"score": score
});
};
</script>
</head>
<body>
<button id="button">Send</button>
<input id="input" autocomplete="off">
</body>
</html>在本示例中，服务端随时更新 gameState 对象并广播给所有客户端，客户端通过接收 gameState 对象来更新游戏界面，并在用户操作时将数据实时传送到服务器。所有客户端都能看到同步更新的游戏状态，这样就实现了一个基本的多人在线游戏。
总结
通过本文的介绍，相信大家已经对如何使用 Socket.io 简单实现多人在线游戏有了一定的了解。在实际应用中，扩展更多的功能和实现更好的游戏体验还需要更多的开发者努力。希望本文对您有所帮助，对未来开发的实时应用有一个启示。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6548a0997d4982a6eb2e4f8e