解決WebSocket的兼容性問題及過程

更新時間：2025年12月16日 15:30:16 作者：smallbone

本文介紹了如何解決WebSocket的兼容性問題,包括原生WebSocket和SockJS、Socket.IO等解決方案

解決WebSocket的兼容性

我們知道WebSocket是一種在服務(wù)器與客戶端雙向通訊的技術(shù)，使用原生的WebSocket可以最小化服務(wù)器資源的使用并且為兩者提供了一種統(tǒng)一的通信方式。

隨著HTML5的普及，現(xiàn)代瀏覽器（IE10+）基本上都已經(jīng)原生支持WebSocket了，下面是支持WebSocket協(xié)議的瀏覽器：

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

1.SockJS

SockJS是一個JavaScript庫，它為瀏覽器提供了一個類似WebSocket的對象。首先，它會優(yōu)先使用原生的WebSocket；如果不支持，則使用streaming；如果streaming也不支持，則使用輪詢（polling）。

下面是支持的瀏覽器概覽：

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服務(wù)器建立連接了

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');
 };

服務(wù)器端的使用(NodeJS)

首先，安裝sockjs-node:

npm install sockjs

接著就可以通過監(jiān)聽事件來與客戶端進行類似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能夠啟用基于事件的雙向通信，使用它同樣也需要搭建相應(yīng)的服務(wù)端；首先它也會首選WebSocket，如果不支持則會使用下面的替代方案：

Adobe Flash Socket（缺點：需要在服務(wù)器上打開一個額外的端口，默認為10843）
Ajax long polling
Ajax multipart streaming
Forever iframe
JSONP polling

瀏覽器兼容性

客戶端

//加載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>

服務(wù)端

安裝socket.io

npm install socket.io --save

配置服務(wù)器

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);