In today's article, I'll demonstrate how to make a web application that displays NHL live game scores. Scores will update automatically as the game progresses.
This is a very exciting article for me because it gives me the opportunity to combine two of my favorite hobbies: development and sports.
The technology that will be used to create the application is:
If you don't have Node.js installed yet, visit its download page now and set it up before continuing.
Socket.io is a technology that uses WebSocket to connect clients to servers. In this example, the client is a web browser and the server is a Node.js application. A server can have multiple clients connected to it at any given time.
Once the connection is established, the server can send messages to all clients or to a single client. In return, the client can send messages to the server, enabling two-way real-time communication.
Before Socket.io, web applications typically used AJAX, with both the client and server polling each other for events. For example, an AJAX call occurs every 10 seconds to see if there are any messages that need to be processed.
Polling for messages creates a lot of overhead for both the client and the server because it is constantly looking for messages when there are none.
Using Socket.io, messages can be received instantly without the need to look for messages, thus reducing overhead.
Before we work with real-time motion data, let's create a sample application to demonstrate how Socket.io works.
First, I will create a new Node.js application. Navigate to the folder where you want the project, create a new folder for the application, then create a new application:
cd ~/Documents/Nodejs mkdir SocketExample cd SocketExample npm init
I used all default settings.
Because we are making a web application, I will use an NPM package called Express to simplify the setup. In the command prompt, install as follows: npm installexpress
--save
Of course, we need to install the Socket.io package: npm install
socket.io --save
Let's start by creating the web server. Create a new file called index.js and put the following code into it to create a web server using Express:
const app = require("express")();
const http = require("http").Server(app);
app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html");
});
http.listen(3000, function () {
console.log("HTTP server started on port 3000");
});
If you are new to Express, the code example above includes the Express library and creates a new HTTP server. In this example, the HTTP server is listening on port 3000, such as https://localhost:3000. Routes are created at the site's root directory "/". The routing result returns an HTML file: index.html.
Before creating the index.html file, let's finish the server by setting up Socket.io. Append the following to your index.js file to create a Socket server:
const io = require('socket.io')(http);
io.on('connection', function(socket){
console.log('Client connection received');
});
Similar to Express, the code first imports the Socket.io library. It is stored in a variable named io. Next, use the io variable to create an event handler via the on function. The event being listened to is connection. This event is called every time a client connects to the server.
Now let's create our very basic client. Create a new file called index.html and put the following code in it:
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO Example</title>
</head>
<body>
<script src="/socket.io/socket.io.js"></script>
<script type="module">
const socket = io();
</script>
</body>
</html>
The HTML above loads the Socket.io client JavaScript and initializes the connection to the server. To see an example, start the Node application: node index.js
Then, navigate to http://localhost:3000 in your browser. Nothing will appear on the page; however, if you look at the console running the Node application, two messages will be logged:
Now that we have successfully established the socket connection, let's use it. Let's first send a message from the server to the client. Then, when the client receives the message, it can send a response back to the server.
Let’s take a look at the abbreviated index.js file:
io.on("connection", function (socket) {
console.log("Client connection received");
socket.emit("sendToClient", { hello: "world" });
socket.on("receivedFromClient", function (data) {
console.log(data);
});
});
The previous io.on function has been updated to include several new lines of code. The first socket.emit sends the message to the client. sendToClient is the name of the event. By naming events, you can send different types of messages so that clients can interpret them in different ways. The second addition is socket.on, which also contains an event name: receivedFromClient. This will create a function that accepts data from the client. In this case, data will be logged to the console window.
服务器端修改完成；它现在可以从任何连接的客户端发送和接收数据。
让我们通过更新客户端以接收 sendToClient 事件来完成此示例。当它接收到该事件时，它可以将 receivedFromClient 事件响应回服务器。
这是在 HTML 的 JavaScript 部分中完成的，因此在 index.html 文件中，我更新了 JavaScript，如下所示：
const socket = io();
socket.on('sendToClient', function (data) {
console.log(data);
socket.emit('receivedFromClient', { my: 'data' });
});
使用实例化的套接字变量，我们在服务器上具有与 socket.on 函数非常相似的逻辑。对于客户端，它正在监听 sendToClient 事件。一旦客户端连接，服务器就会发送此消息。当客户端收到它时，它会记录到浏览器中的控制台。然后，客户端使用与服务器发送原始事件相同的 socket.emit 。在本例中，客户端将 receivedFromClient 事件发送回服务器。当服务器收到消息时，会将其记录到控制台窗口。
亲自尝试一下。首先，在控制台中运行 Node 应用程序：node index.js。然后在浏览器中加载 http://localhost:3000。
检查 Web 浏览器控制台，您应该会看到记录以下 JSON 数据： {hello:
“世界”}
然后，在运行 Node 应用程序的命令提示符中，您应该看到以下内容：
HTTP server started on port 3000
Client connection received
{ my: 'data' }
客户端和服务器都可以使用接收到的 JSON 数据来执行特定任务。一旦我们连接到实时体育数据，我们将了解更多信息。
现在我们已经掌握了如何向客户端和服务器发送和接收数据，可以利用它来提供实时更新。我选择使用体育数据，尽管同样的理论并不限于体育。在开始这个项目之前，我研究了不同的运动数据。我选择的是 MySportsFeeds，因为他们提供免费的开发者帐户（我与他们没有任何关系）。为了访问实时数据，我注册了一个帐户，然后做了一笔小额捐款。捐款起价为 1 美元，数据每 10 分钟更新一次。这对于示例来说是有好处的。
您的帐户设置完毕后，您就可以继续设置对其 API 的访问权限。为了帮助实现这一点，我将使用他们的 NPM 包： npm install
mysportsfeeds-node --save
安装包后，可以按如下方式进行 API 调用：
const MySportsFeeds = require("mysportsfeeds-node");
const msf = new MySportsFeeds("1.2", true);
msf.authenticate("********", "*********");
const today = new Date();
msf.getData('nhl', '2017-2018-regular', 'scoreboard', 'json', {
fordate: today.getFullYear() +
('0' + parseInt(today.getMonth() + 1)).slice(-2) +
('0' + today.getDate()).slice(-2),
force: true
});
在上面的示例中，请务必将对验证函数的调用替换为您的用户名和密码。
以下代码执行 API 调用以获取今天的 NHL 记分牌。 fordate 变量是今天指定的。我还将 force 设置为 true ，以便始终返回响应，即使数据没有更改。
使用当前设置，API 调用的结果将写入文本文件。在最后一个例子中，这将被改变；但是，出于演示目的，可以在文本编辑器中查看结果文件以了解响应的内容。结果包含一个记分板对象。该对象包含一个名为 gameScore 的数组。该对象存储每场比赛的结果。每个对象都包含一个名为 game 的子对象。该对象提供有关谁正在玩的信息。
在游戏对象之外，还有一些变量提供游戏的当前状态。数据根据游戏状态而变化。例如，当游戏还没有开始时，只有几个变量告诉我们游戏没有进行并且还没有开始。
当游戏进行时，会提供有关得分、游戏进行的时间段以及剩余时间的附加数据。当我们进入下一节中显示游戏的 HTML 时，我们将看到这一点。
我们已经掌握了拼图的所有碎片，所以现在是时候将拼图拼凑起来以揭示最终图片了。目前，MySportsFeeds 对向我们推送数据的支持有限，因此我们必须从他们那里轮询数据。幸运的是，我们知道数据每 10 分钟只更改一次，因此我们不需要通过过于频繁地轮询更改来增加开销。一旦我们轮询它们的数据，我们就可以将这些更新从服务器推送到所有连接的客户端。
为了执行轮询，我将使用 JavaScript setInterval 函数每 10 分钟调用一次 API（在我的例子中）以查找更新。收到数据后，会将一个事件发送到所有连接的客户端。当客户端收到事件时，游戏分数将在网络浏览器中使用 JavaScript 进行更新。
当 Node 应用程序首次启动时，MySportsFeeds 也会被调用。此数据将用于在第一个 10 分钟间隔之前连接的任何客户端。这存储在全局变量中。这个相同的全局变量作为间隔轮询的一部分进行更新。这将确保当任何新客户端在轮询后连接时，他们将拥有最新的数据。
为了帮助主 index.js 文件中的一些代码整洁，我创建了一个名为 data.js 的新文件。该文件将包含一个导出的函数（可在 index.js 文件中找到），该函数执行先前对 MySportsFeeds API 的调用。以下是该文件的完整内容：
const MySportsFeeds = require("mysportsfeeds-node");
const msf = new MySportsFeeds("1.2", true, null);
msf.authenticate("*******", "******");
const today = new Date();
exports.getData = function () {
return msf.getData("nhl", "2017-2018-regular", "scoreboard", "json", {
fordate:
today.getFullYear() +
("0" + parseInt(today.getMonth() + 1)).slice(-2) +
("0" + today.getDate()).slice(-2),
force: true,
});
};
导出 getData 函数并返回调用结果，在本例中是一个将在主应用程序中解析的 Promise。
现在让我们看看index.js文件的最终内容：
const app = require("express")();
const http = require("http").Server(app);
const io = require("socket.io")(http);
const data = require("./data.js");
// Global variable to store the latest NHL results
let latestData;
// Load the NHL data for when client's first connect
// This will be updated every 10 minutes
data.getData().then((result) => {
latestData = result;
});
app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html");
});
http.listen(3000, function () {
console.log("HTTP server started on port 3000");
});
io.on("connection", function (socket) {
// when clients connect, send the latest data
socket.emit("data", latestData);
});
// refresh data
setInterval(function () {
data.getData().then((result) => {
// Update latest results for when new client's connect
latestData = result;
// send it to all connected clients
io.emit("data", result);
console.log("Last updated: " + new Date());
});
}, 300000);
上面的前七行代码实例化了所需的库和全局 latestData 变量。最终使用的库列表是：Express、HTTP、Socket.io 以及刚刚创建的上述 data.js 文件。
完成必要的处理后，应用程序会为服务器首次启动时将连接的客户端填充 latestData：
// Global variable to store the latest NHL results
const latestData;
// Load the NHL data for when client's first connect
// This will be updated every 10 minutes
data.getData().then((result) => {
latestData = result;
});
接下来的几行设置了网站根页面（http://localhost:3000/）的路由，并启动HTTP服务器监听3000端口。
接下来，设置 Socket.io 来查找连接。当收到新连接时，服务器会发出一个名为 data 的事件，其中包含 latestData 变量的内容。
最后，最后一段代码创建轮询间隔。当间隔发生时，latestData 变量将使用 API 调用的结果进行更新。然后，该数据向所有客户端发出相同的数据事件。
// refresh data
setInterval(function() {
data.getData().then((result) => {
// Update latest results for when new client's connect
latestData = result;
// send it to all connected clients
io.emit('data', result);
console.log('Last updated: ' + new Date());
});
}, 300000);
您可能会注意到，当客户端连接并发出事件时，它会使用套接字变量发出事件。此方法将仅将事件发送到连接的客户端。在该间隔内，全局 io 用于发出事件。这会将事件发送给所有客户端。
服务器就完成了。让我们在客户端前端工作。在前面的示例中，我创建了一个基本的 index.html 文件，该文件设置客户端连接，该连接将记录来自服务器的事件并将事件发回。我将扩展该文件以包含已完成的示例。
因为服务器正在向我们发送一个 JSON 对象，所以我将使用 Preact，它就像 React 的优化版本（如果您不熟悉 React，那也没关系）。此外，我将使用 HTM。 HTM 将允许我使用像 React 的 JSX 这样的语法，而无需构建工具。此外，它还包括与 Preact 的集成。
首先，我需要创建一个 id 为 games 的 div
<div id="games"></div>
然后，我将创建模板。以下是模板的完整脚本（您需要将其放入主要 HTML 脚本中）：
import { html, render } from "https://esm.sh/htm/preact";
import { signal } from "https://esm.sh/@preact/signals";
const games = signal([]);
const socket = io();
socket.on("data", function (data) {
games.value = data;
});
function ordinalSuffix(input) {
const tenRemainder = input % 10,
hundredRemainer = input % 100;
if (tenRemainder == 1 && hundredRemainer != 11) {
return input + "st";
}
if (tenRemainder == 2 && hundredRemainer != 12) {
return input + "nd";
}
if (tenRemainder == 3 && hundredRemainer != 13) {
return input + "rd";
}
return input + "th";
}
function timeLeft(time) {
const minutes = Math.floor(time / 60);
const seconds = time - minutes * 60;
return minutes + ":" + ("0" + seconds).slice(-2);
}
function stats() {
return html`${games.value.forEach(
(game) =>
html`<div class="game">
<div>
${game.game.awayTeam.City} ${game.game.awayTeam.Name} at at
${game.game.homeTeam.City} ${game.game.homeTeam.Name}
</div>
<div>
${(() => {
if (game.isUnplayed) {
return `Game Starts at ${game.game.time}`;
} else if (game.isCompleted === "false") {
return html`<div>
Current Score: ${game.awayScore} - ${game.homeScore}
</div>
<div>
${(() => {
if (game.currentIntermission) {
return `${ordinalPrefix(
game.currentIntermission
)} Intermission`;
} else if (game.currentPeriod) {
return html`${ordinalPrefix(
game.currentPeriod
)}<br />${timeLeft(
game.currentPeriodSecondsRemaining
)}`;
} else {
return `1st`;
}
})()}
</div>`;
} else {
return `Final Score: ${game.awayScore} - ${game.homeScore}`;
}
})()}
</div>
</div>`
)}`;
}
render(stats, document.getElementById("games"));
这已经很多了！让我们一步步来看看。首先，我们导入 Preact、HTM 和称为 Preact Signals 的东西。我们稍后会详细讨论这一点。
接下来，我们建立 WebSocket 连接。此代码与我们之前的代码相同，除了事件名称和我们对数据执行的操作不同之外。您可能会注意到我们分配数据的对象是一个信号。这是在 Preact 中管理状态的快速方法。您可以在 Preact Signals 页面上阅读更多相关信息。
接下来，我们有一些辅助函数，稍后我们将在实际模板中使用它们。之后，我们就有了模板组件。首先，我们迭代所有游戏并返回每个游戏的标记。
标记的第一部分显示团队。然后，我们进入游戏数据的主要部分。
在下一节中，我们首先检查游戏是否已经开始。如果没有，我们将显示比赛何时开始。如果已经开始，我们会显示当前分数，以及当前时段和剩余时间。这是使用辅助函数的地方。
最后，如果比赛结束，我们只显示最终得分。脚本的最后一行只是在我们之前创建的 div 中渲染模板。
下面是混合了已完成的游戏、正在进行的游戏和尚未开始的游戏时的情况的示例。我不是一个很好的设计师，所以当开发人员制作自己的用户界面时，它看起来就像你所期望的那样。如果需要，您可以创建自己的 CSS 样式。
这是 HTML 和 JavaScript 的结合体。
Socket.IO Example
<div id="games"></div>
启动 Node 应用程序并浏览到 http://localhost:3000 亲自查看结果！
Every X minutes, the server will send an event to the client. The client will redraw the game elements using the updated data. So, when you keep the website open and check it regularly, you will see the game data refresh while the game is in progress.
The final product uses Socket.io to create a server to which the client connects. The server gets the data and sends it to the client. When the client receives data, the display can be updated seamlessly. This reduces the load on the server because the client only performs work when it receives events from the server.
Sockets are not limited to one direction; the client can also send messages to the server. When the server receives the message, it can perform some processing.
Chat applications usually work this way. The server will receive the message from the client and then broadcast it to all connected clients to show that someone has sent a new message.
I hope you enjoyed this post because I created this live sports app for one of my favorite sports!
This article has been updated with a contribution from Jacob Jackson. Jacob is a web developer, technical writer, freelancer, and open source contributor.
The above is the detailed content of Create a real-time sports application using Node.js. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
