WebSocketの互換性の解決方法
5214 ワード
WebSocketは、サーバとクライアントの双方向通信技術であり、従来のWebSocketを使用することで、サーバリソースの使用を最小化し、両者に統一的な通信方式を提供することができることを知っています.HTML 5の普及に伴い、現代のブラウザ(IE 10+)は基本的に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は、ブラウザにWebSocketのようなオブジェクトを提供するJavaScriptライブラリです.まず、オリジナルのWebSocketを優先します.サポートされていない場合はstreamingを使用します.streamingもサポートされていない場合は、ポーリング(polling)を使用します.サポートされているブラウザの概要:WebSocketの双方向通信をシミュレートする以上、SockJSを使用する場合は、対応するサーバ側のライブラリを使用する必要があります.次に使用できるサーバ側のライブラリは、次のとおりです. SockJS-node SockJS-erlang SockJS-tornado SockJS-twisted SockJS-ruby SockJS-netty SockJS-gevent (SockJS-gevent fork) SockJS-go
クライアントの使用
まずSockJSライブラリをロードします
ライブラリのロードが完了すると、SockJSサーバに接続できます.
サーバ側の使用(NodeJS)
まず、sockjs-nodeをインストールします.
次に、イベントをリスニングすることでクライアントとWebSocketのような通信が可能になります.
2. Socket.IO
Socket.IOはイベントベースの双方向通信を有効にすることができ、それを使用しても対応するサービス側を構築する必要がある.まずWebSocketも優先され、サポートされていない場合は次の代替案が使用されます. Adobe Flash Socket(欠点:サーバ上で追加のポートを開く必要があり、デフォルトは10843) Ajax long polling Ajax multipart streaming Forever iframe JSONP polling
ブラウザの互換性
クライアント
サービス側
SOcketをインストールio
サーバの構成
SockJSは、ブラウザにWebSocketのようなオブジェクトを提供するJavaScriptライブラリです.まず、オリジナルのWebSocketを優先します.サポートされていない場合はstreamingを使用します.streamingもサポートされていない場合は、ポーリング(polling)を使用します.サポートされているブラウザの概要:WebSocketの双方向通信をシミュレートする以上、SockJSを使用する場合は、対応するサーバ側のライブラリを使用する必要があります.次に使用できるサーバ側のライブラリは、次のとおりです.
クライアントの使用
まずSockJSライブラリをロードします
"https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"</span>>
ライブラリのロードが完了すると、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も優先され、サポートされていない場合は次の代替案が使用されます.
ブラウザの互換性
クライアント
// Socket.IO
"http://localhost:8181/socket.io/socket.io.js"</span>>
var socket = io.connect(<span class="hljs-string">'http://localhost:8181'</span>);
console.log(<span class="hljs-string">'a user connected'</span>);
socket.emit(<span class="hljs-string">'my other event'</span>, { my: <span class="hljs-string">'data'</span> });
socket.on(<span class="hljs-string">'disconnect'</span>, <span class="hljs-function"><span class="hljs-title">function</span></span>(){
console.log(<span class="hljs-string">'user disconnected'</span>);
});
サービス側
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);