Maison > Article > développement back-end > Application pratique de la technologie WebSocket dans les forums de discussion en ligne

Application pratique de la technologie WebSocket dans les forums de discussion en ligne

WBOYoriginal: 2023-10-15 11:37:411259parcourir

Avec le développement rapide d'Internet, la demande de messagerie instantanée est de plus en plus élevée. Bien que le protocole HTTP traditionnel puisse transmettre des données, il doit à chaque fois lancer une requête, ce qui est inefficace. Afin de résoudre ce problème, la technologie WebSocket a vu le jour. La technologie WebSocket peut établir un canal de communication bidirectionnel persistant entre le navigateur et le serveur, améliorant considérablement l'efficacité et les performances en temps réel de la transmission de données, elle a donc été largement utilisée dans les forums de discussion en ligne.

Avantages de WebSocket :

Latence plus faible : par rapport au modèle de requête-réponse HTTP traditionnel, la technologie WebSocket peut établir une connexion persistante, établir une communication instantanée et envoyer plus rapidement du contenu de discussion à d'autres utilisateurs.
Moins de trafic réseau : la technologie WebSocket transfère les données plusieurs fois en établissant une connexion au lieu d'envoyer une requête HTTP à chaque fois. Cela réduit le nombre de paquets et réduit le trafic réseau.
Meilleure compatibilité : le standard de la technologie WebSocket a mûri et est largement pris en charge par les navigateurs modernes sans avoir besoin de plug-ins ou de bibliothèques supplémentaires.

Ce qui suit prend comme exemple un salon de discussion en ligne pour présenter l'application pratique de la technologie WebSocket.

Tout d'abord, côté serveur, nous utilisons Node.js comme langage backend. L'avantage d'utiliser Node.js est que vous pouvez utiliser le langage JavaScript pour le développement, ce qui facilite l'interaction avec le front-end.

//引入WebSocket模块
const WebSocket = require('ws');

//创建WebSocket服务器
const wss = new WebSocket.Server({ port: 3000 });

//保存连接的用户
const users = new Set();

//WebSocket服务端启动成功后的回调函数
wss.on('listening', () => {
  console.log('WebSocket server is running on port 3000.');
});

//处理WebSocket连接
wss.on('connection', (ws) => {
  //将新用户添加到用户列表中
  users.add(ws);

  //监听消息事件
  ws.on('message', (message) => {
    //将消息发送给其他用户
    users.forEach((user) => {
      if (user !== ws) {
        user.send(message);
      }
    });
  });

  //监听连接关闭事件
  ws.on('close', () => {
    //将用户从用户列表中移除
    users.delete(ws);
  });
});

Côté client, nous utilisons HTML, CSS et JavaScript pour implémenter l'interface utilisateur et la communication avec le serveur.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>在线聊天室</title>
  <style>
    #chat { width: 400px; height: 300px; margin-bottom: 10px; overflow-y: auto; }
  </style>
</head>
<body>
  <div id="chat"></div>
  <input type="text" id="message" placeholder="请输入消息">
  <button id="send">发送</button>

  <script>
    const chat = document.getElementById('chat');
    const messageInput = document.getElementById('message');
    const sendButton = document.getElementById('send');

    //创建WebSocket连接
    const ws = new WebSocket('ws://localhost:3000');

    //监听WebSocket连接成功事件
    ws.addEventListener('open', () => {
      console.log('WebSocket connection is established.');
    });

    //监听WebSocket接收到消息事件
    ws.addEventListener('message', (event) => {
      const message = event.data;
      const messageNode = document.createElement('p');
      messageNode.textContent = message;
      chat.appendChild(messageNode);
    });

    //发送消息
    sendButton.addEventListener('click', () => {
      const message = messageInput.value;
      ws.send(message);
      messageInput.value = '';
    });
  </script>
</body>
</html>

Le code ci-dessus implémente un simple salon de discussion en ligne. Lorsqu'un utilisateur accède à une page via un navigateur, une connexion WebSocket est établie et le message saisi par l'utilisateur est envoyé au serveur. Le serveur transmettra les messages reçus aux autres utilisateurs connectés, réalisant ainsi la fonction de chat en temps réel.

Grâce à la technologie WebSocket, l'application pratique des salons de discussion en ligne est réalisée. La communication bidirectionnelle de WebSocket peut réduire efficacement les délais et le trafic réseau, offrant ainsi une meilleure expérience utilisateur. À mesure que la technologie WebSocket continue de se développer et de s'améliorer, je pense qu'elle sera appliquée et promue dans davantage de domaines.

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!

JavaScript css html JS http websocket

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：Conception et développement d'API RESTful utilisant le module de routage en PHPArticle suivant：Conception et développement d'API RESTful utilisant le module de routage en PHP

Application pratique de la technologie WebSocket dans les forums de discussion en ligne

Articles Liés