Wie kann man eine Echtzeit-Sportanwendung mit Node.js. erstellen?

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

In dem heutigen Artikel werde ich zeigen, wie man eine Webanwendung erstellt, die Live-Spielergebnisse aus der NHL anzeigt. Die Ergebnisse werden im Verlauf der Spiele automatisch aktualisiert.

Dies ist ein sehr aufregender Artikel für mich, da ich zwei meiner Lieblingsleidenschaften zusammenbringen kann: Entwicklung und Sport.

Die Technologien, die zum Erstellen der Anwendung verwendet werden, sind:

Node.js
Socket.io
MySportsFeed.com

Wenn Sie Node.js nicht installiert haben, besuchen Sie jetzt die Download-Seite und richten Sie sie ein, bevor Sie fortfahren.

Was ist Socket.io?

Socket.io ist eine Technologie, die einen Client mit einem Server verbindet. In diesem Beispiel ist der Client ein Webbrowser und der Server die Anwendung Node.js. Mit dem Server können gleichzeitig mehrere Clients verbunden sein.

Sobald die Verbindung hergestellt wurde, kann der Server Nachrichten an alle Clients oder einen einzelnen Client senden. Im Gegenzug kann der Client eine Nachricht an den Server senden, was eine bidirektionale Echtzeitkommunikation ermöglicht.

Vor Socket.io verwendeten Webanwendungen normalerweise AJAX, und sowohl der Client als auch der Server fragten sich gegenseitig nach Ereignissen ab. Beispielsweise würde alle 10 Sekunden ein AJAX-Aufruf erfolgen, um festzustellen, ob Nachrichten zu verarbeiten sind.

Das Abrufen von Nachrichten verursachte sowohl auf dem Client als auch auf dem Server einen erheblichen Overhead, da ständig nach Nachrichten gesucht wurde, wenn keine vorhanden waren.

Mit Socket.io werden Nachrichten sofort empfangen, ohne nach Nachrichten suchen zu müssen, wodurch sich der Overhead verringert.

Beispielanwendung für Socket.io

Bevor wir die Echtzeit-Sportdaten verwenden, erstellen wir eine Beispielanwendung, um zu demonstrieren, wie Socket.io funktioniert.

Zunächst werde ich eine neue Node.js-Anwendung erstellen. In einem Konsolenfenster navigiere ich zu C:\GitHub\ NodeJS, erstelle einen neuen Ordner für meine Anwendung und erstelle eine neue Anwendung:

1	cd \GitHub\NodeJS
2	mkdir SocketExample
3	cd SocketExample
4	npm init

Ich habe alle Standardeinstellungen verwendet.

Da wir eine Webanwendung erstellen, verwende ich ein NPM-Paket namens Express, um die Einrichtung zu vereinfachen. Installieren Sie es an einer Eingabeaufforderung wie folgt: npm install express --save

Und natürlich müssen wir das Socket.io-Paket installieren: npm install socket.io --save

Beginnen wir mit der Erstellung des Webservers. Erstellen Sie eine neue Datei mit dem Namen index.js und fügen Sie den folgenden Code ein, um den Webserver mit Express zu erstellen:

var app = require('express')();
var 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');
});

Wenn Sie nicht mit Express vertraut sind, enthält das obige Codebeispiel die Express-Bibliothek und erstellt einen neuen HTTP-Server. In diesem Beispiel überwacht der HTTP-Server Port 3000, z. B. http://localhost:3000. Eine Route wird im Stammverzeichnis der Site "/" erstellt. Das Ergebnis der Route gibt eine HTML-Datei zurück: index.html.

Bevor wir die Datei index.html erstellen, beenden wir den Server, indem wir Socket.io einrichten. Fügen Sie Ihrer Datei index.js Folgendes hinzu, um den Socket-Server zu erstellen:

var io = require('socket.io')(http);

io.on('connection', function(socket){
    console.log('Client connection received');
});

Ähnlich wie bei Express beginnt der Code mit dem Importieren der Socket.io-Bibliothek. Dies wird in einer Variablen namens io gespeichert. Als Nächstes wird mithilfe der Variablen io ein Ereignishandler mit der Funktion on erstellt. Das Ereignis, auf das gewartet wird, ist die Verbindung. Dieses Ereignis wird jedes Mal aufgerufen, wenn ein Client eine Verbindung zum Server herstellt.

