recherche

Maison  >  Article  >  interface Web  >  Introduction à HTML5 WebSocket 3 - Compétences socket.io_javascript du modèle de communication

Introduction à HTML5 WebSocket 3 - Compétences socket.io_javascript du modèle de communication

WBOY
WBOYoriginal
2016-05-16 15:43:482373parcourir

Pourquoi socket.io est-il né ? Veuillez consulter la description textuelle ci-dessous.

Pourquoi avez-vous besoin de socket.io ?

Node.js fournit un environnement d'exploitation efficace côté serveur, mais en raison de la prise en charge différente de HTML5 côté navigateur, afin d'être compatible avec tous les navigateurs, d'offrir une excellente expérience utilisateur en temps réel et de fournir aux clients et services pour les programmeurs Pour offrir une expérience de programmation cohérente, socket.io est né.

L'objectif de conception de socket.io est de prendre en charge n'importe quel navigateur et n'importe quel appareil mobile. Prend actuellement en charge les navigateurs PC grand public (IE, Safari, Chrome, Firefox, Opera, etc.) et les navigateurs mobiles (iphone Safari/ipad Safari/android WebKit/WebOS WebKit, etc.).

Socket.io est basé sur node.js et simplifie l'API WebSocket, unifiant diverses API de communication. Il prend en charge : WebSocket, Flash Socket, interrogation longue AJAX, streaming multipart AJAX, Forever IFrame, interrogation JSONP.

Socket.io résout les problèmes de communication en temps réel et unifie les méthodes de programmation du serveur et du client. Après avoir démarré le socket, cela revient à établir un pipeline entre le client et le serveur, et les deux parties peuvent communiquer entre elles.

Installer

Exécuter dans la ligne de commande : npm install socket.io pour installer.

Modèle de programmation côté serveur

La programmation côté serveur est toujours la même qu'un serveur normal, démarrant le serveur, fournissant des services et traitant les événements.

Par exemple, le server.js suivant : 

var http = require('http')
  , url = require('url')
  , fs = require('fs')
  , server;
server = http.createServer(function(req, res){
  // your normal server code
  var path = url.parse(req.url).pathname;
  switch (path){
  case '/':
   res.writeHead(200, {'Content-Type': 'text/html'});
   res.write('<h1>Hello! Try the <a href="/index.html">Socket.io Test</a></h1>');
   res.end();
   break;
  case '/index.html':
   fs.readFile(__dirname + path, function(err, data){
    if (err) return send404(res);
    res.writeHead(200, {'Content-Type': path == 'json.js' &#63; 'text/javascript' : 'text/html'})
    res.write(data, 'utf8');
    res.end();
   });
   break;
  default: send404(res);
  }
}),
send404 = function(res){
  res.writeHead(404);
  res.write('404');
  res.end();
};
server.listen(8080);
var io = require('socket.io').listen(server);
io.sockets.on('connection', function(socket){
 console.log("Connection " + socket.id + " accepted.");
 socket.on('message', function(message){
    console.log("Received message: " + message + " - from client " + socket.id);
 });
 socket.on('disconnect', function(){
  console.log("Connection " + socket.id + " terminated.");
 });
});

Modèle de programmation client

La programmation client est également gérée de manière similaire, en se connectant au serveur et en échangeant des informations.

Par exemple, la page index.html suivante : 

<!doctype html>
<html>
 <head>
  <title>Socket.io Test</title>
  <script src="/json.js"></script> <!-- for ie -->
  <script src="/socket.io/socket.io.js"></script>
 </head>
 <body>  
  <script>    
  var socket;
  var firstconnect = true;
  function connect() {
   if(firstconnect) {
    socket = io.connect(null);
    socket.on('message', function(data){ message(data); });
    socket.on('connect', function(){ status_update("Connected to Server"); });
    socket.on('disconnect', function(){ status_update("Disconnected from Server"); });
    socket.on('reconnect', function(){ status_update("Reconnected to Server"); });
    socket.on('reconnecting', function( nextRetry ){ status_update("Reconnecting in " 
     + nextRetry + " seconds"); });
    socket.on('reconnect_failed', function(){ message("Reconnect Failed"); });
    firstconnect = false;
   }
   else {
    socket.socket.reconnect();
   }
  }
  function disconnect() {
   socket.disconnect();
  }
  function message(data) {
   document.getElementById('message').innerHTML = "Server says: " + data;
  }
  function status_update(txt){
   document.getElementById('status').innerHTML = txt;
  }
  function esc(msg){
   return msg.replace(/</g, '<').replace(/>/g, '>');
  }
  function send() {
   socket.send("Hello Server!");  
  };    
  </script>
  <h1>Socket.io Test</h1>
  <div><p id="status">Waiting for input</p></div>
  <div><p id="message"></p></div> 
  <button id="connect" onClick='connect()'/>Connect</button>
  <button id="disconnect" onClick='disconnect()'>Disconnect</button>
  <button id="send" onClick='send()'/>Send Message</button>
 </body>
</html>

Remarques

1. Pour démarrer le serveur, laissez-le sur node. Ouvrez la fenêtre de ligne de commande, accédez au dossier où se trouve server.js et entrez node server.js pour démarrer le serveur.

Dans le index.html ci-dessus, faites attention à cette ligne : 73b0576f9b2d9a4f6808f937210380782cacc6d41bbb37262a98f745aa00fbf0. Si vous ne souhaitez pas utiliser le script socket.io local, vous pouvez

Pour utiliser directement le script public suivant : 

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

Notez également cette ligne : socket = io.connect(null).

Le nul ici représente la connexion au service local, qui peut être remplacé par "localhost" et l'effet sera le même.

2. Vous pouvez utiliser socket.io pour démarrer directement le service http.

Par exemple : 

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 io.sockets.emit('this', { will: 'be received by everyone'});
});

