在網路應用中使用WebSocket實現即時聊天功能-php教程-PHP中文網

在網路應用中使用WebSocket實現即時聊天功能

PHPz

發布： 2023-10-15 08:22:01

原創

1274 人瀏覽過

在網路應用中使用WebSocket實現即時聊天功能

在網路應用程式中使用WebSocket實現即時聊天功能，需要具體程式碼範例

在現代的網路應用程式中，即時聊天是一項非常常見的功能。使用傳統的HTTP協定進行通訊是不適合即時性的，因此需要藉助WebSocket來實現即時聊天功能。

WebSocket是HTML5中的一項新技術，它提供了一種在網頁瀏覽器和伺服器之間進行全雙工通訊的協定。相較於傳統的HTTP，WebSocket具有低延遲、高效率和可靠性的特點，非常適合實現即時聊天功能。

下面我會給出一個具體的程式碼範例，示範如何在網路應用中使用WebSocket實現即時聊天功能。

首先，在前端程式碼中建立WebSocket對象，並建立與伺服器的連線。

const socket = new WebSocket('ws://localhost:8000/chat');

// 连接建立成功后的回调函数
socket.onopen = function() {
  console.log('WebSocket连接已建立');
};

// 接收到消息时的回调函数
socket.onmessage = function(event) {
  const message = JSON.parse(event.data);
  console.log('收到消息：', message);
};

// 关闭连接时的回调函数
socket.onclose = function() {
  console.log('WebSocket连接已关闭');
};

// 发送消息的函数
function sendMessage(message) {
  socket.send(JSON.stringify(message));
}

登入後複製

以上程式碼建立了一個WebSocket對象，並用它與伺服器建立了連線。在建立連線後，我們可以透過WebSocket物件的onmessage事件來接收伺服器傳遞過來的訊息，並透過onclose事件監聽連線關閉的情況。透過呼叫socket.send方法可以發送訊息到伺服器。

接下來，我們需要在伺服器端實作WebSocket的處理邏輯。

const WebSocket = require('ws');

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

// 保存所有连接到服务器的客户端
const clients = new Set();

// 处理客户端连接事件
wss.on('connection', function(ws) {
  console.log('客户端已连接');

  // 将客户端添加到集合中
  clients.add(ws);

  // 处理收到消息的事件
  ws.on('message', function(message) {
    console.log('收到消息：', message);

    // 将消息发送给所有连接的客户端
    clients.forEach(function(client) {
      client.send(message);
    });
  });

  // 处理连接关闭事件
  ws.on('close', function() {
    console.log('客户端已关闭');

    // 将客户端从集合中移除
    clients.delete(ws);
  });
});

登入後複製

以上程式碼建立了一個WebSocket伺服器，並監聽8000埠。在連線事件中，我們將客戶端保存在一個集合中，當收到客戶端發送的訊息時，遍歷集合會將訊息傳送給所有連線的用戶端。在連線關閉事件中，我們將關閉的客戶端從集合中移除。

將以上的前端和後端程式碼分別儲存到index.html和server.js檔案中，並在終端機中執行以下命令啟動伺服器：