Premiers pas avec socket.io dans la bibliothèque de classes node.js_javascript

Introduction à websocket et autres technologies ajax inversées

Dans les applications Web en temps réel, une méthode courante est l'Ajax inversé. Définition de l’Ajax inversé :

Reverse Ajax (Reverse Ajax) est essentiellement un concept qui permet d'envoyer des données du serveur au client. Dans une requête HTTP Ajax standard, les données sont envoyées au serveur. Reverse Ajax peut simuler une requête Ajax de certaines manières spécifiques. Ces méthodes seront abordées dans cet article, de cette manière, le serveur peut envoyer des données au serveur aussi rapidement que possible. possible. Le client envoie des événements (communication à faible latence).

La technologie Reverse Ajax a principalement deux contenus : l'un est que le serveur maintient la connexion TCP jusqu'à ce qu'il ait des données à envoyer au client (peut être implémenté à l'aide de boucles et de veille), et l'autre concerne les compétences en programmation js du client.

Websocket est un standard du HTML5 et est également une technologie anti-ajax.

Exemple d'implémentation par Socket.io de la technologie AJAX inversée

Présentation officielle de socket.io :

Socket.IO vise à rendre les applications en temps réel possibles dans tous les navigateurs et appareils mobiles, en brouillant les différences entre les différents mécanismes de transport. C'est un temps réel sans souci 100 % en JavaScript afin de fournir une connectivité en temps réel sur chaque navigateur, Socket. IO sélectionne le transport le plus performant au moment de l'exécution, sans que cela n'affecte l'API WebSocket Adobe® Flash® Socket AJAX longue interrogation Streaming multipart AJAX Forever Iframe JSONP Polling

.

Pour faire simple, socket.io est une bibliothèque basée sur nodejs, qui regroupe diverses technologies ajax inversées et unifie l'interface. Au moment de l'exécution, socket.io sélectionne automatiquement la technologie ajax inverse appropriée pour interagir avec le serveur socket.io en fonction des conditions du navigateur. Si des technologies telles que websocket sont des standards, alors socket.io est une application.

Voici comment l'installer (l'auteur utilise Linux Mint 16) :

Installer node.js :

Copiez le code Le code est le suivant :

sudo apt- get install nodejs

Entrez la commande nodejs pour passer en mode shell.

Installer npm :

Copiez le code Le code est le suivant :

sudo apt-get install npm

Installer socket.io :

Copiez le code Le code est le suivant :

sudo npm install socket.io

Le package d'installation est stocké dans le répertoire ~/node_modules et le client socket.io.js est stocké dans ~/node_modules/socket.io/node_modules/socket.io -répertoire client/dist.

Exemple socket.io

Les exemples suivants proviennent du site officiel et ont été modifiés en conséquence.

Créez d'abord le code côté serveur (côté serveur) (fichier test.js) :

Copiez le codeLe le code est le suivant :

var io = require('socket.io').listen(8080);

io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('mon autre événement' , function (data) {
console.log(data);
});
});

Le serveur test.js est lié au port 8080. Lorsqu'un client se connecte Quand le serveur test.js est en cours d'exécution, le serveur test.js envoie la commande news au client et transmet les données { hello: 'world' } ; lorsque le serveur test.js reçoit la commande my other event, il appellera le rappel function function (data) { console.log(data);} pour traiter les données reçues.

L'auteur a construit un serveur nginx, qui utilise le port 80 et le répertoire racine Web est /usr/share/nginx/html. Copiez socket.io.min.js sous ~/node_modules/socket.io/node_modules/socket.io-client/dist dans le répertoire racine Web et créez le fichier index.php dans le répertoire racine Web (en tant que client), le contenu est le suivant :

Copier le code Le code est le suivant :

<script><BR> var socket = io.connect('http://localhost:8080');<BR> socket.on('news', function (data) {<BR> console.log(data) ;<BR> console .log(data["hello"]);<BR> socket.emit('mon autre événement', { my: 'data' });<BR> });<BR></ script><BR> <P><BR></script>

Dans le code ci-dessus, le socket est lié au port 8080, qui est lié côté serveur. socket.on() spécifie comment traiter les données correspondant à la commande reçue lors de la réception de la commande news. socket.emit() envoie la commande et les données au serveur.

Exécuter le serveur :

Copiez le code Le code est le suivant :

$ nodejs test. js

Exécutez le client et observez : ouvrez le navigateur, entrez http://127.0.0.1 pour accéder à index.php et ouvrez Firebug pour afficher les informations.

L'image ci-dessus provient de Firebug, qui montre qu'une fois que le client index.php s'est connecté au serveur test.js, il reçoit les données {hello: "world"} du serveur test.js. En même temps, vous pouvez également constater que l'URL utilisée par index.php pour accéder au serveur n'est pas simplement http://localhost:8080.

La figure ci-dessus montre le processus de traitement de test.js côté serveur.
L'image ci-dessus est l'en-tête http envoyé par le client index.php au serveur test.js pour la première fois.

L'image ci-dessus est l'en-tête http envoyé par le client index.php au serveur test.js pour la deuxième fois. La spécification Websocket est utilisée.
Lorsque le serveur test.js est éteint, le client index.php affiche de nombreux statuts Aborted (la partie rouge).

L’analyse est terminée.