JavaScript et WebSocket : créez un système efficace de collecte de données en temps réel

JavaScript et WebSocket : créez un système efficace de collecte de données en temps réel

Dans les applications Web modernes, le traitement des données en temps réel devient de plus en plus courant. Étant donné que la transmission de données arbitraires en temps réel nécessite d’éviter les retards, nous devons utiliser une méthode de communication efficace. Cet article expliquera comment utiliser JavaScript et WebSocket pour créer un système efficace de collecte de données en temps réel et fournira des exemples de code spécifiques.

WebSocket est un protocole full-duplex qui permet des connexions à long terme entre clients et serveurs. Lorsque la quantité de données requise est importante, WebSocket présente souvent des avantages par rapport à l'utilisation du transport de communication HTTP. De plus, le protocole WebSocket est utilisé simultanément avec le protocole HTTP, ce qui facilite l'intégration dans les applications web existantes.

Voici un exemple d'implémentation de base :

• Tout d'abord, créez un objet WebSocket :

  var socket = new WebSocket('ws://example.com/socket');

Cela créera un An Objet WebSocket en ligne qui établit une connexion à long terme au serveur. L'URL « ws://example.com/socket » pointe vers le serveur WebSocket.

• Ensuite, écoutez les événements WebSocket :

  socket.addEventListener('open', function (event) {

    console.log('WebSocket连接已建立');

  Copier après la connexion

  });

  socket.addEventListener('message', function (event) {

    console.log('Received:', event.data);

  Copier après la connexion

  });

  socket.addEventListener('close', function (event) {

    console.log('WebSocket连接已关闭');

  Copier après la connexion

  });

Ici, la fonction addEventListener() est utilisée pour ajouter un gestionnaire d'événements pour répondre aux événements WebSocket. L'événement 'open' sera déclenché lorsque la connexion WebSocket est établie, l'événement 'message' sera déclenché lorsque les données seront reçues et l'événement 'close' sera déclenché lorsque la connexion WebSocket sera fermée.

• Enfin, envoyez/recevez des données WebSocket :

  socket.send('Hello World'); // Envoyer des données

  var data = JSON.parse(event.data); Cet exemple simple montre comment utiliser JavaScript et WebSocket pour établir une connexion client-serveur en temps réel. Cependant, les applications réelles nécessitent davantage de code pour gérer davantage de situations et de détails techniques.

Voici un exemple d'application WebSocket plus complet :

Côté serveur

const WebSocket = require('ws');
const wss = new WebSocket.Server({
  port: 8080
});
console.log("WebSocket server started...");
 
wss.on('connection', function(ws) {
    console.log("WebSocket client connected...");
 
    ws.on('message', function(message) {
        console.log("Message received:"+message);
        if (message === 'close') {
            ws.close();
        }
        else {
            wss.clients.forEach(function each(client) {
                if (client.readyState === WebSocket.OPEN) {
                    console.log("Broadcasting:", message);
                    client.send(message);  // 实现广播
                }
            });
        }
    });
 
    ws.on('close', function() {
        console.log("WebSocket closed...");
    });
});

Client

• var ws = new WebSocket('ws://localhost:8080');
  console.log("WebSocket client started...");
   
  ws.onmessage = function(msg) {
      console.log("Received: " + msg.data);
  };
   
  ws.onclose = function() {
      console.log("WebSocket closed...");
  };
   
  function send() {
      var val = document.getElementById('input').value;
      console.log("Sending: " + val);
      ws.send(val);
  }
   
  function close() {
      console.log("Closing WebSocket...");
      ws.send('close');
      ws.close();
  }
  

  Copier après la connexion

Cet article fournit des exemples d'implémentation de base de JavaScript et de WebSocket, ainsi qu'un exemple de code complet de serveur et de client. Tout le monde peut commencer à utiliser WebSockets et commencer à créer ses propres applications de collecte de données en temps réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!