Kürzlich habe ich aufgrund der Projektanforderungen die WebSocket -Implementierung von NodeJS, Socket.io, untersucht, ein Framework, das von NodeJS -Hintergrundanwendungsanwendung WebSocket verwendet wird.
Vorbereitung
1. Installieren Sie Socket.io und 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 hört auf die Verbindung des Clients zu
2. Wenn die Client -Verbindung erfolgreich ist, verschiebt die Bindungsseite das Mausereignis und die aktuelle Koordinate wird an den Server gesendet.
3. Der Server speichert ein globales Koordinatenobjekt und verwendet die eindeutige Nummer des Clients als Schlüsselwert.
4. Wenn eine neue Verbindung kommt, übertragen Sie die Koordinaten an andere Kunden
5. Wenn der Client getrennt ist, löscht der Server seine Koordinateninformationen und sendet sie an andere Clients.
Beginnen Sie mit dem Implementieren von Servercode
Wenn scoket.io die Serverüberwachung festlegt, muss es sich auf eine HTTP -Verbindung verlassen, um das Upgrade -Protokoll zu verarbeiten. Daher benötigt es auch ein HTTP -Modul, der Code lautet wie folgt:
Die Codekopie lautet wie folgt:
var http = required ('http'),
IO = fordert ('Socket.io');
var app = http.createServer (). Hören (9091);
var ws = io.listen (App);
Definieren Sie dann ein globales Koordinatenobjekt
Die Codekopie lautet wie folgt:
var posts = {};
Hören Sie sich die Verbindung des Kunden an und fügen Sie eine neue Broadcast -Funktion hinzu (Sie können tatsächlich die Broadcast -Methode io.sockets.broadcast.emit verwenden, die mit Socket.io geliefert wird), und der Kerncode lautet wie folgt:
Die Codekopie lautet wie folgt:
Ws.on ('Verbindung', Funktion (Client) {
// Broadcast -Funktion
var Broadcast = Funktion (msg, cl) {
für (var k in wsockets.sockets) {
if (Ws.sockets.sockets.hasownProperty (k)) {
if (Ws.Sockets.sockets [k] && ws.sockets.sockets [k] .id! = Cl.id) {
Ws.Sockets.Sockets [k] .Emit ('Position.Change', msg);
}
}
}
};
console.log ('/033 [92m hat eine neue Verbindung:/033 [39m', Posts);
// Nachdem die Kundenverbindung erfolgreich ist, werden die Koordinateninformationen anderer Kunden gesendet
Client.Emit ('Position.Change', Beiträge);
// Empfangen Sie den Client sendet eine Nachricht
client.on ('Position.Change', Funktion (msg) {
// Derzeit ist die Nachricht des Kunden nur eine Koordinatennachricht
poptions [client.id] = msg;
// Nachrichten an alle anderen Clients übertragen
übertragen({
Typ: 'Position',
Beitrag: msg,
ID: client.id
}, client);
});
// Kundenschließungsverbindungsnachricht empfangen
client.on ('close', function () {
console.log ('close!');
// den Kunden löschen und andere Kunden benachrichtigen
posits löschen [client.id];
// Nachrichten an alle anderen Clients übertragen
übertragen({
Typ: 'Trennen',
ID: client.id
}, client);
});
// Die Verbindung trennen
client.on ('tricnect', function () {
console.log ('trennect!');
// den Kunden löschen und andere Kunden benachrichtigen
posits löschen [client.id];
// Nachrichten an alle anderen Clients übertragen
übertragen({
Typ: 'Trennen',
ID: client.id
}, client);
})
// Kundenausnahmebehandlung definieren
client.on ('error', function (err) {
console.log ('Fehler->', err);
})
});
Der wichtigste Punkt bei der Analyse des obigen Code ist
1. Der neue Client ist erfolgreich verbunden und die Koordinateninformationen anderer Kunden werden gesendet.
2. Wenn der Client die Koordinateninformationen aktualisiert, benachrichtigen Sie andere Kunden.
3. Der Kunde trennt und benachrichtigt andere Kunden und benachrichtigt
4. Broadcast -Nachrichtentypen werden in die Änderung von Koordinaten und Entfernen von Koordinaten unterteilt
Schreiben Sie Client HTML -Seite
Da Socket.io ein benutzerdefiniertes Framework ist, muss sich der Kunde auf Socket.io.js beziehen. Diese JS ist aus dem Socket.io -Modul zu finden. Der Pfad ist im Allgemeinen node_modules/socket.io/node_modules/socket.io-client/dist. Es gibt zwei Versionen von Zusammenführungen und Komprimierung. Sie können die Merge -Version während der Entwicklung verwenden.
Der vollständige Code lautet wie folgt:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<titels> socket.io Beispiel für die gleichzeitige Online -Interaktion mehrerer Personen </title>
<meta charset = "utf-8">
</head>
<body>
<script type = "text/javaScript" src = "socket.io.js"> </script>
<script type = "text/javaScript">
var ws = io.connect ('http: // localhost: 9091/');
var isfirst;
ws.on ('connect', function () {
console.log (WS);
// Binding Mousemove -Ereignis beginnen
document.onmousemove = function (ev) {
if (Ws.socket.transport.isopen) {
ws.emit ('Position.Change', {x: ev.clientx, y: ev.clienty});
}
}
})
Ws.on ('Position.Change', Funktion (Daten) {
// gleichzeitig online starten
if (! isfirst) {
isfirst = true;
// Die erste Nachricht besteht darin, Koordinaten aller anderen Kunden zu empfangen
für (var i in Daten) {
Move (i, Daten [i]);
}
}anders{
// Andernfalls handelt es sich entweder um eine Nachricht, die getrennt ist oder eine Nachricht, die aktualisiert wird.
if ('Position' == Data.type) {
move (data.id, data.post);
}anders{
remove (data.id);
}
}
})
Ws.on ('Fehler', function () {
Console.log ('Fehler:', WS);
Wsconnect ();
})
Funktionsbewegung (id, pos) {
var ele = document.querySelector ('#cursor_' + id);
if (! ele) {
// Wenn es nicht existiert, wird es erstellt
ele = document.createelement ('img');
ele.id = 'cursor_' + id;
ele.src = 'img/cursor.png';
ele.style.position = 'absolut';
document.body.appendchild (ele);
}
ele.style.left = pos.x + 'px';
ele.style.top = pos.y + 'px';
}
Funktion entfernen (id) {
var ele = document.querySelector ('#cursor_' + id);
ele.parentnode.removechild (ele);
}
</script>
</body>
</html>
Der IMG/Cursor.png auf der Seite finden Sie hier, Cursor.png, und hier gibt es viele andere Maussymbole. Das Prinzip des Frontends ist relativ einfach. Die einfache Analyse ist wie folgt
1. Wenn die Verbindung erfolgreich ist, binden Sie das Mousemove -Ereignis auf der Seite und senden Sie eine neue Koordinatennachricht.
2. Meldet die Nachricht gemäß dem Nachrichtentyp, ist es erforderlich, andere Client -Nachrichten zu ändern oder andere Client -Nachrichten zu entfernen?
3. Definieren Sie das Hinzufügen anderer Client -Cursor -Symbole und das Entfernen von Cursor -Symbolen
4. Verarbeiten Sie Client -Ausnahmenachrichten und fügen Sie eine Trennung hinzu, damit der Server Koordinateninformationen entfernen kann
Auslaufbeispiel
1. Speichern Sie den Servercode als io_multiame.js
2. Speichern Sie den Client -Code als io_multigame.html
3. Ausführen von Server -Code -Knoten IO_MultiGame.js
4. Öffnen Sie mehrere Seiten io_multigame.html Seiten, um den Effekt anzuzeigen
Zusammenfassen
Das Schreiben ist ziemlich lässig und Verweise auf die erstaunlichen Nodejs. Dies ist ein gutes Buch. Freunde, die NodeJs wissen wollen, können dieses Buch lesen.