3. Socket.io peut envoyer des messages directement via la méthode d'envoi et recevoir des messages en utilisant l'événement message, par exemple : 

//server.js
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('message', function () { });
});
//index.html
<script>
 var socket = io.connect('http://localhost/');
 socket.on('connect', function () {
  socket.send('hi');
  socket.on('message', function (msg) {
   // my msg
  });
 });
</script>

4. Envoi et traitement des données

Les deux extrémités peuvent s'envoyer des événements, s'envoyer des données et communiquer entre elles. Le code pour envoyer l'événement est : socket.emit(action, data, function), où action est le nom de l'événement, data est les données et function est la fonction de rappel, le code pour traiter l'événement est : socket. on(action, fonction), si émettre envoie Lorsqu'il y a des données, les paramètres de la fonction contiennent ces données. En plus d'envoyer et de traiter des événements intégrés, socket.io tels que connexion, déconnexion, message. Permet également l'envoi et la gestion d'événements personnalisés, tels que :

//Serveur : 

io.sockets.on('connection', function (socket) {
 socket.emit('news', { hello: 'world' });
 socket.on('my other event', function (data) {
  console.log(data);
 });
});

//Client : 

<script src="/socket.io/socket.io.js"></script>
<script>
 var socket = io.connect('http://localhost');
 socket.on('news', function (data) {
  console.log(data);
  socket.emit('my other event', { my: 'data' });
 });
</script>

5. Comme le montre ce qui précède, l'envoi et l'émission peuvent être utilisés lors de l'envoi de données. C'est juste qu'emit renforce le traitement des événements personnalisés.

6. Vous pouvez utiliser la méthode get/set du socket côté serveur pour stocker les données pertinentes côté client, par exemple :

//Serveur

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('set nickname', function (name) {
  socket.set('nickname', name, function () { socket.emit('ready'); });
 });
 socket.on('msg', function () {
  socket.get('nickname', function (err, name) {
   console.log('Chat message by ', name);
  });
 });
});

//Client

<script>
 var socket = io.connect('http://localhost');
 socket.on('connect', function () {
  socket.emit('set nickname', confirm('What is your nickname&#63;'));
  socket.on('ready', function () {
   console.log('Connected !');
   socket.emit('msg', confirm('What is your message&#63;'));
  });
 });
</script>

7. Vous pouvez diffuser des messages, par exemple envoyer des messages à tout le monde dans la salle de discussion, à l'exception de la connexion socket actuelle. 

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.broadcast.emit('user connected');
});

8. Plusieurs canaux indépendants peuvent être établis dans le même lien au lieu d'établir plusieurs liens. Ce nom officiel est "espaces de noms multiples", comme dans l'exemple officiel : 

var io = require('socket.io').listen(80);
//Server
var chat = io
 .of('/chat')
 .on('connection', function (socket) {
  socket.emit('a message', {
    that: 'only'
   , '/chat': 'will get'
  });
  chat.emit('a message', {
    everyone: 'in'
   , '/chat': 'will get'
  });
 });
var news = io
 .of('/news')
 .on('connection', function (socket) {
  socket.emit('item', { news: 'item' });
 });
//Client
<script>
 var chat = io.connect('http://localhost/chat')
  , news = io.connect('http://localhost/news');
 chat.on('connect', function () {
  chat.emit('hi!');
 });
 news.on('news', function () {
  news.emit('woot');
 });
</script>

configuration socket.io

La configuration de socket.io est très simple. Si vous avez configuré express, vous constaterez qu'ils utilisent presque la même méthode. Regardons d'abord un petit exemple : 

var io = require('socket.io').listen(80);
io.configure('production', function(){
 io.enable('browser client etag');
 io.set('log level', 1);
 io.set('transports', [
  'websocket'
 , 'flashsocket'
 , 'htmlfile'
 , 'xhr-polling'
 , 'jsonp-polling'
 ]);
});
io.configure('development', function(){
 io.set('transports', ['websocket']);
});

Comme vous pouvez le voir, socket.io utilise configurer, définir, activer et désactiver pour la configuration.

1. Utilisez la méthode configure pour configurer le comportement dans différents environnements d'exploitation ; c'est-à-dire activer différentes options de configuration dans différents environnements. Le premier paramètre de configure est l'environnement d'exécution et le deuxième paramètre est la fonction de configuration. L'environnement d'exécution est généralement celui de la production ou du développement. Bien entendu, n'importe quelle chaîne peut être utilisée ici. Si le premier paramètre de configure est omis, cela signifie que la configuration suivante est publique et valide quel que soit l'environnement dans lequel il s'agit.

2. Après avoir configuré différents environnements d'exploitation, comment définir l'environnement dans lequel il s'exécute actuellement ? Ceci est réalisé en modifiant la valeur de la variable d'environnement NODE_ENV sur la ligne de commande.

3. Dans la fonction de configuration configurer, nous pouvons utiliser définir, activer et désactiver pour définir les options associées.

4. Référence pour les éléments configurables spécifiques : https://github.com/LearnBoost/Socket.IO/wiki/Configuring-Socket.IO
Référence pratique

Présentation de Socket.io : http://davidchambersdesign.com/getting-started-with-socket.io/

Instructions d'installation et d'utilisation de socket.io : http://socket.io/

Wiki socket.io : https://github.com/LearnBoost/Socket.IO/wiki

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery réalise un produit avec rotation automatique à 360 degrés, affichage des effets spéciaux, code source Sharing_jqueryArticle suivant：jQuery réalise un produit avec rotation automatique à 360 degrés, affichage des effets spéciaux, code source Sharing_jquery

Articles Liés

Voir plus