Node.js+Socket.io 实现游戏实时联机教程-JavaScript中文网-JavaScript教程资源分享门户

随着互联网的发展，越来越多的游戏开始采用实时联机模式，使得玩家可以随时随地与其他玩家进行互动。在前端开发中，利用 Node.js 和 Socket.io 可以轻松实现游戏实时联机功能。本文将介绍如何使用 Node.js 和 Socket.io 实现游戏实时联机，并提供详细的示例代码和指导意义。

Node.js 简介

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可用于开发服务器端应用程序。它采用事件驱动、非阻塞 I/O 模型，能够处理大量并发连接，是实现游戏实时联机的理想选择。

Socket.io 简介

Socket.io 是一个基于 WebSocket、轮询等技术的实时通信库，可以在浏览器和服务器之间建立实时、双向、基于事件的通信。它支持多个房间、多个命名空间、自定义事件等高级功能，非常适合实现游戏实时联机。

实现步骤

下面将介绍如何使用 Node.js 和 Socket.io 实现游戏实时联机功能，具体步骤如下：

步骤一：安装 Node.js 和 Socket.io

首先需要安装 Node.js 和 Socket.io。可以在 Node.js 官网（https://nodejs.org/）下载安装包，并在命令行中执行以下命令安装 Socket.io：

npm install socket.io

步骤二：创建服务器

在项目根目录下创建一个名为 server.js 的文件，输入以下代码：

// www.javascriptcn.com code example
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

app.use(express.static(__dirname + '/public'));

io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

以上代码创建了一个基于 Express 框架的服务器，并使用 Socket.io 模块创建了一个 Socket.io 实例。当有新用户连接时，服务器会输出一条日志信息。

步骤三：创建客户端

在项目根目录下创建一个名为 index.html 的文件，输入以下代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Game</title>
  </head>
  <body>
    <h1>Game</h1>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
      console.log('connected');
    </script>
  </body>
</html>

以上代码创建了一个基本的 HTML 页面，并在页面中引入了 Socket.io 客户端脚本。当客户端连接成功时，浏览器控制台会输出一条日志信息。

步骤四：实现游戏逻辑

在 server.js 文件中添加以下代码：

// www.javascriptcn.com code example
var players = {};

io.on('connection', function(socket){
  console.log('a user connected');

  socket.on('new player', function(){
    players[socket.id] = {
      x: Math.floor(Math.random() * 700),
      y: Math.floor(Math.random() * 500)
    };
    socket.emit('player id', socket.id);
    io.emit('all players', players);
  });

  socket.on('player move', function(data){
    players[socket.id].x = data.x;
    players[socket.id].y = data.y;
    io.emit('all players', players);
  });

  socket.on('disconnect', function(){
    console.log('user disconnected');
    delete players[socket.id];
    io.emit('all players', players);
  });
});

以上代码实现了游戏逻辑，包括添加新玩家、玩家移动和玩家离开游戏等功能。具体实现方式如下：

当有新玩家加入游戏时，服务器会生成一个随机位置，并将该玩家的 ID 和位置信息存入 players 对象中，并向该玩家发送其 ID 和所有玩家的位置信息。
当某个玩家移动时，服务器会更新该玩家的位置信息，并向所有玩家发送所有玩家的位置信息。
当某个玩家离开游戏时，服务器会从 players 对象中删除该玩家的信息，并向所有玩家发送所有玩家的位置信息。

在 index.html 文件中添加以下代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Game</title>
  </head>
  <body>
    <h1>Game</h1>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');

      socket.emit('new player');

      socket.on('player id', function(id){
        setInterval(function(){
          context.clearRect(0, 0, 800, 600);
          socket.emit('player move', {
            x: canvas.width / 2,
            y: canvas.height / 2
          });
        }, 1000 / 60);
      });

      socket.on('all players', function(players){
        context.clearRect(0, 0, 800, 600);
        for(var id in players){
          var player = players[id];
          context.beginPath();
          context.arc(player.x, player.y, 10, 0, 2 * Math.PI);
          context.fill();
        }
      });
    </script>
  </body>
</html>

以上代码实现了游戏的前端逻辑，包括创建画布、绘制玩家和玩家移动等功能。具体实现方式如下：

当客户端连接成功时，客户端会向服务器发送一个 new player 事件，表示该客户端是一个新玩家。
当服务器返回该玩家的 ID 后，客户端会每隔 1/60 秒向服务器发送一个 player move 事件，并将该玩家的位置设置为画布中心。
当服务器返回所有玩家的位置信息时，客户端会在画布上绘制所有玩家的小圆点。

示例代码

完整的示例代码可以在 GitHub 上找到：https://github.com/zhaoxinyu/nodejs-socketio-game。

指导意义

本文介绍了如何使用 Node.js 和 Socket.io 实现游戏实时联机功能，具体实现方式包括创建服务器、创建客户端和实现游戏逻辑。本文的示例代码可以作为开发实时联机游戏的参考，同时也可以作为学习 Node.js 和 Socket.io 的入门教程。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67c56ea8cf1e9924e1d00e71

Node.js+Socket.io 实现游戏实时联机教程