如何使用 Socket.IO 并构建您的第一个多人游戏！

先决条件：

介绍

设置环境

构建应用程序

先决条件：

必备品

• 节点.js
• npm
• 表达
• socket.io
• VS 代码

介绍

背景故事

如果你读过我的另一篇文章，你肯定知道我们要做什么。如果没有，让我解释一下。我们将构建一个ChrisOnCode 的“疯狂按钮”课程版本。我们将创建一个按钮，当用户点击时，它会移动到文档中的随机位置。我们还将使这个移动实时显示，以便其他人可以看到是否有其他人点击了它。

什么是socket.io

正如开发者自己所说：“ Socket.IO 是一个用于实时 Web 应用程序的 JavaScript 库。它支持 Web 客户端和服务器之间的实时双向通信。它包含两部分：一个在浏览器中运行的客户端库，以及一个用于 Node.js 的服务器端库。”

所以基本上它是一个允许我们创建实时应用程序的库。.io 游戏和 Facebook 聊天就是一个例子。我建议你看看他们的官方网站。查看这个链接也能帮助你了解它的工作原理。

现在您知道我们要构建什么以及用什么来构建。

设置环境

由于我使用的是 Windows，所以我将使用 Windows 术语，但如果您使用的是其他操作系统，我相信您也能理解。好的，我们将从设置环境开始。创建一个新文件夹，并将其命名为“Internet 按钮”。在该文件夹中打开 VS Code，并创建以下结构：

现在我们需要构建应用程序的基础。在目录中打开终端并输入

npm init

保留这些值，或者添加您的名称和描述 - 您可以自行选择。我们还需要安装nodemon，这样每次进行更改时就无需重新启动应用程序。使用以下命令安装：

npm install -g nodemon

我们需要安装的最后一个软件包是express和socket.io

npm install --save express socket.io

安装完所有软件包后，你的 package.json 应该类似于以下内容：

太棒了，一切准备就绪。开始工作吧！

构建应用程序

添加变量

我们首先在服务器文件夹中创建一个server.js文件。现在设置所有需要的变量。首先，我们将加载模块。添加以下 4 个变量：

const path          = require('path');
const http          = require('http');
const express       = require('express');
const socketIO      = require('socket.io');

好的，现在让我们设置 Express 服务器。首先，我们将通过我们创建的公共文件夹设置提供 HTML 服务的路径：

const publicPath    = path.join(__dirname, '/../public');

我们还需要指定应用程序要运行的端口。我们选择 3000：

const port          = process.env.PORT || 3000;

现在我们用以下方式调用我们的 express 函数：

let app             = express();

然后我们指定 http 方法来让 HTTP 连接进来：

let server          = http.createServer(app);

最后，我们设置 socketIO 连接：

let io              = socketIO(server);

我们的server.js文件应该包含以下代码行：

const path = require('path');
const http = require('http');
const express = require('express');
const socketIO = require('socket.io');

const publicPath = path.join(__dirname, '/../public');
const port = process.env.PORT || 3000;
let app = express();
let server = http.createServer(app);
let io = socketIO(server);

设置我们的功能

我们需要设置我们的快速服务器来最终提供内容：

app.use(express.static(public path));

最后连接到端口：

server.listen(port, ()=> {
    console.log(`Server is up on port ${port}.`)
});

太棒了，一切就绪。现在进入public文件夹，创建一个简单的index.html文件并添加一些内容。我将创建一个空白的 HTML 文档，并添加一个包含“欢迎参加 socket.io 培训！”的 h3 标签。打开浏览器，输入localhost:3000来验证一切正常。

完美！我们前进吧！

设置前端

由于这是一个socket.io教程，我不会详细介绍如何设置 HTML 和 CSS。相反，我会提供一个不包含 socket.io 部分的项目链接，我们将直接构建该项目。链接

如果你克隆了项目，请记住必须创建server文件夹并添加server.js文件。你还需要在public/js文件夹中添加app.js 文件。

Socket.io

变量

