切換語言為:簡體

WebSocket 使用注意事項與適用場景

  • 爱糖宝
  • 2024-06-27
  • 2096
  • 0
  • 0

前言

很多人有疑問,安全可靠的http短連線不使用,為什麼需要WebSocket呢? WebSocket是一種在單個 TCP 連線上進行全雙工通訊的協議。它提供了連續的雙向數據流,可以實時地在客戶端和伺服器間傳送資料。本篇文章將詳細講解 WebSocket 的使用注意事項以及適用場景,並透過程式碼案例展示如何在 Web 服務中對接 WebSocket 和 HTTP。

注意事項

首先需要知道是WebSocket也有弊端,下面簡單介紹WebSocket的注意事項

  1. 相容性:儘管 WebSocket 在現代瀏覽器中得到了廣泛支援,但在舊版瀏覽器(如 IE8 及以下版本)中可能無法工作。因此,在使用 WebSocket 時,請確保你的目標使用者使用的瀏覽器支援 WebSocket 協議。如有必要,可使用 polyfill 或長輪詢等技術作為相容方案。

  2. 安全性:WebSocket 通訊可能容易受到攻擊,例如跨站指令碼攻擊(XSS)和跨站請求偽造攻擊(CSRF)。為避免這些安全隱患,務必對 WebSocket 通訊進行加密(如使用 wss:// 協議),並驗證客戶端身份。

  3. 資源消耗:由於 WebSocket 需要伺服器始終保持與客戶端的連線,這可能導致伺服器負載加重及資源消耗增加。在選擇使用 WebSocket 時,請充分評估伺服器效能,確保其能夠應對大量客戶端連線。

  4. 錯誤處理:與 HTTP 請求不同,WebSocket 連線在建立後保持長連線,因此錯誤處理方式也有所不同。要確保正確處理連線關閉、訊息錯誤等情況,同時對異常情況進行監控和報警。

  5. 擴充套件性:當專案需要擴充套件時,考慮 WebSocket 如何適應新的需求和變化。例如,當需要支援更多客戶端型別時,如何保證 WebSocket 服務的穩定性和可擴充套件性。

適用場景與程式碼案例

接下來重點介紹WebSocket兩種重要使用場景:實時通訊和資料推送

實時通訊

WebSocket 非常適合實時通訊場景,如線上聊天。下面的程式碼示例展示瞭如何使用 Node.js 和 WebSocket 庫搭建一個簡單的線上聊天室。

伺服器端程式碼

const express = require('express');
const WebSocket = require('ws');

const app = express();
const server = new WebSocket.Server({ noServer: true });

app.use(express.static('public'));

server.on('connection', (socket) => {
  console.log('User connected');

  socket.on('message', (message) => {
    server.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  socket.on('close', () => {
    console.log('User disconnected');
  });
});

const port = process.env.PORT || 3000;
const serverInstance = app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

客戶端程式碼(HTML + JavaScript)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
 <title>WebSocket Chat</title>
</head>
<body>
  <div id="chat"></div>
  <form id="message-form">
   <input type="text" id="message-input" placeholder="Type a message">
   <button type="submit">Send</button>
  </form>

 <script>
    const chat = document.getElementById('chat');
    const messageForm = document.getElementById('message-form');
    const messageInput = document.getElementById('message-input');

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

    socket.addEventListener('message', (event) => {
      const message = document.createElement('div');
      message.textContent = event.data;
      chat.appendChild(message);
    });

    messageForm.addEventListener('submit', (event) => {
      event.preventDefault();
      const message = messageInput.value;
      socket.send(message);
      messageInput.value = '';
    });
  </script>
</body>
</html>

資料推送

在需要伺服器主動向客戶端推送資料的場景中,WebSocket 表現優秀。下面的程式碼示例展示瞭如何使用 Node.js 和 WebSocket 實現一個簡單的實時資料推送服務。

伺服器端程式碼

const express = require('express');
const WebSocket = require('ws');

const app = express();
const server = new WebSocket.Server({ noServer: true });

let counter = 0;
setInterval(() => {
  server.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(`Data: ${counter++}`);
    }
  });
}, 1000);

app.use(express.static('public'));

server.on('connection', (socket) => {
  console.log('User connected');
  socket.on('close', () => {
    console.log('User disconnected');
  });
});

const port = process.env.PORT || 3000;
const serverInstance = app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

客戶端程式碼(HTML + JavaScript)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
 <title>WebSocket Data Push</title>
</head>
<body>
  <div id="data"></div>

 <script>
    const dataDiv = document.getElementById('data');

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

    socket.addEventListener('message', (event) => {
      const data = document.createElement('div');
      data.textContent = event.data;
      dataDiv.appendChild(data);
    });
  </script>
</body>
</html>

透過以上程式碼示例,我們可以看到 WebSocket 在實時通訊和資料推送場景中的應用。同時,請注意在使用 WebSocket 時關注上述提及的注意事項。

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.