Lassen Sie uns nun unseren sehr einfachen Client erstellen. Erstellen Sie eine neue Datei mit dem Namen index.html und fügen Sie den folgenden Code ein:

<!doctype html>
<html>
    <head>
		<title>Socket.IO Example</title>
	</head>
	<body>
		<script src="/socket.io/socket.io.js"></script>
		<script>
			var socket = io();
		</script>
	</body>
</html>

Der obige HTML-Code lädt das JavaScript des Socket.io-Clients und initialisiert eine Verbindung zum Server. Um das Beispiel anzuzeigen, starten Sie Ihre Knotenanwendung: node index.js

Navigieren Sie dann in Ihrem Browser zu http://localhost:3000. Auf der Seite wird nichts angezeigt. Wenn Sie sich jedoch die Konsole ansehen, auf der die Knotenanwendung ausgeführt wird, werden zwei Nachrichten protokolliert:

Der HTTP-Server wurde an Port 3000 gestartet
Client-Verbindung empfangen

Nachdem wir eine erfolgreiche Socket-Verbindung haben, können wir sie verwenden. Beginnen wir mit dem Senden einer Nachricht vom Server an den Client. Wenn der Client die Nachricht empfängt, kann er eine Antwort an den Server zurücksenden.

Schauen wir uns die abgekürzte Datei index.js an:

io.on('connection', function(socket){
    console.log('Client connection received');
	
	socket.emit('sendToClient', { hello: 'world' });
	
	socket.on('receivedFromClient', function (data) {
		console.log(data);
	});
});

Die vorherige io.on-Funktion wurde aktualisiert und enthält nun einige neue Codezeilen. Der erste, socket.emit, sendet die Nachricht an den Client. Der sendToClient ist der Name des Ereignisses. Durch Benennen von Ereignissen können Sie verschiedene Arten von Nachrichten senden, damit der Client sie unterschiedlich interpretieren kann. Die zweite Ergänzung ist die Datei socket.on, die auch einen Ereignisnamen enthält: receiveFromClient. Dadurch wird eine Funktion erstellt, die Daten vom Client akzeptiert. In diesem Fall werden die Daten im Konsolenfenster protokolliert.

Damit sind die serverseitigen Änderungen abgeschlossen. Es kann jetzt Daten von allen verbundenen Clients senden und empfangen.

Vervollständigen Sie dieses Beispiel, indem Sie den Client aktualisieren, um das sendToClient-Ereignis zu empfangen. Wenn es das Ereignis empfängt, kann es mit dem receivedFromClient-Ereignis auf den Server zurück antworten.

Dies wird im JavaScript-Teil des HTML-Codes erreicht. In der Datei index.html habe ich das JavaScript also wie folgt aktualisiert:

var socket = io();

socket.on('sendToClient', function (data) {
    console.log(data);
	
	socket.emit('receivedFromClient', { my: 'data' });
});

Unter Verwendung der instanziierten Socket-Variablen haben wir auf dem Server eine sehr ähnliche Logik mit einer socket.on-Funktion. Für den Client hört er das sendToClient-Ereignis ab. Sobald der Client verbunden ist, sendet der Server diese Nachricht. Wenn der Client es empfängt, wird es im Browser an der Konsole protokolliert. Der Client verwendet dann dasselbe socket.emit, mit dem der Server das ursprüngliche Ereignis gesendet hat. In diesem Fall sendet der Client das Ereignis receiveFromClient an den Server zurück. Wenn der Server die Nachricht empfängt, wird sie im Konsolenfenster protokolliert.

Probieren Sie es aus. Führen Sie zunächst in einer Konsole Ihre Knotenanwendung aus: node index.js. Laden Sie dann http://localhost:3000 in Ihren Browser.

Überprüfen Sie die Webbrowser-Konsole und Sie sollten die folgenden protokollierten JSON-Daten sehen: {hello: "world"}

In der Eingabeaufforderung, in der die Knotenanwendung ausgeführt wird, sollte Folgendes angezeigt werden:

1	HTTP server started on port 3000
2	Client connection received
3	{ my: 'data' }

Sowohl der Client als auch der Server können die empfangenen JSON-Daten verwenden, um bestimmte Aufgaben auszuführen. Wir werden mehr darüber erfahren, sobald wir uns mit den Echtzeit-Sportdaten verbinden.

Sportdaten

