學習WebSocket(附: WebSocket + koa例子)

原文地址
github項目地址

1. 什麼是WebSocket?

WebSocket是一種在單個TCP鏈接上進行全雙工通訊的協議。
使得客戶端和服務器之間的數據交換變得更加簡單，容許服務端主動向客戶端推送數據。
在WebSocket API中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。

2. 優勢(參考維基)

WebSocket與HTTP對比圖

客戶端例子

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

    ws.onopen = () => {
        console.log('WebSocket onopen');
    }

    ws.onmessage = e => {
        console.log('WebSocket onmessage');
        console.log('WebSocket message received：', e);
        console.log('WebSocket data received：', e.data);
    }

    ws.onclose = e => {
        console.log("WebSocket onclose");
    };

1. WebSocket.onopen： 鏈接成功後調用
2. WebSocket.onmessage： 當接收到服務器消息時調用
3. WebSocket.onclose： 鏈接關閉後調用

服務端例子(koa)

const Koa = require('koa');
  const WebSocket = require('ws');

  const app = new Koa();
  const ws = new WebSocket.Server({port: 8888});

  ws.on('connection', ws => {
      console.log('server connection');

      ws.on('message', msg => {
        console.log('server receive msg：', msg);
      });

      ws.send('Information from the server');
  });

  app.listen(3000);

運行結果

客戶端

服務端

名詞解釋

1. 握手： 通常建立WebSocket連接, 須要經過瀏覽器發出請求,服務器作出迴應, 這個過程稱爲「握手」

參考連接

WebSocket協議：5分鐘從入門到精通
MDN