使用nodeJs建立websocket server

實作 websocket server的方式有很多種, 因筆者比較熟悉nodeJs, 就只介紹nodeJs, 而目前nodeJs 最熱門的套件有兩種

1. socket.io

2. websocket

socket.io 可以在瀏覽器不支援 websocket的情況下, 打 ajax 到 server 端, 等於自動降級轉換為 polling 型態進行通訊, 所以他是真正的全方面跨瀏覽器支援, 以下直接用 code 來看看這兩種哪裡不同

server side

WebSocket Server

var path = require('path');
var app = require('express')();
var ws = require('express-ws')(app);
app.get('/', (req, res) => {
  console.error('express connection');
  res.sendFile(path.join(__dirname, 'ws.html'));
});
app.ws('/', (s, req) => {
  console.error('websocket connection');
  for (var t = 0; t < 3; t++)
    setTimeout(() => s.send('message from server', ()=>{}), 1000*t);
});
app.listen(3001, () => console.error('listening on http://localhost:3001/'));

Socket.IO Server

var path = require('path');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', (req, res) => {
  console.error('express connection');
  res.sendFile(path.join(__dirname, 'si.html'));
});
io.on('connection', s => {
  console.error('socket.io connection');
  for (var t = 0; t < 3; t++)
    setTimeout(() => s.emit('message', 'message from server'), 1000*t);
});
http.listen(3002, () => console.error('listening on http://localhost:3002/'));

Client-side

WebSocket Client

var l = document.getElementById('l');
var log = function (m) {
    var i = document.createElement('li');
    i.innerText = new Date().toISOString()+' '+m;
    l.appendChild(i);
}
log('opening websocket connection');
var s = new WebSocket('ws://'+window.location.host+'/');
s.addEventListener('error', function (m) { log("error"); });
s.addEventListener('open', function (m) { log("websocket connection open"); });
s.addEventListener('message', function (m) { log(m.data); });

Socket.IO Client

var l = document.getElementById('l');
var log = function (m) {
    var i = document.createElement('li');
    i.innerText = new Date().toISOString()+' '+m;
    l.appendChild(i);
}
log('opening socket.io connection');
var s = io();
s.on('connect_error', function (m) { log("error"); });
s.on('connect', function (m) { log("socket.io connection open"); });
s.on('message', function (m) { log(m); });

實際連線測試結果

WebSocket

2 requests, 1.50 KB, 0.05 s

1. HTML
2. websocket 請求

Socket.IO

6 requests, 181.56 KB, 0.25 s

1. HTML
2. Socket.IO.js
3. 第一次 long polling AJAX request
4. 第二次 long polling AJAX request
5. 第三次 long polling AJAX request
6. 連線升級為 WebSocket

總結

如果沒特別需要在IE6, IE7這種艱困的地方運行程式, 就選擇 websocket 吧

參考資料