Nachdem wir das Senden und Empfangen von Daten zum und vom Client und Server beherrschen, kann dies genutzt werden, um Echtzeit-Updates bereitzustellen. Ich habe mich für Sportdaten entschieden, obwohl die gleiche Theorie nicht auf Sport beschränkt ist. Bevor ich mit diesem Projekt anfing, habe ich verschiedene Sportdaten recherchiert. Die, für die ich mich entschieden habe, weil sie kostenlose Entwicklerkonten anbieten, war MySportsFeeds (ich bin in keiner Weise mit ihnen verbunden). Um auf die Echtzeitdaten zuzugreifen, habe ich mich für ein Konto angemeldet und dann eine kleine Spende geleistet. Spenden beginnen bei 1 US-Dollar, damit die Daten alle 10 Minuten aktualisiert werden. Dies ist gut für das Beispiel.

Sobald Ihr Konto eingerichtet ist, können Sie mit dem Einrichten des Zugriffs auf die API fortfahren. Um dies zu unterstützen, werde ich das NPM-Paket verwenden: npm install mysportsfeeds-node --save

Nach der Installation des Pakets können API-Aufrufe wie folgt ausgeführt werden:

var MySportsFeeds = require("mysportsfeeds-node");

var msf = new MySportsFeeds("1.2", true);
msf.authenticate("********", "*********");

var 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
});

Stellen Sie im obigen Beispiel sicher, dass Sie den Aufruf der Authentifizierungsfunktion durch Ihren Benutzernamen und Ihr Kennwort ersetzen.

Der folgende Code führt einen API-Aufruf aus, um die NHL-Anzeigetafel für heute abzurufen. Die fordate-Variable gibt heute an. Ich habe außerdem force auf true gesetzt, damit immer eine Antwort zurückgegeben wird, auch wenn sich die Daten nicht geändert haben.

Mit dem aktuellen Setup werden die Ergebnisse des API-Aufrufs in eine Textdatei geschrieben. Im letzten Beispiel wird dies geändert. Zu Demonstrationszwecken kann die Ergebnisdatei jedoch in einem Texteditor überprüft werden, um den Inhalt der Antwort zu verstehen. Die Ergebnisse enthalten ein Anzeigetafelobjekt. Dieses Objekt enthält ein Array namens gameScore. Dieses Objekt speichert das Ergebnis jedes Spiels. Jedes Objekt enthält ein untergeordnetes Objekt namens game. Dieses Objekt enthält Informationen darüber, wer spielt.

Außerhalb des Spielobjekts gibt es eine Handvoll Variablen, die den aktuellen Status des Spiels anzeigen. Die Daten ändern sich je nach Spielstatus. Wenn das Spiel beispielsweise noch nicht gestartet wurde, gibt es nur wenige Variablen, die uns mitteilen, dass das Spiel nicht ausgeführt wird und noch nicht gestartet wurde.

Während des Spiels werden zusätzliche Daten über die Punktzahl, den Zeitraum des Spiels und die verbleibende Zeit bereitgestellt. Wir werden dies in Aktion sehen, wenn wir zum HTML gelangen, um das Spiel im nächsten Abschnitt zu zeigen.

Echtzeit-Updates

Wir haben alle Teile des Puzzles, also ist es jetzt an der Zeit, das Puzzle zusammenzusetzen, um das endgültige Bild zu enthüllen. Derzeit unterstützt MySportsFeeds nur begrenzt Daten an uns, sodass wir die Daten von ihnen abfragen müssen. Glücklicherweise wissen wir, dass sich die Daten nur einmal alle 10 Minuten ändern, sodass wir keinen zusätzlichen Aufwand verursachen müssen, indem wir zu häufig nach Änderungen suchen. Sobald wir die Daten von ihnen abgefragt haben, können wir diese Updates vom Server an alle verbundenen Clients senden.

Um die Abfrage durchzuführen, werde ich die JavaScript-Funktion setInterval verwenden, um die API (in meinem Fall) alle 10 Minuten aufzurufen, um nach Updates zu suchen. Wenn die Daten empfangen werden, wird ein Ereignis an alle verbundenen Clients gesendet. Wenn die Kunden das Ereignis erhalten, werden die Spielergebnisse im Webbrowser mit JavaScript aktualisiert.

