Exemple d'utilisation de Socket.IO dans node.js_node.js

1. Introduction

Le premier est le site officiel de Socket.IO : http://socket.io

Le site officiel est très simple, il n'y a pas de document API, seulement un simple "Comment utiliser" pour référence. Parce que Socket.IO est aussi simple, facile à utiliser et facile à utiliser que le site officiel.

Alors, qu’est-ce que Socket.IO exactement ? Socket.IO est une bibliothèque WebSocket qui comprend des js côté client et des nodejs côté serveur. Son objectif est de créer des applications en temps réel pouvant être utilisées sur différents navigateurs et appareils mobiles. Il sélectionnera automatiquement la meilleure méthode en fonction du navigateur parmi diverses méthodes telles que WebSocket, l'interrogation longue AJAX, le streaming Iframe, etc. pour implémenter des applications réseau en temps réel. Il est très pratique et convivial, et les navigateurs pris en charge sont les mêmes. bas que IE5.5. Il devrait être capable de répondre à la plupart des besoins.

2.Installation et déploiement

2.1Installation

Tout d'abord, l'installation est très simple. Dans l'environnement node.js, une seule phrase :

Copier le code Le code est le suivant :

npm installer socket.io

2.2 Combiner express pour construire un serveur

express est un petit framework d'application Web Node.js qui est souvent utilisé lors de la création de serveurs HTTP, je vais donc l'expliquer directement en utilisant Socket.IO et l'exprimer à titre d'exemples.

Copier le code Le code est le suivant :

var express = require('express')
, app = express()
, serveur = require('http').createServer(app)
, io = require('socket.io').listen(server);
serveur.écouter(3001);

Si vous n'utilisez pas express, veuillez vous référer à socket.io/#how-to-use

3. Utilisation de base

Il est principalement divisé en deux morceaux de code, côté serveur et côté client, tous deux très simples.

Serveur (app.js) :

Copier le code Le code est le suivant :

//Continuez le code ci-dessus
app.get('/', fonction (req, res) {
res.sendfile(__dirname '/index.html');});

io.sockets.on('connexion', fonction (socket) {
socket.emit('news', { hello: 'world' });
socket.on('autre événement', fonction (données) {
console.log(données);
});
});

Tout d'abord, la fonction io.sockets.on accepte la chaîne "connection" comme événement permettant au client d'initier une connexion. Lorsque la connexion est réussie, la fonction de rappel avec le paramètre socket est appelée. Lorsque nous utilisons socket.IO, nous traitons essentiellement les demandes des utilisateurs dans cette fonction de rappel.

Les fonctions les plus critiques de socket sont les fonctions submit et on. La première soumet (émet) un événement (le nom de l'événement est représenté par une chaîne. Le nom de l'événement peut également être personnalisé. suivi d'un objet. Représente le contenu envoyé à la socket ; cette dernière reçoit un événement (le nom de l'événement est représenté par une chaîne), suivi d'une fonction de rappel appelée lors de la réception de l'événement, où data est la donnée reçue.

Dans l'exemple ci-dessus, nous avons envoyé l'événement d'actualité et reçu l'autre événement, le client devrait alors avoir les événements de réception et d'envoi correspondants. Oui, le code client est exactement le contraire du code serveur et très similaire.

Client (client.js)

Copier le code Le code est le suivant :

<script><br> var socket = io.connect('http://localhost');<br> socket.on('news', fonction (données) {<br> console.log(données);<br> ​​​​ socket.emit('autre événement', { my: 'data' });<br> });<br> </script>

Il y a deux points à noter : le chemin socket.io.js doit être écrit correctement. Ce fichier js est en fait placé dans le dossier node_modules côté serveur. Lorsque ce fichier est demandé, il sera redirigé, alors ne le faites pas. Ne soyez pas surpris qu'il n'existe pas côté serveur. Pourquoi ce fichier fonctionne-t-il toujours normalement ? Bien sûr, vous pouvez copier le fichier socket.io.js côté serveur localement et en faire un fichier js côté client. De cette façon, vous n'avez pas besoin de demander le fichier js au serveur Node à chaque fois, ce qui améliore la stabilité. . Le deuxième point est d'utiliser var socket = io.connect('website address or ip'); pour obtenir l'objet socket, puis vous pouvez utiliser le socket pour envoyer et recevoir des événements. Concernant le traitement des événements, le code ci-dessus indique qu'après avoir reçu l'événement « news », il imprime les données reçues et envoie l'événement « autre événement » au serveur.

