JavaScript et WebSocket : créez un système efficace de collecte de données en temps réel-js tutoriel-php.cn

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

PHPz

Libérer： 2023-12-18 13:00:51

original

684 Les gens l'ont consulté

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.

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...");
    });
});

Copier après la connexion

Dans cet exemple, le serveur acceptera les connexions client et diffusera à tous les clients connectés lorsqu'un message apparaît. Lorsqu'un message « fermer » est reçu, la connexion du client sera fermée. Notez que pour implémenter la diffusion, nous devons parcourir tous les clients connectés au serveur. Utiliser WebSocket comme noyau du système de collecte de données en temps réel est un choix efficace car il peut garantir une transmission plus efficace et plus stable par rapport à la transmission HTTP.

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

Le code client est affiché ci-dessus et il se connectera au serveur WebSocket créé précédemment. Lorsque le client reçoit un message, il affiche le contenu du message. La fonction "envoyer" recevra la valeur du champ de texte et l'enverra à tous les clients du serveur WebSocket. La fonction "close" fermera la connexion client WebSocket.

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!