MySportsFeeds wird auch beim ersten Start der Knotenanwendung aufgerufen. Diese Daten werden für alle Clients verwendet, die vor dem ersten 10-Minuten-Intervall eine Verbindung herstellen. Dies wird in einer globalen Variablen gespeichert. Dieselbe globale Variable wird im Rahmen der Intervallabfrage aktualisiert. Dadurch wird sichergestellt, dass neue Clients, die nach der Abfrage eine Verbindung herstellen, über die neuesten Daten verfügen.

Um die Code-Sauberkeit in der Hauptdatei index.js zu verbessern, habe ich eine neue Datei mit dem Namen data.js erstellt. Diese Datei enthält eine exportierte Funktion (verfügbar in der Datei index.js), die den vorherigen Aufruf der MySportsFeeds-API ausführt. Hier ist der vollständige Inhalt dieser Datei:

var MySportsFeeds = require("mysportsfeeds-node");

var msf = new MySportsFeeds("1.2", true, null);
msf.authenticate("*******", "******");

var 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
		});

};

Eine getData-Funktion wird exportiert und gibt das Ergebnis des Aufrufs zurück. In diesem Fall handelt es sich um ein Versprechen, das in der Hauptanwendung aufgelöst wird.

Schauen wir uns nun den endgültigen Inhalt der Datei index.js an:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var data = require('./data.js');

// Global variable to store the latest NHL results
var 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);

Die ersten sieben Codezeilen oben instanziieren die erforderlichen Bibliotheken und die globale Variable latestData. Die endgültige Liste der verwendeten Bibliotheken lautet: Express, mit Express erstellter HTTP-Server, Socket.io und die oben erstellte Datei data.js.

Nachdem die erforderlichen Vorkehrungen getroffen wurden, füllt die Anwendung die latestData für Clients, die beim ersten Start des Servers eine Verbindung herstellen:

// Global variable to store the latest NHL results
var latestData;

// Load the NHL data for when client's first connect
// This will be updated every 10 minutes
data.getData().then((result) => { 
    latestData = result;
});

