Nodejs implementiert die gemeinsame Nutzung kleiner Spiele, damit mehrere Personen gleichzeitig die Maus online bewegen können_node.js

Kürzlich habe ich aufgrund von Projektanforderungen die WebSocket-Implementierung von NodeJS, socket.io, untersucht, ein weit verbreitetes Framework für WebSocket in NodeJS-Hintergrundanwendungen.

Vorbereitung

1. Installieren Sie socket.io, verwenden Sie den Befehl npm install socket.io
2. Für Windows-Systeme ist eine VC-Kompilierungsumgebung erforderlich, da bei der Installation von socket.io der VC-Code kompiliert wird

Grundprinzipien des Spiels

1. Der Server überwacht die Verbindung des Clients
2. Wenn die Clientverbindung erfolgreich ist, binden Sie die Seite an das Mausbewegungsereignis und verarbeiten Sie das Ereignis, um die aktuellen Koordinaten an den Server
zu senden 3. Der Server speichert ein globales Koordinatenobjekt und verwendet die eindeutige Nummer des Clients als Schlüsselwert
4. Wenn eine neue Verbindung zustande kommt, senden Sie die Koordinaten an andere Clients
5. Wenn der Client die Verbindung trennt, löscht der Server seine Koordinateninformationen und sendet sie an andere Clients

Beginnen Sie mit der Implementierung des Servercodes

Wenn scoket.io die Serverüberwachung einrichtet, muss es sich auf eine http-Verbindung verlassen, um das Upgrade-Protokoll abzuwickeln, daher ist auch ein http-Modul erforderlich. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

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

var app = http.createServer().listen(9091);

var ws = io.listen(app);

Dann definieren Sie ein globales Koordinatenobjekt

Code kopieren Der Code lautet wie folgt:

var positions = {};

Beginnen Sie mit der Überwachung der Client-Verbindung und fügen Sie eine Broadcast-Funktion hinzu (tatsächlich können Sie die Broadcast-Methode io.sockets.broadcast.emit verwenden, die mit socket.io geliefert wird. Der Kerncode lautet wie folgt:

).

Code kopieren Der Code lautet wie folgt:

ws.on('connection', function(client){
// Broadcast-Funktion
var Broadcast = function(msg, cl){
for(var k in ws.sockets.sockets){
If(ws.sockets.sockets.hasOwnProperty(k)){
If(ws.sockets.sockets[k] && ws.sockets.sockets[k].id != cl.id){
Ws.sockets.sockets [k] .emit ('posity.change', msg);                 }
            }
}
};
console.log(' // Nachdem der Client erfolgreich eine Verbindung hergestellt hat, werden die Koordinateninformationen anderer Clients gesendet
Client.emit('position.change', positions);
// Vom Client gesendete Nachrichten empfangen
Client.on('position.change', function(msg){
                                        // Derzeit sind die Nachrichten des Kunden nur Koordinatennachrichten
        positions[client.id] = msg;
              // Senden Sie die Nachricht an alle anderen Kunden
Sendung({
            Typ: 'Position',
Postion: msg,
              id: client.id
          }, Kunde);
});
// Empfange die Nachricht, dass der Client die Verbindung schließt
Client.on('close', function(){
console.log('close!');
​​​​ //Löschen Sie den Client und benachrichtigen Sie andere Clients
                                                                                                                                                                                         Beiträge löschen[client.id];
               // Senden Sie die Nachricht an alle anderen Kunden
Sendung({
            Typ: 'Trennen',
              id: client.id
          }, Kunde);
});
// Verbindung trennen
Client.on('disconnect', function(){
console.log('disconnect!');
​​​​ //Löschen Sie den Client und benachrichtigen Sie andere Clients
                                                                                                                                                                                         Beiträge löschen[client.id];
               // Senden Sie die Nachricht an alle anderen Kunden
Sendung({
            Typ: 'Trennen',
              id: client.id
          }, Kunde);
})
// Client-Ausnahmebehandlung definieren
Client.on('error', function(err){
console.log('error->', err);
})
});

Bei der Analyse des obigen Codes ist der entscheidende Punkt

1. Der neue Client verbindet sich erfolgreich und sendet die Koordinateninformationen anderer Clients

2. Wenn der Client die Koordinateninformationen aktualisiert, benachrichtigt er andere Clients

3. Der Client trennt die Verbindung und benachrichtigt andere Clients
4. Broadcast-Nachrichtentypen werden in Koordinaten ändern und Koordinaten entfernen
unterteilt

Client-HTML-Seite schreiben

Da es sich bei socket.io um ein benutzerdefiniertes Framework handelt, muss der Client auf socket.io.js verweisen. Der Pfad lautet im Allgemeinen node_modulessocket.ionode_modulessocket.io-clientdist und Komprimieren Sie die beiden Versionen, und Sie können die zusammengeführte Version während der Entwicklung verwenden

Der vollständige Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Die Datei „img/cursor.png“ auf der Seite finden Sie hier: „cursor.png“. Das Prinzip des Frontends ist wie folgt

1. Wenn die Verbindung erfolgreich ist, binden Sie das Seiten-Mousemove-Ereignis, das das Senden neuer Koordinatennachrichten verarbeitet

2. Beim Empfang einer Nachricht besteht die Verarbeitung je nach Nachrichtentyp darin, andere Client-Nachrichten zu ändern oder andere Client-Nachrichten zu entfernen
3. Definieren Sie das Hinzufügen weiterer Client-Cursorsymbole und das Entfernen von Cursorsymbolen
4. Behandeln Sie Client-Ausnahmemeldungen und fügen Sie Verbindungsabbrüche hinzu, damit der Server Koordinateninformationen entfernen kann

Führen Sie das Beispiel aus

1. Speichern Sie den Servercode als io_multigame.js

2. Speichern Sie den Client-Code als io_multigame.html
3. Führen Sie den Servercodeknoten io_multigame.js
aus 4. Öffnen Sie mehrere io_multigame.html-Seiten, um den Effekt zu sehen

Zusammenfassung

Der Text ist lockerer und bezieht sich auf die erstaunlichen NodeJS. Dies ist ein gutes Buch. Freunde, die NodeJS verstehen möchten, können dieses Buch lesen.