如何解決WebSocket的相容性

smallbone發表於2018-05-06
Web

我們知道WebSocket是一種在伺服器與客戶端雙向通訊的技術，使用原生的WebSocket可以最小化 伺服器資源的使用並且為兩者提供了一種統一的通訊方式。隨著HTML5的普及，現代瀏覽器（IE10+）基本上都已經原生支援WebSocket了，下面是支援WebSocket協議的瀏覽器：

  • Internet Explorer 10
  • Firefox 6
  • Chrome 14
  • Safari 6.0
  • Opera 12.1
  • iOS Safari 6.0
  • Chrome for Android 27.0 但是對於舊的瀏覽器該如何實現WebSocket的功能呢？下面就介紹一下幾種常見的解決方案：

1. SockJS

SockJS是一個JavaScript庫，它為瀏覽器提供了一個類似WebSocket的物件。首先，它會優先使用原生的WebSocket；如果不支援，則使用streaming；如果streaming也不支援，則使用輪詢（polling）。下面是支援的瀏覽器概覽：

Alt text
既然模擬WebSocket雙向通訊，那麼使用SockJS時，也要配合使用相應的伺服器端的庫，下面可以使用的伺服器端庫：

  • SockJS-node
  • SockJS-erlang
  • SockJS-tornado
  • SockJS-twisted
  • SockJS-ruby
  • SockJS-netty
  • SockJS-gevent (SockJS-gevent fork)
  • SockJS-go

客戶端的使用

首先載入SockJS庫

<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
複製程式碼

庫載入完後， 就可與SockJS伺服器建立連線了

var sock = new SockJS('https://mydomain.com/my_prefix');
 sock.onopen = function() {
     console.log('open');
     sock.send('test');
 };

 sock.onmessage = function(e) {
     console.log('message', e.data);
     sock.close();
 };

 sock.onclose = function() {
     console.log('close');
 };
複製程式碼

伺服器端的使用(NodeJS)

首先，安裝sockjs-node:

npm install sockjs
複製程式碼

接著就可以通過監聽事件來與客戶端進行類似WebSocket的通訊了

var http = require('http');
var sockjs = require('sockjs');

var echo = sockjs.createServer({ sockjs_url: 'http://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js' });
echo.on('connection', function(conn) {
    conn.on('data', function(message) {
        conn.write(message);
    });
    conn.on('close', function() {});
});

var server = http.createServer();
echo.installHandlers(server, {prefix:'/echo'});
server.listen(9999, '0.0.0.0');
複製程式碼

2. Socket.IO

Socket.IO能夠啟用基於事件的雙向通訊，使用它同樣也需要搭建相應的服務端；首先它也會首選WebSocket，如果不支援則會使用下面的替代方案：

  • Adobe Flash Socket（缺點：需要在伺服器上開啟一個額外的埠，預設為10843）
  • Ajax long polling
  • Ajax multipart streaming
  • Forever iframe
  • JSONP polling

瀏覽器相容性

如何解決WebSocket的相容性

客戶端

//載入Socket.IO庫
<script src="http://localhost:8181/socket.io/socket.io.js"></script>
<script>
    var socket = io.connect('http://localhost:8181');
        console.log('a user connected');
        socket.emit('my other event', { my: 'data' });
        socket.on('disconnect', function(){
        console.log('user disconnected');
    });
</script>
複製程式碼

服務端

安裝socket.io

npm install socket.io --save
複製程式碼

配置伺服器

var server = require('http').createServer();
var io = require('socket.io')(server);
io.on('connection', function(socket){
    socket.emit('news', { hello: 'world' });
    socket.on('event', function(data){});
    socket.on('disconnect', function(){});
});
server.listen(3000);
複製程式碼

相關文章