Create a real-time sports application using Node.js
PHPz
Release： 2023-09-03 12:41:09
Original
847 people have browsed it
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:
Node.js
Socket.io
MySportsFeeds.com
Preact (like React)
HTM
If you don't have Node.js installed yet, visit its download page now and set it up before continuing.
What is Socket.io?
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.
Example Socket.io Application
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
Copy after login
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");
});
Copy after login
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:
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:
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:
HTTP server started on port 3000
Receive client connection
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);
});
});
Copy after login
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.
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);
// 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;
});
接下来，设置 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);
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.
in conclusion
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!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
