随着移动互联网的普及，实时互动游戏越来越受到欢迎。其中，实时问答游戏是一种非常有趣的游戏形式。本文将介绍如何使用 Server-Sent Events 技术实现一个简单的实时问答游戏。
什么是 Server-Sent Events？
Server-Sent Events（简称 SSE）是一种基于 HTTP 协议的服务器推送技术。它允许服务器向客户端发送事件流，客户端可以通过 JavaScript 监听这些事件流并进行相应的处理。
SSE 的优点是实现简单，不需要像 WebSocket 那样复杂的握手协议，可以通过普通的 HTTP 请求和响应实现。同时，SSE 也支持自定义事件类型和数据格式，使得它在实现实时通知、实时数据展示等场景下非常适用。
实现一个简单的实时问答游戏
下面我们将使用 SSE 技术实现一个简单的实时问答游戏。游戏流程如下：
- 服务器随机生成一个数，并将其发送给客户端。
- 客户端收到数后，显示在页面上，并开始倒计时。
- 客户端用户输入一个数，如果与服务器生成的数相等，则答对了，否则答错了。
- 答对或答错后，客户端向服务器发送结果，并等待下一轮游戏开始。
服务器端实现
我们使用 Node.js 来实现服务器端代码。首先，我们需要创建一个 HTTP 服务器，并监听客户端的请求：
const http = require('http');
const server = http.createServer();
server.on('request', (req, res) => {
// TODO: 实现 SSE 事件流
});
server.listen(8080);接着，我们需要实现 SSE 事件流。首先，我们需要设置响应头，告诉客户端我们将发送 SSE 事件流：
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});然后，我们可以使用 setInterval 函数来定时发送事件：
let num = 0;
setInterval(() => {
num = Math.floor(Math.random() * 100);
res.write(`data: ${num}\n\n`);
}, 5000);上述代码中，我们每隔 5 秒钟就生成一个随机数，并将其发送给客户端。注意，我们需要在每个事件后添加一个空行，以表示事件的结束。
最后，我们需要监听客户端的请求，并在客户端关闭连接时结束 SSE 事件流：
req.on('close', () => {
console.log('Client disconnected');
clearInterval(interval);
});完整的服务器端代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - --------------------
-------------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
--- --- - --
----- -------- - -------------- -- -
--- - ------------------------ - -----
---------------- -------------
-- ------
--------------- -- -- -
------------------- ---------------
------------------------
---
---
--------------------客户端实现
客户端使用 HTML 和 JavaScript 来实现。首先，我们需要在 HTML 中添加一个显示数字的元素和一个输入框：
<div id="num"></div> <input type="text" id="guess" />
然后，我们可以使用 JavaScript 代码来监听 SSE 事件流，并将接收到的数据显示在页面上：
const source = new EventSource('/sse');
const numEl = document.getElementById('num');
source.addEventListener('message', (event) => {
const num = parseInt(event.data);
numEl.innerText = num;
});上述代码中，我们使用 EventSource 对象来监听 /sse 路径的 SSE 事件流。当接收到事件时，我们将其中的数字显示在 numEl 元素上。
接着，我们需要监听输入框的输入，并在用户提交答案时向服务器发送结果：
-- -------------------- ---- -------
----- ------- - ---------------------------------
----------------------------------- ------- -- -
-- -------------- --- --- -
----- ----- - ------------------------
----- ------- - ----- --- --------------------------
--------------- -
------- -------
-------- -
--------------- ------------------
--
----- ---------------- ------ ------- --
---
------------- - ---
-
---上述代码中，我们监听 guessEl 元素的 keydown 事件，并在用户按下回车键时获取输入框中的数字。然后，我们向服务器发送一个 POST 请求，将用户的猜测和是否正确的结果发送给服务器。
最后，我们需要在服务器端实现 /guess 路径的处理：
-- -------------------- ---- -------
-------------------- ----- ---- -- -
-- ----------- --- ------ -- ------- --- --------- -
--- ---- - ---
-------------- ------- -- -
---- -- ------
---
------------- -- -- -
----- - ------ ------- - - -----------------
----------------- ------- --------- --------- - --------- - -----------
---
-
---上述代码中，我们判断请求的方法和路径是否为 /guess，如果是，则监听请求的数据，并解析其中的猜测和结果。最后，我们将结果输出到控制台。
完整的客户端代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ---- ------------
-------
------
---- ---------------
------ ----------- ---------- --
--------
----- ------ - --- --------------------
----- ----- - -------------------------------
----- ------- - ---------------------------------
---------------------------------- ------- -- -
----- --- - ---------------------
--------------- - ----
---
----------------------------------- ------- -- -
-- -------------- --- --- -
----- ----- - ------------------------
----- ------- - ----- --- --------------------------
--------------- -
------- -------
-------- -
--------------- ------------------
--
----- ---------------- ------ ------- --
---
------------- - ---
-
---
---------
-------
-------总结
本文介绍了如何使用 Server-Sent Events 技术实现一个简单的实时问答游戏。通过本文的学习，我们可以了解到 SSE 技术的基本原理和实现方式，以及如何在实际项目中应用 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ff8395d10417a222aad58b