WebSocket實現一對一聊天詳解

一、WebSocket介紹

WebSocket是一種在單個TCP連接上進行全雙工通信的協議。它在客戶端和伺服器之間建立了一條持久連接，可以支持服務端主動向客戶端推送數據，實現了實時通訊。相比較HTTP協議，WebSocket能夠降低客戶端與伺服器之間的數據交換延遲。WebSocket協議類似於Socket，但是能夠與HTTP協議共用同一個埠。它與HTTP協議一樣，都是應用層協議，基於TCP協議之上，但是它比HTTP協議更加輕量、更加簡單，是現代互聯網應用中不可或缺的一部分。

二、WebSocket使用場景

目前，WebSocket被廣泛應用於Web即時通訊、在線遊戲、大屏展示、行情推送等領域，在實時通訊方面尤其受到重視。 傳統的HTTP協議的痛點在於客戶端向伺服器發送請求後，伺服器會立即響應結果並且關閉連接，這樣如果有新的數據需要返回就需要重新建立連接，造成了較大的性能損耗。而WebSocket協議則通過建立一條持久連接，實現了實時雙向通信，解決了這個問題。

三、實現一對一聊天

下面我們來介紹如何使用WebSocket協議實現一對一聊天功能。首先需要明確的是，要實現一對一聊天功能，需要精準的建立雙方的身份和聯繫方式，這可以通過類似註冊、登錄這樣的流程實現。這裡不涉及這些流程，我們主要關注聊天功能實現。

四、建立WebSocket連接

在HTML中，我們可以使用WebSocket API來建立與服務端的連接。以下代碼演示了如何在JavaScript中創建WebSocket對象。

let ws = new WebSocket("wss://example.com/chat");

其中，wss表示使用HTTPS的WebSocket協議，example.com是指伺服器的域名或IP地址，chat是指服務端的WebSocket處理程序名稱。

五、實現後端WebSocket伺服器

在服務端，我們需要實現WebSocket的處理程序，接收來自客戶端的連接請求，並保持連接。當需要發送數據時，通過WebSocket將數據發送給所有連接著的客戶端。以下是示例代碼：

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('received: %s', message);
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

WebSocket.Server是一個WebSocket伺服器類。通過調用其構造函數，我們可以指定要監聽的埠。在此示例中，我們將WebSocket.Server監聽在8080埠上。

在處理程序內部，當有客戶端連接到WebSocket.Server時，’connection’事件將會被觸發。連接建立之後，我們可以對消息進行監聽。當接收到任何消息時，我們會將消息發送給所有連接著的客戶端。

六、實現前端WebSocket客戶端

在前端中，我們可以使用WebSocket API來建立對WebSocket伺服器的連接。以下是示例代碼：

let ws = new WebSocket("wss://example.com/chat");

ws.onopen = function() {
  ws.send('Hello, Server!');
};

ws.onmessage = function(e) {
  console.log('Received message: ' + e.data);
};

當WebSocket連接打開時，’open’事件將被觸發。我們可以在此時向伺服器發送一條消息。在收到來自伺服器的消息時，’message’事件將會被觸發，我們可以在事件處理程序中處理收到的消息。

七、實現一對一聊天功能

現在我們已經建立了WebSocket伺服器和客戶端的連接，接下來我們可以通過這個連接實現一對一聊天功能。下面是一對一聊天功能的大致實現：

let ws = new WebSocket("wss://example.com/chat");

ws.onopen = function() {
  ws.send('Hello, Server!');
};

ws.onmessage = function(e) {
  console.log('Received message: ' + e.data);
  
  //將接收到的消息顯示到頁面上
  let messageEl = document.createElement('div');
  messageEl.innerText = e.data;
  document.getElementById('messages').appendChild(messageEl);
};

let sendBtn = document.getElementById('send');
sendBtn.onclick = function() {
  let message = document.getElementById('message').value;
  
  //將消息發送給對方
  ws.send(message);
  
  //將自己發送的消息顯示到頁面上
  let messageEl = document.createElement('div');
  messageEl.innerText = message;
  document.getElementById('messages').appendChild(messageEl);
};

首先，我們監聽頁面上的send按鈕的點擊事件，當點擊按鈕時，我們獲取輸入框中的文本，然後通過WebSocket將文本發送給對方。將自己發送的消息顯示到頁面上，可以實現類似於QQ一樣的消息框。當接收到對方的消息時，我們也將消息顯示到頁面上。

八、總結

本文介紹了WebSocket協議的基本概念和使用方法，並且以一對一聊天為例詳細介紹了如何使用WebSocket實現聊天功能。有了WebSocket，我們可以實現實時雙向通信，極大地提升了Web應用的易用性和性能。WebSocket的應用場景不僅局限於聊天，還包括遊戲、行情推送、在線投票等。希望本文能對使用WebSocket協議開發Web應用的同學們有所幫助。