Praktische Anwendung der WebSocket-Technologie in Online-Chatrooms-PHP-Tutorial-php.cn

Praktische Anwendung der WebSocket-Technologie in Online-Chatrooms

WBOY

Freigeben： 2023-10-15 11:50:02

Original

1297 Leute haben es durchsucht

Praktische Anwendung der WebSocket-Technologie in Online-Chatrooms

Mit der rasanten Entwicklung des Internets wird die Nachfrage der Menschen nach Instant Messaging immer größer. Obwohl das herkömmliche HTTP-Protokoll Daten übertragen kann, muss es jedes Mal eine Anfrage initiieren, was ineffizient ist. Um dieses Problem zu lösen, wurde die WebSocket-Technologie entwickelt. Die WebSocket-Technologie kann einen dauerhaften, bidirektionalen Kommunikationskanal zwischen dem Browser und dem Server einrichten und so die Effizienz und Echtzeitleistung der Datenübertragung erheblich verbessern. Daher wird sie häufig in Online-Chatrooms eingesetzt.

Vorteile von WebSocket:

Geringere Latenz: Im Vergleich zum herkömmlichen HTTP-Request-Response-Modell kann die WebSocket-Technologie eine dauerhafte Verbindung herstellen, eine sofortige Kommunikation erreichen und Chat-Inhalte schneller an andere Benutzer senden.
Weniger Netzwerkverkehr: Die WebSocket-Technologie überträgt Daten mehrmals, indem sie eine Verbindung herstellt, anstatt jedes Mal eine HTTP-Anfrage zu senden. Dadurch wird die Anzahl der Pakete reduziert und der Netzwerkverkehr reduziert.
Bessere Kompatibilität: Der Standard der WebSocket-Technologie ist ausgereift und wird von modernen Browsern weitgehend unterstützt, ohne dass zusätzliche Plug-Ins oder Bibliotheken erforderlich sind.

Im Folgenden wird anhand eines Online-Chatrooms die praktische Anwendung der WebSocket-Technologie vorgestellt.

Zuerst verwenden wir serverseitig Node.js als Backend-Sprache. Der Vorteil der Verwendung von Node.js besteht darin, dass Sie die JavaScript-Sprache für die Entwicklung verwenden können, was die Interaktion mit dem Frontend erleichtert.

//引入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);
  });
});

Nach dem Login kopieren

Auf der Clientseite verwenden wir HTML, CSS und JavaScript, um die Benutzeroberfläche und die Kommunikation mit dem Server zu implementieren.

<!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>

Nach dem Login kopieren

Der obige Code implementiert einen einfachen Online-Chatroom. Wenn ein Benutzer über einen Browser auf eine Seite zugreift, wird eine WebSocket-Verbindung hergestellt und die vom Benutzer eingegebene Nachricht an den Server gesendet. Der Server leitet die empfangenen Nachrichten an andere verbundene Benutzer weiter und realisiert so die Echtzeit-Chat-Funktion.

Durch die WebSocket-Technologie wird die praktische Anwendung von Online-Chatrooms realisiert. Die bidirektionale Kommunikation von WebSocket kann Zeitverzögerungen und Netzwerkverkehr effektiv reduzieren und so für ein besseres Benutzererlebnis sorgen. Da sich die WebSocket-Technologie ständig weiterentwickelt und verbessert, glaube ich, dass sie in weiteren Bereichen eingesetzt und gefördert wird.

Das obige ist der detaillierte Inhalt vonPraktische Anwendung der WebSocket-Technologie in Online-Chatrooms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!