使用 Node.js 和 Server-Sent-Events 构建实时在线游戏-JavaScript中文网-JavaScript教程资源分享门户

在本文中，我们将探讨如何使用 Node.js 和 Server-Sent-Events（SSE）来构建实时在线游戏。我们将深入了解 SSE 的工作原理，并创建一个简单的游戏来演示如何使用 SSE 进行实时通信。

什么是 SSE？

SSE 是一种在 Web 浏览器和服务器之间实现服务器推送事件的通信协议。它允许服务器将实时数据、通知和消息发送到客户端上，这些消息会在服务器发送数据时实时显示在用户的浏览器窗口中。

与 WebSockets 相比，SSE 的优势在于它不需要进行复杂的握手，也不需要保持长时间开启的连接。这使得 SSE 可以用于不需要双向通信的情况下，像在线游戏等使用场景。

构建实时在线游戏

让我们使用 Node.js 和 SSE 来构建一个简单的实时在线游戏。我们将创建一个基本的井字棋游戏来演示如何使用 SSE 进行实时通信。我们将使用 Express.js 作为服务器框架。

1. 创建 Express.js 应用程序

首先，我们需要在 Node.js 中安装 Express.js：

npm install express --save

然后，我们可以创建一个简单的 Express.js 应用程序：

const express = require('express');
const app = express();

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

app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

我们将静态资源存储在 "public" 目录中。

2. 创建 SSE 路由

接下来，让我们创建 SSE 路由，它将处理 SSE 请求并发送实时数据到浏览器：

// javascriptcn.com code example
app.get('/stream', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const intervalId = setInterval(() => {
    res.write(`data: ${JSON.stringify({ time: new Date() })}\n\n`);
  }, 1000);

  req.on('close', () => {
    clearInterval(intervalId);
  });
});

这个路由将在客户端浏览器请求 "/stream" 时触发。它将设置 HTTP 标头，以便浏览器知道如何处理 SSE 数据。然后，它将设置一个间隔器，定期将日期数据发送到浏览器。

3. 创建井字棋游戏

我们将创建一个简单的井字棋游戏，在此游戏中，两个玩家可以轮流进行动作。

在 "public" 目录中创建 "index.html" 文件，其中包含一个简单的 HTML、CSS 和 JavaScript 文件，以创建井字棋游戏：

// javascriptcn.com code example
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Online Tic Tac Toe</title>
  <style>
    /* 样式代码 */
  </style>
</head>

<body>
  <h1>Online Tic Tac Toe</h1>

  <table>
    <tr>
      <td class="cell"></td>
      <td class="cell"></td>
      <td class="cell"></td>
    </tr>
    <tr>
      <td class="cell"></td>
      <td class="cell"></td>
      <td class="cell"></td>
    </tr>
    <tr>
      <td class="cell"></td>
      <td class="cell"></td>
      <td class="cell"></td>
    </tr>
  </table>

  <script>
    // JavaScript 代码
  </script>
</body>

</html>

4. 连接 SSE 和游戏

最后，我们需要使用 JavaScript 连接 SSE 和游戏。

在 "index.html" 文件中，我们可以添加以下 JavaScript 代码来与 SSE 服务器通信：

const source = new EventSource('/stream');

source.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log(data);
};

这将创建一个 SSE 连接，将接收服务器发送的实时数据，并在控制台中打印它们。在此基础上，我们可以使用 JavaScript 代码添加游戏功能。我们将创建一个轮流进行动作的两个玩家，以在井字棋游戏中进行动作。

// javascriptcn.com code example
const PLAYER_ONE = 'X';
const PLAYER_TWO = 'O';

let currentPlayer = PLAYER_ONE;

const cells = document.querySelectorAll('.cell');
cells.forEach((cell) => {
  cell.addEventListener('click', (event) => {
    event.target.textContent = currentPlayer;
    currentPlayer = currentPlayer === PLAYER_ONE ? PLAYER_TWO : PLAYER_ONE;
  });
});

这将为游戏添加功能，允许玩家轮流进行动作，以在游戏中进行动作。

结论

在本文中，我们学习了如何使用 Node.js 和 SSE 来构建实时在线游戏。我们深入了解了 SSE 的工作原理，并创建了一个简单的井字棋游戏来演示如何使用 SSE 进行实时通信。

通过这个例子，我们可以了解如何使用 SSE 在不需要复杂的握手或保持长时间连接的情况下，实现实时通信。强烈建议在自己的项目中使用 SSE，为用户提供实时并快捷的用户体验。

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