In den nächsten Zeilen wird eine Route für die Stammseite der Website (http://localhost:3000/) eingerichtet und der HTTP-Server gestartet, um Port 3000 abzuhören.

Als nächstes wird Socket.io eingerichtet, um nach Verbindungen zu suchen. Wenn eine neue Verbindung empfangen wird, sendet der Server ein Ereignis namens data mit dem Inhalt der Variablen latestData aus.

Und schließlich erstellt der letzte Codeabschnitt das Abfrageintervall. Wenn das Intervall auftritt, wird die Variable latestData mit den Ergebnissen des API-Aufrufs aktualisiert. Diese Daten senden dann das gleiche Datenereignis an alle Clients.

// 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);

Möglicherweise stellen Sie fest, dass der Client beim Herstellen einer Verbindung und beim Ausgeben eines Ereignisses das Ereignis mit der Socket-Variablen ausgibt. Dieser Ansatz sendet das Ereignis nur an diesen verbundenen Client. Innerhalb des Intervalls wird das globale io verwendet, um das Ereignis auszusenden. Dadurch wird das Ereignis an alle Clients gesendet.

Damit ist der Server fertig. Lassen Sie uns am Client-Frontend arbeiten. In einem früheren Beispiel habe ich eine grundlegende index.html-Datei erstellt, in der die Clientverbindung eingerichtet wurde, mit der Ereignisse vom Server protokolliert und zurückgesendet werden. Ich werde diese Datei erweitern, um das fertige Beispiel zu enthalten.

Da der Server uns ein JSON-Objekt sendet, werde ich jQuery verwenden und eine jQuery-Erweiterung namens JsRender nutzen. Dies ist eine Vorlagenbibliothek. Dadurch kann ich eine Vorlage mit HTML erstellen, mit der der Inhalt jedes NHL-Spiels auf benutzerfreundliche und konsistente Weise angezeigt wird. Gleich sehen Sie die Leistungsfähigkeit dieser Bibliothek. Der endgültige Code besteht aus mehr als 40 Codezeilen, daher werde ich ihn in kleinere Teile aufteilen und am Ende den vollständigen HTML-Code zusammen anzeigen.

In diesem ersten Teil wird die Vorlage erstellt, mit der die Spieldaten angezeigt werden:

<script id="gameTemplate" type="text/x-jsrender">
<div class="game">
    <div>
		{{:game.awayTeam.City}} {{:game.awayTeam.Name}} at {{:game.homeTeam.City}} {{:game.homeTeam.Name}}
	</div>
	<div>
		{{if isUnplayed == "true" }}
		
		Game starts at {{:game.time}}
		
		{{else isCompleted == "false"}}
		
		<div>Current Score: {{:awayScore}} - {{:homeScore}}</div>
		
		<div>
			{{if currentIntermission}}
				{{:~ordinal_suffix_of(currentIntermission)}} Intermission
			{{else currentPeriod}}
				{{:~ordinal_suffix_of(currentPeriod)}}<br/>
				{{:~time_left(currentPeriodSecondsRemaining)}}
			{{else}}
				1st
			{{/if}}
		</div>
		
		{{else}}
		
		Final Score: {{:awayScore}} - {{:homeScore}}
		
		{{/if}}
	</div>
</div>
</script>

Die Vorlage wird mithilfe eines Skript-Tags definiert. Es enthält die ID der Vorlage und einen speziellen Skripttyp namens text/x-jsrender. Die Vorlage definiert ein Container-Div für jedes Spiel, das ein Klassenspiel enthält, um ein grundlegendes Styling anzuwenden. In diesem Div beginnt das Templating.

In der nächsten Division werden die Auswärts- und Heimmannschaft angezeigt. Dies erfolgt durch Verketten des Stadt- und Teamnamens aus dem Spielobjekt aus den MySportsFeed-Daten.

Mit {{:game.awayTeam.City}} definiere ich ein Objekt, das beim Rendern der Vorlage durch einen physischen Wert ersetzt wird. Diese Syntax wird von der JsRender-Bibliothek definiert.

Sobald die Teams angezeigt werden, führt der nächste Codeabschnitt eine bedingte Logik aus. Wenn das Spiel unPlayed ist, wird ein String ausgegeben, dass das Spiel um {{:game.time}} beginnt.

Wenn das Spiel nicht beendet ist, wird die aktuelle Punktzahl angezeigt: Current Score: {{:awayScore}} - {{:homeScore}}. Und schließlich eine knifflige kleine Logik, um festzustellen, in welcher Zeit sich das Hockeyspiel befindet oder ob es sich in einer Pause befindet.

Wenn die Variable currentIntermission in den Ergebnissen angegeben ist, verwende ich eine von mir definierte Funktion namens ordinal_suffix_of, die die Periodennummer in Folgendes umwandelt: 1. (2., 3. usw.) Pause.

Wenn es nicht in der Pause ist, suche ich nach dem currentPeriod-Wert. Dies verwendet auch das ordinal_suffix_of, um anzuzeigen, dass sich das Spiel in der 1. (2., 3. usw.) Periode befindet.

Darunter wird eine andere von mir definierte Funktion namens time_left verwendet, um die Anzahl der verbleibenden Sekunden in die Anzahl der verbleibenden Minuten und Sekunden in der Periode umzuwandeln. Zum Beispiel: 10:12.

Der letzte Teil des Codes zeigt das Endergebnis an, da wir wissen, dass das Spiel abgeschlossen ist.

Hier ist ein Beispiel dafür, wie es aussieht, wenn es eine Mischung aus fertigen Spielen, laufenden Spielen und Spielen gibt, die noch nicht gestartet wurden (ich bin kein sehr guter Designer, also sieht es so aus, wie Sie es von einem Entwickler erwarten würden ihre eigene Benutzeroberfläche).

Als nächstes folgt ein Teil von JavaScript, der den Socket erstellt, die Hilfsfunktionen ordinal_suffix_of und time_left sowie eine Variable, die auf die erstellte jQuery-Vorlage verweist.

<script>
    var socket = io();
	var tmpl = $.templates("#gameTemplate");
	
	var helpers = {
		ordinal_suffix_of: function(i) {
			var j = i % 10,
			k = i % 100;
			if (j == 1 && k != 11) {
				return i + "st";
			}
			if (j == 2 && k != 12) {
				return i + "nd";
			}
			if (j == 3 && k != 13) {
				return i + "rd";
			}
			return i + "th";
		},
		time_left: function(time) {
			var minutes = Math.floor(time / 60);
			var seconds = time - minutes * 60;
			
			return minutes + ':' + ('0' + seconds).slice(-2);
		}
	};
</script>

Der letzte Code ist der Code zum Empfangen des Socket-Ereignisses und zum Rendern der Vorlage:

socket.on('data', function (data) {
    console.log(data);
	
	$('#data').html(tmpl.render(data.scoreboard.gameScore, helpers));
});

Ich habe einen Platzhalter div mit der ID der Daten. Das Ergebnis des Template-Renderings (tmpl.render) schreibt den HTML-Code in diesen Container. Was wirklich toll ist, ist, dass die JsRender-Bibliothek ein Array von Daten akzeptieren kann, in diesem Fall data.scoreboard.gameScore, das jedes Element im Array durchläuft und ein Spiel pro Element erstellt.

Hier ist das endgültige HTML und JavaScript zusammen:

<!doctype html>
<html>
    <head>
		<title>Socket.IO Example</title>
	</head>
	<body>
		<div id="data">
		
		</div>
	
<script id="gameTemplate" type="text/x-jsrender">
<div class="game">
	<div>
		{{:game.awayTeam.City}} {{:game.awayTeam.Name}} at {{:game.homeTeam.City}} {{:game.homeTeam.Name}}
	</div>
	<div>
		{{if isUnplayed == "true" }}
		
		Game starts at {{:game.time}}
		
		{{else isCompleted == "false"}}
		
		<div>Current Score: {{:awayScore}} - {{:homeScore}}</div>
		
		<div>
			{{if currentIntermission}}
				{{:~ordinal_suffix_of(currentIntermission)}} Intermission
			{{else currentPeriod}}
				{{:~ordinal_suffix_of(currentPeriod)}}<br/>
				{{:~time_left(currentPeriodSecondsRemaining)}}
			{{else}}
				1st
			{{/if}}
		</div>
		
		{{else}}
		
		Final Score: {{:awayScore}} - {{:homeScore}}
		
		{{/if}}
	</div>
</div>
</script>
	
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.90/jsrender.min.js"></script>
		<script src="/socket.io/socket.io.js"></script>
		<script>
			var socket = io();
			
			var helpers = {
				ordinal_suffix_of: function(i) {
					var j = i % 10,
					k = i % 100;
					if (j == 1 && k != 11) {
						return i + "st";
					}
					if (j == 2 && k != 12) {
						return i + "nd";
					}
					if (j == 3 && k != 13) {
						return i + "rd";
					}
					return i + "th";
				},
				time_left: function(time) {
					var minutes = Math.floor(time / 60);
					var seconds = time - minutes * 60;
					
					return minutes + ':' + ('0' + seconds).slice(-2);
				}
			};
			
			var tmpl = $.templates("#gameTemplate");
			
			socket.on('data', function (data) {
				console.log(data);
				
				$('#data').html(tmpl.render(data.scoreboard.gameScore, helpers));
			});
		</script>
		
		<style>
		.game {
			border: 1px solid #000;
			float: left;
			margin: 1%;
			padding: 1em;
			width: 25%;
		}
		</style>
	</body>
</html>

Starten Sie die Node-Anwendung und navigieren Sie zu http://localhost:3000, um die Ergebnisse selbst zu sehen!

Alle X Minuten sendet der Server ein Ereignis an den Client. Der Client zeichnet die Spielelemente mit den aktualisierten Daten neu. Wenn Sie also die Website geöffnet lassen und sie regelmäßig ansehen, werden die Spieldaten aktualisiert, wenn Spiele gerade ausgeführt werden.

Abschluss

Das Endprodukt verwendet Socket.io, um einen Server zu erstellen, mit dem Clients eine Verbindung herstellen. Der Server ruft Daten ab und sendet sie an den Client. Wenn der Client die Daten empfängt, kann er die Anzeige nahtlos aktualisieren. Dies reduziert die Belastung des Servers, da der Client nur dann Arbeit ausführt, wenn er ein Ereignis vom Server empfängt.

Steckdosen sind nicht auf eine Richtung beschränkt. Der Client kann auch Nachrichten an den Server senden. Wenn der Server die Nachricht empfängt, kann er eine Verarbeitung durchführen.

Chat-Anwendungen funktionieren normalerweise so. Der Server empfängt eine Nachricht vom Client und sendet sie dann an alle verbundenen Clients, um anzuzeigen, dass jemand eine neue Nachricht gesendet hat.

Hoffentlich hat Ihnen dieser Artikel gefallen, denn ich hatte viel Spaß beim Erstellen dieser Echtzeit-Sportanwendung für eine meiner Lieblingssportarten!