Implémentation frontale de scénarios d'application Websocket et implémentation logique

En plus de la logique métier de base, le front-end peut également implémenter une logique d'interaction plus complexe en fonction des besoins métier spécifiques, tels que :

Synchronisation des données : WebSocket peut être utilisé pour mettre à jour les données en temps réel. Lorsque les données côté serveur changent, les données modifiées sont poussées vers le front-end via WebSocket pour maintenir la synchronisation des données en temps réel.
Fonction de chat : utilisez WebSocket pour implémenter la fonction de chat en temps réel. Les utilisateurs frontaux peuvent envoyer des messages au serveur et recevoir des messages envoyés par d'autres utilisateurs.
Édition collaborative multi-utilisateurs : synchronisez les opérations d'édition entre plusieurs utilisateurs en temps réel via WebSocket pour réaliser une fonction d'édition collaborative multi-utilisateurs.
Affichage des données en temps réel : transmettez les données en temps réel du serveur au front-end et affichez-les sur la page, telles que les cotations boursières, la météo en temps réel, etc.

logique d'implémentation de Websocket

Connection établie:
- Le gestionnaire d'événements est déclenché lorsque la connexion WebSocket est établie avec succès onopen.
- Vous pouvez envoyer des informations d'authentification ou d'autres données d'initialisation au serveur dans ce gestionnaire, telles que l'authentification de l'utilisateur, l'abonnement à un canal spécifique, etc.
Envoi et réception de messages :
- onmessageLe gestionnaire d'événements est déclenché lorsqu'un message envoyé par le serveur est reçu .
- Il peut analyser et traiter le contenu du message envoyé par le serveur et effectuer les opérations correspondantes en fonction des besoins de l'entreprise, comme l'afficher sur la page, mettre à jour les données locales, etc.
- Si nécessaire, certains messages peuvent être classés et utiliser une logique de traitement différente.
La gestion des erreurs:
- Lorsqu'une erreur se produit, onerrorle gestionnaire d'événements est déclenché.
- Vous pouvez enregistrer des journaux, afficher des messages d'erreur, etc. dans ce gestionnaire.
Connexion fermée :
- oncloseLe gestionnaire d'événements est déclenché lorsque la connexion WebSocket est fermée .
- Ce gestionnaire peut être utilisé pour effectuer le nettoyage nécessaire, les tentatives de reconnexion ou afficher les informations d'état.
Déconnexion et reconnexion :
- Si la connexion WebSocket est déconnectée en raison de problèmes de réseau ou pour d'autres raisons, vous pouvez essayer de vous reconnecter automatiquement.
- Vous pouvez oncloseimplémenter une logique de reconnexion dans le gestionnaire d'événements, par exemple attendre un certain temps avant de tenter de vous reconnecter au serveur.
Maintien du rythme cardiaque :
- Si vous devez maintenir la connexion WebSocket active, vous pouvez implémenter un mécanisme de battement de cœur.
- Des messages Heartbeat peuvent être envoyés régulièrement au serveur pour garantir que la connexion ne sera pas déconnectée en raison d'une absence de transmission de données pendant une longue période.

Exemple de code :

// 创建 WebSocket 连接
const socket = new WebSocket('ws://example.com/socket');

// 连接成功时触发
socket.onopen = function(event) {
    
    
  console.log('WebSocket 连接已建立');
  
  // 发送消息到服务器
  socket.send('Hello, server!');
};

// 接收到服务器发送的消息时触发
socket.onmessage = function(event) {
    
    
  const message = event.data;
  console.log('收到消息：', message);
  
  // 关闭 WebSocket 连接
  socket.close();
};

// 连接关闭时触发
socket.onclose = function(event) {
    
    
  console.log('WebSocket 连接已关闭');
};

// 连接发生错误时触发
socket.onerror = function(error) {
    
    
  console.error('WebSocket 错误:', error);
};

