Maison > interface Web > js tutoriel > Premiers pas avec socket.io dans la bibliothèque de classes node.js_javascript

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

WBOY
Libérer: 2016-05-16 16:51:00
original
1461 Les gens l'ont consulté

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 :





Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal