Nodejs implémente le partage de petits jeux pour que plusieurs personnes puissent déplacer la souris en ligne en même temps_node.js

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é pour websocket dans les applications d'arrière-plan nodejs.

Préparation

1. Installez socket.io, utilisez la commande npm install socket.io
2. Pour le système Windows, un environnement de compilation vc est requis, car lors de l'installation de socket.io, le code vc sera compilé

Principes de base du jeu

1. Le serveur surveille la connexion du client
2. Lorsque la connexion client est réussie, liez la page pour déplacer l'événement de souris et traitez l'événement pour envoyer les coordonnées actuelles au serveur
3. Le serveur enregistre un objet de coordonnées globales et utilise le numéro unique du client comme valeur clé
4. Lorsqu'une nouvelle connexion arrive, diffusez les coordonnées aux autres clients
5. Lorsque le client se déconnecte, le serveur supprime ses informations de coordonnées et les diffuse aux autres clients

Commencer à 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 :

Copier le code Le code est le suivant :

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

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

var ws = io.listen(app);

Définissez ensuite un objet de coordonnées globales

Copier le code Le code est le suivant :

var positions = {};

Commencez à surveiller la connexion du client et ajoutez une fonction de diffusion (en fait, vous pouvez utiliser la méthode de diffusion io.sockets.broadcast.emit fournie avec socket.io. Le code principal est le suivant :

).

Copier le code Le code est le suivant :

ws.on('connexion', fonction(client){
// Fonction de diffusion
var diffusion = fonction (msg, cl){
pour(var k dans ws.sockets.sockets){
Si(ws.sockets.sockets.hasOwnProperty(k)){
Si(ws.sockets.sockets[k] && ws.sockets.sockets[k].id != cl.id){
Ws.sockets.sockets [k] .emit ('posity.change', msg
);                 }
            }
>
};
console.log(' // Une fois que le client s'est connecté avec succès, les informations de coordonnées des autres clients seront envoyées
Client.emit('position.change', positions);
// Recevoir les messages envoyés par le client
Client.on('position.change', function(msg){
                                        // Actuellement, les messages du client ne sont que des messages de coordination
        positions[client.id] = msg;
               // Diffusez le message à tous les autres clients
diffusion({
            tapez : 'position',
Poste : msg,
              identifiant : client.id
          }, client);
});
// Recevoir le message de fermeture de connexion du client
Client.on('close', function(){
console.log('fermer!');
​​​​ //Supprimer le client et avertir les autres clients
                                                                                                                                                                                              supprimer les messages[client.id] ;
               // Diffusez le message à tous les autres clients
diffusion({
            tapez : 'déconnecter',
              identifiant : client.id
          }, client);
});
// Déconnecter
Client.on('déconnecter', function(){
console.log('déconnecter!');
​​​​ //Supprimer le client et avertir les autres clients
                                                                                                                                                                                              supprimer les messages[client.id] ;
               // Diffusez le message à tous les autres clients
diffusion({
            tapez : 'déconnecter',
              identifiant : client.id
          }, client);
})
// Définir la gestion des exceptions client
Client.on('erreur', fonction(erreur){
console.log('erreur->', erreur);
})
});

En analysant le code ci-dessus, le point clé est

1. Le nouveau client se connecte avec succès et envoie les informations de coordonnées des autres clients

2. Lorsque le client met à jour les informations de coordonnées, il en informe les autres clients
3. Le client se déconnecte et informe les autres clients
4. Les types de messages diffusés sont divisés en modification des coordonnées et suppression des coordonnées

Écrire la page HTML du client

Puisque socket.io est un framework personnalisé, le client doit référencer socket.io.js. Ce js peut être trouvé dans le module socket.io. Le chemin est généralement node_modulessocket.ionode_modulessocket.io-clientdist, qui contient la fusion. et Compressez les deux versions, et vous pourrez utiliser la version fusionnée pendant le développement

.

Le code complet est le suivant :

Copier le code Le code est le suivant :

Le img/cursor.png dans la page peut être trouvé ici, curseur.png Il y a aussi de nombreuses autres icônes de souris ici. Le principe du front-end est relativement simple. Une analyse simple est la suivante

.

1. Lorsque la connexion est réussie, liez l'événement page mousemove, qui gère l'envoi de nouveaux messages de coordonnées
2. Lors de la réception d'un message, selon le type de message, le traitement consiste à modifier d'autres messages clients ou à supprimer d'autres messages clients
3. Définissez l'ajout d'autres icônes de curseur client et la suppression des icônes de curseur
4. Gérez les messages d'exception du client et ajoutez une déconnexion pour permettre au serveur de supprimer les informations de coordonnées

Exécuter l'exemple

1. Enregistrez le code du serveur sous io_multigame.js
2. Enregistrez le code client sous 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ésumé

L'écriture est plus décontractée et fait référence à l'incroyable nodejs. C'est un bon livre. Les amis qui veulent comprendre nodejs peuvent lire ce livre.