html5 websocket技術實現及應用案例

一、websocket基礎知識

WebSocket是一種網路通信協議，在客戶端和伺服器之間建立全雙工通信通道，可以實現實時通信的目的，是HTML5中新增的標準，可以在瀏覽器和伺服器之間建立持久性的連接。

WebSocket協議建立在TCP協議之上，客戶端的瀏覽器首先向伺服器發出一個HTTP請求，然後在伺服器端生成一個WebSocket對象，再根據請求頭中的「Upgrade」欄位判斷客戶端是否要升級協議，如果是的話就發送一個「101 Switching Protocols」的響應頭，表明已經同意進行協議升級，從而建立WebSocket連接。這意味著WebSocket協議可以同時在HTTP和TCP協議之上運行。

二、websocket實現和應用案例

1、websocket實現

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

socket.onopen = () => {
  console.log('WebSocket連接已打開');
};

socket.onmessage = event => {
  console.log(`收到消息：${event.data}`);
};

socket.onclose = event => {
  console.log(`WebSocket連接已關閉，關閉碼為：${event.code}`);
};

socket.onerror = error => {
  console.error(`WebSocket連接發生錯誤：${error}`);
};

2、應用案例1 – 實現實時聊天室

通過WebSocket實現實時聊天室，代碼如下：

const socket = new WebSocket('ws://localhost:8080/ws');
const form = document.getElementById('form');
const message = document.getElementById('message');

socket.addEventListener('message', event => {
  const li = document.createElement('li');
  li.innerText = event.data;
  document.getElementById('messages').appendChild(li);
});

form.addEventListener('submit', event => {
  event.preventDefault();
  const text = message.value;
  socket.send(text);
  message.value = '';
});

3、應用案例2 – 實現基於WebSocket的協作白板

通過WebSocket實現基於協作的白板，可以多人實時協作塗鴉和繪圖，代碼如下：

const socket = new WebSocket('ws://localhost:8080/ws');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
let isDrawing = false;

canvas.addEventListener('mousedown', event => {
  isDrawing = true;
});

canvas.addEventListener('mousemove', event => {
  if (isDrawing) {
    const x = event.clientX - canvas.offsetLeft;
    const y = event.clientY - canvas.offsetTop;
    context.lineTo(x, y);
    context.stroke();
    socket.send(JSON.stringify({ x, y }));
  }
});

canvas.addEventListener('mouseup', event => {
  isDrawing = false;
});

socket.addEventListener('message', event => {
  const data = JSON.parse(event.data);
  context.lineTo(data.x, data.y);
  context.stroke();
});

三、WebSocket與其他技術的結合

WebSocket可以與其他技術結合起來使用，例如：

1、與Node.js結合，使用ws庫實現WebSocket伺服器端：

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', socket => {
  console.log('WebSocket連接已打開');

  socket.on('message', message => {
    console.log(`收到消息：${message}`);
    server.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  socket.on('close', () => {
    console.log('WebSocket連接已關閉');
  });

  socket.on('error', error => {
    console.error(`WebSocket連接發生錯誤：${error}`);
  });
});

2、與GraphQL結合，使用subscriptions-transport-ws庫實現GraphQL實時訂閱。GraphQL是一種客戶端和伺服器之間數據通信的協議，可以使用subscriptions-transport-ws庫在WebSocket上實現實時訂閱：

const { SubscriptionServer } = require('subscriptions-transport-ws');
const { execute, subscribe } = require('graphql');
const { createServer } = require('http');
const { SubscriptionType } = require('./schema');

const schema = new GraphQLSchema({
  subscription: SubscriptionType,
});

const server = createServer((request, response) => {
  response.writeHead(404);
  response.end();
});

server.listen(8080, () => {
  console.log('GraphQL WebSocket服務已啟動');
});

const subscriptionServer = SubscriptionServer.create({
  schema,
  execute,
  subscribe,
}, {
  server,
  path: '/graphql',
});

四、WebSocket的優缺點

1、優點：

① 實現了實時通信，可以在客戶端和服務端之間建立持久性的連接；

② 支持用於多種用例，例如實時聊天、協作塗鴉、實時遊戲等；

③ 並發性高，可以在同一時間處理多個連接；

④ 跨平台兼容性好，可以在不同的操作系統和瀏覽器中使用。

2、缺點：

① WebSocket協議較為新穎，需要一定的學習和使用成本；

② 由於WebSocket是在HTTP協議之上實現的，因此無法直接與已有的TCP/IP協議的應用程序集成；

③ 由於WebSocket協議需要伺服器端主動向客戶端推送信息，因此需要較高的伺服器性能。