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

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

WBOY

Libérer： 2023-12-18 12:49:11

original

781 Les gens l'ont consulté

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

De nos jours, la distribution de données en temps réel est devenue l'un des besoins commerciaux les plus importants des entreprises, et JavaScript et WebSocket sont devenus des outils puissants pour parvenir à une distribution efficace des données en temps réel. Cet article expliquera comment utiliser la technologie JavaScript et WebSocket pour créer un système de distribution de données en temps réel efficace et fournira des exemples de code spécifiques.

1. Qu'est-ce que WebSocket ?

Avant d'introduire WebSocket, vous devez d'abord comprendre le protocole HTTP. Le protocole HTTP est actuellement le protocole de couche application le plus couramment utilisé. Il se compose d'une requête et d'une réponse. Cependant, pour la communication en temps réel, il présente un défaut : il s'agit d'un protocole de modèle « requête-réponse ».

Sous le protocole HTTP, le client doit continuellement faire des requêtes au serveur pour obtenir des données, mais pour la distribution de données en temps réel, cette méthode n'est évidemment pas réalisable. C’est pourquoi WebSocket a vu le jour.

WebSocket est un protocole de communication full-duplex sur une seule connexion TCP, qui utilise le protocole HTTP pour l'établissement de liaison et utilise les sockets TCP pour le transfert de données. Le protocole WebSocket résout non seulement le problème de faible latence requis pour la communication en temps réel, mais résout également le problème de haute efficacité requis pour les données push du serveur.

2. Utilisez JavaScript et WebSocket pour réaliser une distribution de données en temps réel

Créez une connexion WebSocket

Utilisez l'objet WebSocket de JavaScript pour créer une connexion WebSocket. Voici un exemple :

var socket = new WebSocket('ws://localhost:8080');

Copier après la connexion

Écoute des événements WebSocket

Afin de gérer différents événements de connexions WebSocket, vous devez écouter certains événements WebSocket, notamment les événements onopen, onmessage, onerror et onclose. Comme indiqué ci-dessous :

socket.onopen = function () {
    console.log('WebSocket连接已建立');
};

socket.onmessage = function (event) {
    console.log('收到消息: ' + event.data);
};

socket.onerror = function (error) {
    console.log('WebSocket错误: ' + error);
};

socket.onclose = function (event) {
    console.log('WebSocket连接已关闭: ' + event.code + ' ' + event.reason);
};

Copier après la connexion

Lorsque la connexion WebSocket est établie avec succès, l'événement onopen sera déclenché ; lorsqu'un nouveau message est reçu, l'événement onmessage sera déclenché lorsqu'une erreur se produit dans la connexion WebSocket, l'événement onerror sera déclenché ; déclenché ; lorsque la connexion WebSocket est fermée, l'événement onclose sera déclenché.

Envoyer des messages WebSocket

Utilisez l'objet WebSocket de JavaScript pour envoyer des messages au serveur. Voici un exemple :

socket.send('Hello, WebSocket!');

Copier après la connexion

Fermer la connexion WebSocket

Vous pouvez utiliser la méthode close() pour fermer la connexion WebSocket. Comme indiqué ci-dessous :

socket.close();

Copier après la connexion

3. Exemple de code

Implémentation d'un serveur WebSocket à l'aide de la bibliothèque WebSocket de Node.js :

const WebSocket = require('ws');

const wss = new WebSocket.Server({
  port: 8080,
});

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('收到消息: %s', message);
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
        console.log('消息已广播: %s', message);
      }
    });
  });

  ws.on('close', function () {
    console.log('WebSocket连接关闭');
  });
});

Copier après la connexion

Implémentation d'un client WebSocket à l'aide de HTML et JavaScript :

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket实例</title>
  <meta charset="utf-8">
</head>
<body>
  <input type="text" id="message">
  <button onclick="send()">发送</button>
  <ul id="messages"></ul>
</body>
<script>
  var socket = new WebSocket('ws://localhost:8080');

  socket.onopen = function () {
    console.log('WebSocket连接已建立');
  };

  socket.onmessage = function (event) {
    console.log('收到消息: ' + event.data);
    var li = document.createElement("li");
    li.textContent = event.data;
    document.getElementById("messages").appendChild(li);
  };

  socket.onerror = function (error) {
    console.log('WebSocket错误: ' + error);
  };

  socket.onclose = function (event) {
    console.log('WebSocket连接已关闭: ' + event.code + ' ' + event.reason);
  };

  function send() {
    var message = document.getElementById("message").value;
    socket.send(message);
  }
</script>
</html>

Copier après la connexion

4. Résumé

En utilisant JavaScript et Technologie WebSocket, un système efficace de distribution de données en temps réel peut être construit. Le protocole WebSocket utilise une connexion TCP pour réaliser une communication en duplex intégral, ce qui peut résoudre le problème d'inefficacité du protocole HTTP. L'envoi et la réception de messages via des connexions WebSocket facilitent la distribution de données en temps réel du serveur au client. Cet article fournit des exemples de code détaillés, j'espère qu'il sera utile aux lecteurs.

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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