Remarque : les noms d'événements intégrés par défaut tels que "déconnexion" signifient que la connexion client est déconnectée, "message" signifie qu'un message est reçu, etc. Le nom de l'événement personnalisé ne doit pas avoir le même nom que le nom de l'événement par défaut intégré à Socket.IO pour éviter des problèmes inutiles.

4. Autres API couramment utilisées

1). Diffusion à tous les clients : socket.broadcast.emit('broadcast message');

2) Entrez dans une salle (très simple à utiliser ! C'est l'équivalent d'un espace de noms et peut diffuser vers une salle spécifique sans affecter les clients dans d'autres salles ou pas dans la salle) : socket.join('votre nom de salle') );

3). Diffusez un message dans une salle (l'expéditeur ne peut pas recevoir le message) : socket.broadcast.to('votre nom de salle').emit('broadcast room message');

4). Diffusez un message dans une salle (y compris l'expéditeur peut recevoir le message) (cette API appartient à io.sockets) : io.sockets.in('un autre nom de salle').emit('diffusion du message de la salle ' );

5). Forcer l'utilisation de la communication WebSocket : (client) socket.send('hi'), (serveur) utilise socket.on('message', function(data){}) pour recevoir.

5. Créez une salle de discussion en utilisant Socket.IO

Enfin, nous terminons cet article par un exemple simple. Construire une salle de discussion avec Socket.IO ne nécessite qu'environ 50 lignes de code, et l'effet de discussion en temps réel est également très bon. Le code clé est affiché ci-dessous :

Serveur (socketChat.js)

Copier le code Le code est le suivant :

//Un dictionnaire des connexions client, lorsqu'un client se connecte au serveur,
//Un socketId unique sera généré. Le dictionnaire enregistre le mappage de socketId avec les informations de l'utilisateur (surnom, etc.)
. var liste de connexions = {};

exports.startChat = fonction (io) {
​ io.sockets.on('connexion', fonction (socket) {
//Lorsque le client se connecte, enregistrez le socketId et le nom d'utilisateur
        var socketId = socket.id;
Liste de connexions[socketId] = {
prise : prise
        };

//L'utilisateur entre dans l'événement du salon de discussion et diffuse son nom d'utilisateur aux autres utilisateurs en ligne
​​​​ socket.on('rejoindre', fonction (données) {
                socket.broadcast.emit('broadcast_join', data);
ConnectionList[socketId].username = data.username;
});

//L'utilisateur quitte l'événement du salon de discussion, diffusant son départ aux autres utilisateurs en ligne
​​​​ socket.on('déconnecter', function() {
Si (connectionList[socketId].username) {
                     socket.broadcast.emit('broadcast_quit', {
                            nom d'utilisateur : connectionList[socketId].username
                });
            }
                supprimer connectionList[socketId];
});

//Événement de discours de l'utilisateur, diffuser le contenu de son discours aux autres utilisateurs en ligne
socket.on('say', fonction (données) {
               socket.broadcast.emit('broadcast_say',{
                     nom d'utilisateur : connectionList[socketId].username,
                   texte : data.text
            });
});
})
};

Client(socketChatClient.js)

Copier le code Le code est le suivant :

var socket = io.connect('http://localhost');
//Après vous être connecté au serveur, soumettez immédiatement un événement "rejoindre" et indiquez aux autres votre nom d'utilisateur
socket.emit('rejoindre', {
Nom d'utilisateur : 'Nom d'utilisateur hehe'
});

//Après avoir reçu la diffusion de participation au salon de discussion, affichez le message
socket.on('broadcast_join', fonction (données) {
console.log(data.username 'Rejoint le salon de discussion');
});

//Après avoir reçu la diffusion de sortie du salon de discussion, affichez le message
socket.on('broadcast_quit', fonction(données) {
console.log(data.username 'a quitté la salle de discussion');
});

//Après avoir reçu un message de quelqu'un d'autre, affichez le message
socket.on('broadcast_say', function(data) {
console.log(data.username 'say: ' data.text);
});

//Ici, nous supposons qu'il y a une zone de texte et un bouton d'envoi.btn-send
//Utilisez jQuery pour lier des événements
$('.btn-send').click(function(e) {
//Récupère le texte de la zone de texte
var texte = $('textarea').val();
//Soumettez un événement say, et le serveur le diffusera lorsqu'il le recevra
socket.emit('dire', {
         nom d'utilisateur : 'Nom d'utilisateur hehe'
         texte : texte
});
});

Il s'agit d'une simple DÉMO de salon de discussion, vous pouvez l'étendre en fonction de vos besoins. Socket.IO est essentiellement le traitement de soumission et de réception de divers événements. L'idée est très simple.