1. Introduction
Tout d'abord, le site officiel de socket.io: http://socket.io
Le site officiel est très concis, et il n'y a même pas de documentation de l'API, seulement un simple "comment utiliser" pour se référer. Parce que Socket.io est aussi simple et facile à utiliser que le site officiel.
Alors, qu'est-ce que Socket.io? Socket.io est une bibliothèque WebSocket qui inclut JS côté client et NodeJS côté serveur. Son objectif est de créer des applications en temps réel qui peuvent être utilisées sur différents navigateurs et appareils mobiles. Il choisira automatiquement la meilleure façon de réaliser une application réseau en temps réel en fonction du navigateur à partir de diverses méthodes telles que WebSocket, Ajax Long sondage, streaming IFRAME, etc., qui est très pratique et conviviale. Les navigateurs pris en charge sont aussi faibles que IE5.5, qui devraient répondre à la plupart des besoins.
2. Installation et déploiement
2.1 Installation
Tout d'abord, l'installation est très simple, dans l'environnement Node.js, juste une phrase:
La copie de code est la suivante:
npm install socket.io
2.2 combinant Express pour construire un serveur
Express est un petit cadre d'application Web Node.js, qui est souvent utilisé lors de la création de serveurs HTTP, il est donc directement expliqué avec Socket.io et Express comme exemples.
La copie de code est la suivante:
var express = require ('express')
, app = express ()
, server = require ('http'). CreateServer (app)
, io = require ('socket.io'). écouter (serveur);
server.Listen (3001);
Si vous n'utilisez pas Express, veuillez vous référer à socket.io/#how-to-use
3. Méthode d'utilisation de base
Il est principalement divisé en deux pièces de code: côté serveur et côté client, qui sont tous deux très simples.
Serveur (app.js):
La copie de code est la suivante:
// Connectez 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 (data) {
console.log (données);
});
});
Tout d'abord, la fonction io.sockets.on accepte la chaîne "connexion" comme l'événement dans lequel le client initie la connexion. Lorsque la connexion est réussie, la fonction de rappel avec les paramètres de socket est appelée. Lorsque nous utilisons Socket.io, nous gérons essentiellement les demandes utilisateur dans cette fonction de rappel.
La chose la plus importante à propos de Socket est d'émettre et de se faire. Le premier soumet (problèmes) un événement (le nom de l'événement est représenté par une chaîne). Le nom de l'événement peut être personnalisé, et il existe certains noms d'événements par défaut, suivis d'un objet, indiquant le contenu envoyé au socket; Ce dernier reçoit un événement (le nom de l'événement est représenté par une chaîne), suivi d'une fonction de rappel qui reçoit l'appel de l'événement, où les données sont les données reçues.
Dans l'exemple ci-dessus, nous avons envoyé l'événement d'actualités et reçu l'autre événement de l'événement, de sorte que le client doit avoir des événements de réception et d'envoi correspondants. Oui, le code client est exactement le contraire et très similaire au serveur.
Client (client.js)
La copie de code est la suivante:
<script src = "/ socket.io/socket.io.js"> </ script>
<cript>
var socket = io.connect ('http: // localhost');
socket.on ('news', fonction (data) {
console.log (données);
socket.emit ('autre événement', {my: 'data'});
});
</cript>
Il y a deux choses à noter: le chemin socket.io.js doit être écrit correctement. Ce fichier JS est en fait placé dans le dossier Node_Modules du côté serveur. Il sera redirigé lors de la demande de ce fichier. Par conséquent, ne soyez pas surpris que ce fichier n'existe pas du côté du serveur mais pourquoi il fonctionne toujours normalement. Bien sûr, vous pouvez copier le fichier socket.io.js côté serveur sur localement et en faire un fichier JS côté client, afin que vous n'ayez pas à demander ce fichier JS dans le serveur de nœuds à chaque fois, ce qui améliore la stabilité. Le deuxième point consiste à utiliser var socket = io.connect («adresse du site Web ou ip»); Pour obtenir l'objet Socket, puis vous pouvez utiliser Socket pour envoyer et recevoir des événements. En ce qui concerne le traitement des événements, le code ci-dessus signifie qu'après avoir reçu l'événement "News", les données reçues sont imprimées et l'événement "l'autre événement" est envoyé au serveur.
Remarque: Le nom d'événement par défaut intégré, tel que "déconnecter" signifie que la connexion client est déconnectée, "Message" signifie que le message est reçu, etc. Pour les noms d'événements personnalisés, essayez de ne pas doubler le nom avec les noms d'événements par défaut intégrés dans socket.io, afin de ne pas causer de problèmes inutiles.
4. Autres API communes
1). Diffusé à tous les clients: socket.broadcast.emit («message de diffusion»);
2). Entrez dans une pièce (très facile à utiliser! Il est équivalent à un espace de noms, qui peut être diffusé dans une pièce spécifique sans affecter les clients dans d'autres pièces ou non dans la pièce): Socket.Join («Nom de votre pièce»);
3). Message de diffusion dans une salle (l'expéditeur ne peut pas recevoir le message): socket.broadcast.to («Nom de votre salle»). Emit («Message de la salle de diffusion»);
4). Messages diffusés dans une salle (y compris l'expéditeur peut recevoir des messages) (cette API appartient à io.sockets): io.sockets.in («un autre nom de pièce»). EMIT («Message de la salle de diffusion»);
5). Force Websocket Communication: (client) socket.send ('hi'), (serveur) Utilisez socket.on ('message', fonction (data) {}) pour recevoir.
5. Construisez une salle de chat en utilisant Socket.io
Enfin, nous terminons cet article avec un exemple simple. L'utilisation de socket.io pour construire une salle de chat est d'environ 50 lignes de code, et l'effet de chat en temps réel est également très bon. Les codes clés suivants sont publiés:
Serveur (socketchat.js)
La copie de code est la suivante:
// un dictionnaire pour la connexion client, lorsqu'un client se connecte au serveur,
// Une socketid unique sera générée, et le dictionnaire conservera la cartographie de sockettid aux informations de l'utilisateur (surnom, etc.)
var connectionList = {};
export.startchat = fonction (io) {
io.sockets.on ('connexion', fonction (socket) {
// Enregistrer le socketid et le nom d'utilisateur lorsque la connexion client
var socketId = socket.id;
ConnectionList [socketId] = {
prise
};
// L'utilisateur entre dans l'événement de salle de discussion et diffuse son nom d'utilisateur à d'autres utilisateurs en ligne
socket.on ('join', fonction (data) {
socket.broadcast.emit ('Broadcast_join', données);
ConnectionList [socketId] .Username = data.Username;
});
// L'utilisateur quitte l'incident de la salle de chat et diffuse son départ vers d'autres utilisateurs en ligne
socket.on ('déconnecter', function () {
if (connectionList [socketId] .Username) {
socket.broadcast.emit ('Broadcast_quit', {
Nom d'utilisateur: ConnectionList [socketId] .Username
});
}
Delete ConnectionList [SockEDID];
});
// Incident de la parole utilisateur, diffuser le contenu de leur discours à d'autres utilisateurs en ligne
socket.on ('Say', fonction (data) {
socket.broadcast.emit ('Broadcast_say', {
Nom d'utilisateur: connexionList [socketId] .Username,
Texte: Data.Text
});
});
})
};
Client (socketchatclient.js)
La copie de code est la suivante:
var socket = io.connect ('http: // localhost');
// Après vous être connecté au serveur, soumettez immédiatement un événement "rejoindre" et dites à d'autres votre nom d'utilisateur
socket.emit ('join', {
Nom d'utilisateur: «Nom d'utilisateur hehe»
});
// Après avoir reçu la diffusion de rejoindre la salle de chat, le message sera affiché
socket.on ('Broadcast_join', fonction (data) {
console.log (data.username + 'ajouté à Chat Room');
});
// Après avoir reçu la diffusion en quittant la salle de chat, le message s'affiche
socket.on ('Broadcast_quit', fonction (data) {
Console.log (data.Username + 'Laissez la salle de chat');
});
// Après avoir reçu un message envoyé par quelqu'un d'autre, le message sera affiché
socket.on ('Broadcast_say', fonction (data) {
console.log (data.username + 'Say:' + data.text);
});
// Ici, nous supposons qu'il existe une zone de texte TextArea et un bouton d'envoi.btn-sens
// lier l'événement en utilisant jQuery
$ ('. btn-send'). Cliquez sur (fonction (e) {
// Obtenez du texte de la zone de texte
var text = $ ('textArea'). Val ();
// Soumettez un événement Say et le serveur le diffusera lorsqu'il le recevra.
socket.emit ('Say', {
Nom d'utilisateur: «Nom d'utilisateur hehe»
texte: texte
});
});
Il s'agit d'une simple démo de salle de discussion que vous pouvez développer comme vous le souhaitez. Socket.io est essentiellement la soumission et le traitement de réception de divers événements, et l'idée est très simple.