Récemment, en raison des besoins du projet, j'ai étudié l'implémentation WebSocket de Nodejs, Socket.io, qui est un framework largement utilisé par l'application de fond de NodeJS WebSocket.
Préparation
1. Installer socket.io et utiliser la commande npm installer socket.io
2. Pour les systèmes Windows, un environnement de compilation VC est requis, car lorsque Socket.io est installé, le code VC sera compilé.
Principes de base du jeu
1. Le serveur écoute la connexion du client
2. Lorsque la connexion client est réussie, la page de liaison déplace l'événement de la souris et la coordonnée actuelle est envoyée au serveur.
3. Le serveur enregistre un objet de coordonnées global et utilise le numéro unique du client comme valeur clé.
4. Lorsqu'une nouvelle connexion vient, diffuser les coordonnées à d'autres clients
5. Lorsque le client est déconnecté, le serveur supprime ses informations de coordonnées et la diffuse à d'autres clients.
Commencez à implémenter le code du serveur
Lorsque Scoket.io établit la surveillance du serveur, il doit s'appuyer sur une connexion HTTP pour gérer le protocole de mise à niveau, il a donc également besoin d'un module HTTP, le code est le suivant:
La copie de code est la suivante:
var http = requis ('http'),
io = require ('socket.io');
var app = http.createServer (). écouter (9091);
var ws = io.Listen (app);
Puis définissez un objet de coordonnées global
La copie de code est la suivante:
var post = {};
Commencez à écouter la connexion du client et ajoutez une nouvelle fonction de diffusion (en fait, vous pouvez utiliser la méthode de diffusion io.sockets.broadcast.emit, qui est livrée avec socket.io), et le code de base est le suivant:
La copie de code est la suivante:
ws.on ('connexion', fonction (client) {
// Fonction de diffusion
var Broadcast = function (msg, cl) {
pour (var k dans ws.sockets.sockets) {
if (ws.sockets.sockets.hasownproperty (k)) {
if (ws.sockets.sockets [k] && wsockets.sockets [k] .id! = cl.id) {
ws.sockets.sockets [k] .emit ('position.change', msg);
}
}
}
};
console.log ('/ 033 [92m a une nouvelle connexion: / 033 [39m', poteaux);
// Une fois la connexion client réussie, les informations de coordonnées d'autres clients seront envoyées
client.emit ('position.change', posts);
// Recevoir le client envoie un message
client.on ('position.change', fonction (msg) {
// Actuellement, le message du client n'est que le message de coordonnées
Postions [client.id] = msg;
// diffuser des messages à tous les autres clients
diffuser({
Type: «Position»,
Post: msg,
ID: client.id
}, client);
});
// Recevoir le message de connexion de fermeture du client
client.on ('close', function () {
Console.log («Close!»);
// Supprimer le client et informer d'autres clients
supprimer les postions [client.id];
// diffuser des messages à tous les autres clients
diffuser({
Type: «déconnecter»,
ID: client.id
}, client);
});
// déconnecter
client.on ('disonnect', function () {
console.log («Disconnect!»);
// Supprimer le client et informer d'autres clients
supprimer les postions [client.id];
// diffuser des messages à tous les autres clients
diffuser({
Type: «déconnecter»,
ID: client.id
}, client);
})
// Définir la gestion des exceptions du client
client.on ('error', fonction (err) {
console.log ('error->', err);
})
});
Le point clé de l'analyse du code ci-dessus est
1. Le nouveau client est connecté avec succès et les informations de coordonnées d'autres clients sont envoyées.
2. Lorsque le client met à jour les informations de coordonnées, informez les autres clients.
3. Le client déconnecte et informe les autres clients
4. Les types de messages de diffusion sont divisés en coordonnées de modification et de suppression des coordonnées
Écrivez la page HTML du client
Étant donné que Socket.io est un cadre personnalisé, le client doit se référer à socket.io.js. Ce JS peut être trouvé à partir du module Socket.io. Le chemin est généralement node_modules / socket.io / node_modules / socket.io-client / dist. Il existe deux versions de fusion et de compression. Vous pouvez utiliser la version Merge pendant le développement.
Le code complet est le suivant:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<Title> Socket.io Exemple d'interaction en ligne simultanée de plusieurs personnes </TITAL>
<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);
// commence à lier l'événement MouseMove
document.onMouseMove = fonction (ev) {
if (ws.socket.transport.isopen) {
ws.emit ('position.change', {x: ev.clientx, y: ev.clienty});
}
}
})
ws.on ('position.change', fonction (data) {
// commence en ligne en même temps
if (! isFirst) {
isFirst = true;
// Le premier message consiste à recevoir des coordonnées de tous les autres clients
pour (var i en données) {
déplacer (i, data [i]);
}
}autre{
// Sinon, c'est soit un message déconnecté, soit un message mis à jour.
if ('position' == data.type) {
déplacer (data.id, data.post);
}autre{
supprimer (data.id);
}
}
})
ws.on ('error', function () {
console.log ('error:', ws);
ws.Disconnect ();
})
Fonction Move (id, pos) {
var ele = document.QuerySelector ('# cursor_' + id);
if (! ele) {
// s'il n'existe pas, il sera créé
ele = document.CreateElement ('img');
ele.id = 'cursor_' + id;
ele.src = 'img / cursor.png';
ele.style.position = 'absolue';
Document.Body.ApendChild (ELE);
}
ele.style.left = pos.x + 'px';
ele.style.top = pos.y + 'px';
}
fonction supprime (id) {
var ele = document.QuerySelector ('# cursor_' + id);
ele.parentnode.removechild (ele);
}
</cript>
</docy>
</html>
L'IMG / Cursor.png sur la page peut être trouvé ici, Cursor.png, et il existe de nombreuses autres icônes de souris ici. Le principe de l'extrémité avant est relativement simple. L'analyse simple est la suivante
1. Lorsque la connexion réussit, liez l'événement Mousemove sur la page et envoyez un nouveau message de coordonnée.
2. Reçu le message en fonction du type de message, est-il nécessaire de modifier d'autres messages client ou de supprimer d'autres messages clients?
3. Définir l'ajout d'autres icônes du curseur du client et retirer les icônes du curseur
4. Profitez des messages d'exception du client et ajoutez la déconnexion pour permettre au serveur de supprimer les informations de coordonnées
Exemple de course
1. Enregistrer le code du serveur sous le nom de io_multigame.js
2. Enregistrez le code client sous le nom de io_multigame.html
3. Exécutez le nœud de code du serveur io_multigame.js
4. Ouvrez plusieurs pages io_multigame.html pour voir l'effet
Résumer
L'écriture est assez décontractée et fait référence aux Nodejs incroyables. C'est un bon livre. Les amis qui veulent connaître les nodejs peuvent lire ce livre.