好的，我们已经了解了 socket.io 是什么以及它是如何工作的。现在是时候让它与我们的按钮配合使用了。在public/js目录中，我们将创建一个app.js文件。我们将套接字添加到文件顶部。

let socket = io();

我们得到了开始部分。它包含一些组件，在我们点击“开始”按钮之前可见，并在游戏开始时消失。

const startingSection = document.querySelector('.starting-section');

还有‘开始’按钮……

const homeBtn = document.querySelector('.home-btn');

最后，我们的“疯狂”按钮。那个会动的按钮：

let crazyButton = document.getElementById('crazyButton');

Socket.io 服务器连接

转到server/server.js文件并使用以下代码打开 socket.io 连接：

io.on('connection', (socket) => {
    console.log('A user just connected.');
    socket.on('disconnect', () => {
        console.log('A user has disconnected.');
    })
});

这是一个内置函数。每当建立新连接时，其中的代码都会被执行。我们还添加了另一个内置函数disconnect，其含义不言自明。

我们可以通过启动 nodemon ( nodemon server/server.js ) 并访问 localhost:3000 来测试。在 VS Code 中打开终端，检查是否记录了消息。

实时开始游戏

让我们创建“开始”按钮的功能。我们将隐藏.starting-section组件，并使其实时隐藏，以便其他玩家也能看到。导航到app.js并为开始按钮添加一个点击事件监听器：

start button.addEventListener('click', () => {

})

在我们的事件监听器中，我们必须使用socket.emit('startGame');向 socket.io 服务器发送一条消息：

startButton.addEventListener('click', () => {
    socket.emit('startGame');
});

现在在服务器端（server.js），我们必须为该消息创建一个“监听器”：

socket.on('startGame', () => {

})

我们向所有连接的客户端发送一条消息：

socket.on('startGame', () => {
    io.emit('startGame');
})

然后我们在app.js中处理来自服务器的“消息” ：

socket.on('startGame', () => {
});

我们调用函数hideStartButton()：

socket.on('startGame', () => {
    hideStartButton();
});

最后，我们声明hideStartButton函数：

function hideStartButton() {
    startButton.style.display = "none";
    crazyButton.style.display = "block";
    startingSection.style.display = "none";
}

现在我们测试 localhost:3000 中一切是否正常工作：

动图

实时移动按钮

对于这部分，一切都几乎相同，只有一个区别 - 我们必须将数据从我们的应用程序传递到服务器，处理它，并将其返回给每个连接的客户端。

我们为我们的疯狂按钮添加一个事件监听器并发出一条消息，该消息包含一个具有两个值的对象 - offsetLeft 和 offsetTop，它们是 Math.random 乘以我们窗口的 innerWidth 和 innerHeight - 按钮的 clientWidth 和 clientHeight：

crazyButton.addEventListener('click', () => {
    socket.emit('crazyIsClicked', {
        offsetLeft: Math.random() * ((window.innerWidth - crazyButton.clientWidth) - 100),
        offsetTop: Math.random() * ((window.innerHeight - crazyButton.clientHeight) - 50)
    });
})

然后，服务器以“数据”变量的形式接收这些值并将它们发回：

socket.on('crazyIsClicked', (data) => {
    io.emit('crazyIsClicked', data);
});

然后，我们的 app.js 文件接收数据并将其输入到移动按钮的函数中：

socket.on('crazyIsClicked', (data) => {
    goCrazy(data.offsetLeft, data.offsetTop);
});

我们创建 goCrazy 函数：

function goCrazy(offLeft, offTop) {
    let top, left;

    left = offLeft;
    top = offTop;

    crazyButton.style.top = top + 'px';
    crazyButton.style.left = left + 'px';
    crazyButton.style.animation = "none";
}

我们测试：

动图

太棒了，我们都完成了！

结论

今天你学习了什么是 socket.io、如何传递数据以及如何发送和监听消息。希望这些内容对你有所帮助，并且你今天有所收获！完整项目可在我的网站上找到。

请务必查看我的其他相关帖子 - JSourney：通过项目学习，而不是视频！。我解释了为什么构建项目是更好的学习方式，而不是整天观看视频。