Tout d’abord, new WebSocket(url)créez un objet WebSocket et spécifiez l’adresse du serveur auquel vous connecter. Ensuite, gérez différents événements en définissant divers gestionnaires d'événements de l'objet WebSocket, tels que onopenla gestion du succès de la connexion, onmessagela gestion de la réception des messages, onclosela gestion de la fermeture de la connexion, etc. Dans onopenle gestionnaire, vous pouvez utiliser send()la méthode pour envoyer des messages au serveur. Dans onmessagele gestionnaire, vous pouvez event.dataobtenir le contenu du message envoyé par le serveur.

Doit être ws://example.com/socketremplacé par l'adresse réelle du serveur WebSocket en fonction de la situation réelle. En règle générale, le backend fournit un serveur WebSocket auquel le frontend peut se connecter.

De plus, il convient de noter que les connexions WebSocket sont asynchrones et ne peuvent être connectées qu'à des serveurs prenant en charge le protocole WebSocket dans le navigateur. Pendant le développement, vous pouvez utiliser localhostou déployer un serveur local à des fins de test.

Le front-end implémente la surveillance du rythme cardiaque WebSocket

Pour implémenter la surveillance du rythme cardiaque WebSocket sur le front-end, vous pouvez utiliser une minuterie pour envoyer régulièrement des messages de rythme cardiaque afin de maintenir la connexion active. Voici un exemple de code :

// 创建 WebSocket 连接
const socket = new WebSocket('ws://example.com/socket');

// 心跳相关变量
let heartbeatTimer = null;
const heartbeatInterval = 30000; // 心跳间隔时间，单位为毫秒

// 连接成功时触发
socket.onopen = function(event) {
    
    
  console.log('WebSocket 连接已建立');
  
  // 开始发送心跳消息
  startHeartbeat();
};

// 接收到服务器发送的消息时触发
socket.onmessage = function(event) {
    
    
  const message = event.data;
  console.log('收到消息：', message);
  // 处理接收到的消息
  
  // 重置心跳计时器
  resetHeartbeat();
};

// 连接关闭时触发
socket.onclose = function(event) {
    
    
  console.log('WebSocket 连接已关闭');
  
  // 停止心跳计时器
  stopHeartbeat();
};

// 连接发生错误时触发
socket.onerror = function(error) {
    
    
  console.error('WebSocket 错误:', error);
  
  // 停止心跳计时器
  stopHeartbeat();
};

// 发送心跳消息
function sendHeartbeat() {
    
    
  socket.send('heartbeat'); // 发送心跳消息
}

// 开始心跳
function startHeartbeat() {
    
    
  heartbeatTimer = setInterval(sendHeartbeat, heartbeatInterval);
}

// 重置心跳计时器
function resetHeartbeat() {
    
    
  clearInterval(heartbeatTimer); // 清除旧的计时器
  heartbeatTimer = setInterval(sendHeartbeat, heartbeatInterval); // 开启新的计时器
}

// 停止心跳
function stopHeartbeat() {
    
    
  clearInterval(heartbeatTimer);
}

Nous avons créé une variable de minuterie nommée heartbeatTimer et défini l'intervalle de battement de coeur sur 30 secondes (30 000 millisecondes). Lorsque la connexion est établie avec succès, la fonction startHeartbeat() est appelée pour commencer à envoyer des messages de battement de cœur, et la fonction resetHeartbeat() est appelée pour réinitialiser le minuteur de battement de cœur lorsqu'un message envoyé par le serveur est reçu. Lorsque la connexion est fermée ou qu'une erreur se produit, la fonction stopHeartbeat() est appelée pour arrêter le minuteur de pulsation.

Grâce à l'implémentation ci-dessus, le minuteur appellera périodiquement la fonction sendHeartbeat() pour envoyer des messages de battement de cœur au serveur afin de maintenir la connexion active. Chaque fois qu'un message est reçu du serveur, le minuteur de pulsation est réinitialisé pour garantir que la connexion ne sera pas déconnectée en raison d'une longue période sans transmission de données.