HTML5 の新機能 WebSocket

1. 概要

HTTP プロトコルは、ステートレスプロトコルです。サーバー自体には、セッションやcookieなどの外部メカニズムに依存する必要があります。特定のクライアントとの対話。これは、特にサーバーとクライアントが継続的にデータを交換する必要がある状況 (オンライン チャットなど) では、多少の不便をもたらします。この問題を解決するために、HTML5はブラウザのWebSocketAPIを提案しました。

WebSocket の主な機能は、サーバーとクライアント間の全二重通信を可能にすることです。たとえば、HTTP プロトコルは電子メールの送信に似ており、送信後は相手の応答を待つ必要があります。WebSocket は電話をかけるのと似ており、サーバーとクライアントは相互にデータを送信できます。同時に、それらの間には継続的にオープンなデータ チャネルが存在します。

WebSocket プロトコルは Ajax メソッドを完全に置き換えて、テキストとバイナリ データをサーバーに送信するために使用できます。また、「同一ドメインの制限」はありません。

WebSocket は HTTP プロトコルを使用せず、独自のプロトコルを使用します。ブラウザーによって送信される WebSocket リクエストは次のようになります:

GET / HTTP/1.1Connection: Upgrade
Upgrade: websocket
Host: example.com
Origin: nullSec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

上記のヘッダー情報は、アップグレード用の HTTP ヘッダーがあることを示しています。 HTTP1.1プロトコルでは、Upgradeヘッダ情報で通信プロトコルをHTTP1.1から項目で指定されたプロトコルに切り替えることが規定されている。 「接続: アップグレード」は、ブラウザがサーバーに、可能であれば webSocket プロトコルにアップグレードするように通知することを意味します。 Origin は、ブラウザのドメイン名がサーバーの許可範囲内にあるかどうかを確認するために使用されます。 Sec-WebSocket-Key はハンドシェイク プロトコルに使用されるキーで、base64 でエンコードされた 16 バイトのランダムな string です。

サーバーの WebSocket 応答は次のとおりです:

HTTP/1.1 101 Switching ProtocolsConnection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=Sec-WebSocket-Origin: 
nullSec-WebSocket-Location: ws://example.com

サーバーはまた、「接続: アップグレード」を使用して、プロトコルを変更する必要があることをブラウザに通知します。 Sec-WebSocket-Accept は、サーバーがブラウザーによって提供された Sec-WebSocket-Key 文字列の後に「258EAFA5-E914-47DA-95CA-C5AB0DC85B11」文字列を追加し、sha-1 の hash 値を取得することを意味します。ブラウザはこの値を検証して、実際に webSocket リクエストに応答したターゲット サーバーであることを証明します。 Sec-WebSocket-Location は、通信の WebSocket URL を示します。

注: WebSocket プロトコルは ws で表されます。さらに、暗号化された WebSocket プロトコルを表し、HTTPs プロトコルに対応する wss プロトコルがあります。

ハンドシェイクが完了すると、WebSocket プロトコルが TCP プロトコルの上に位置し、データの送信を開始します。

WebSocket プロトコルにはサーバーのサポートが必要です。現在、より一般的な実装は node.js に基づくソケット.io です。その他の実装については、Wikipedia を参照してください。ブラウザー側に関しては、現在、すべての主流ブラウザーが WebSocket プロトコル (IE10 以降を含む) をサポートしています。唯一の例外は、携帯電話の Opera Mini と Android ブラウザーです。

2. クライアント

ブラウザによる WebSocket プロトコルの処理は、次の 3 つにすぎません:

• 確立と切断

• データの送信と受信

• エラーの処理

2.1

の確立と切断 まず、クライアントは、ウィンドウオブジェクトが WebSocket 属性 を持っているかどうかをチェックして、ブラウザが WebSocket をサポートしているかどうかを確認する必要があります。

if (window.WebSocket != undefined) {    // 支持}

次に、サーバーとの接続の確立を開始します (ここでは、サーバーはローカル マシンの 1740 ポートであり、WS プロトコルを使用する必要があると想定しています)。

if (window.WebSocket != undefined) {    
var connection = new WebSocket('ws://localhost:1740');
}

接続が確立された後の WebSocket インスタンス オブジェクト (つまり、上記のコードの接続) には、現在のステータスを示す readyState 属性があり、次の 4 つの値を取ることができます:

• 0: 接続中

• 1: 接続成功

• 2: クローズ中

• 3: 接続クローズ

ハンドシェイクプロトコルが成功した後、readyState が 0 から 1 に変化し、open イベント がトリガーされます。このとき、サーバーにメッセージを送信することができます。「メッセージが送信されました」。オープンイベントのコールバック関数を指定できます。

connection.onopen = wsOpen;function wsOpen(event) {
    console.log('Connected');
}

WebSocket を閉じると close イベントがトリガーされます。

connection.onclose = wsClose;function onClose(event) {    var wasClean = event.wasClean; //bool值，连接是否关闭了
    var code = event.code; //连接状态（数字），由服务端提供
    var reason = event.reason; //关闭原因，由服务端提供
    console.log('Closed');
}

connection.close();

2.2 データの送受信

接続が確立された後、クライアントは send メソッドを通じてサーバーにデータを送信します。

connection.send(message);

文字列の送信に加えて、Blob オブジェクトまたは ArrayBuffer オブジェクトを使用してバイナリ データを送信することもできます。

//使用ArrayBuffer发送Canvas图像数据
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Unit8Array(img.data.length);for(var i = 0; i < img.data.length; i++) {
    binary[i] = img.data[i]
}
connection.send(binary.buffer);//使用Blob发送文件
var file = document.querySelector(&#39;input[type="file"]&#39;).files[0];
connection.send(file);

客户端收到服务器发送的数据，会触发message事件。可以通过定义message事件的回调函数，来处理服务端返回的数据。

connection.onmessage = wsMessage;
function wsMessage(event) {
    console.log(event.data);
}

上面代码的回调函数wsMessage的参数为事件对象evnet，该对象的data属性包含了服务器返回的数据。

2.3 处理错误

如果出现错误，浏览器会触发WebSocket实例对象的error事件。

connection.onerror = wsError;function wsError(event) {
    console.log('Error: ' + event.data);
}

3、服务器端

服务器端需要单独部署处理WebSocket的代码。下面用node.js搭建一个服务器环境。

var http = require('http');var server = http.createServer(function(request, response){});

假设监听1740端口。

server.listen(1740, function() {
    console.log((new Date()) + ' Server is listening on port 1740');
});

接着启动WebSocket服务器。这需要加载websocket库，如果没有安装，可以先使用命令安装。

var WebSocketServer = require('websocket').server;var wsServer = new WebSocketServer({
    httpServer: server
});

WebSocket服务器建立request事件的回调函数。

var connection;

wsServer.on('request', function(req){
    connect = req.accept('echo-protocol', req.origin);
});

上面代码的回调函数接受一个参数req，表示request请求对象。然后，在回调函数内部，建立WebSocket连接Connection。接着，就要对connection的message事件指定回调函数。

wsServer.on('request', function(r) {
    connection = req.accept('echo-protocol', req.origin);

    connection.on('message', function(message) {        
    var msgString = message.utf8Data;
        connection.sendUTF(msgString);
    });
});

最后，监听用户的disconnect事件。

connection.on('close', function(reasonCode, description) {
    console.log(connection.remoteAddress + ' disconnected');
});

4、Socket.io简介

Socket.io是目前最流行的WebSocket实现，包括服务器和浏览器两个部分。它不仅简化了接口，使得操作更容易，而且对于那些不支持WebSocket的浏览器，会自动降为Ajax连接，最大限度地保证了兼容性。

第一步，在服务器端的项目根目录下，安装socket.io模块。

npm install socket.io

第二步，在根目录下建立app.js，并写入以下代码（使定使用了Express框架）。

var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

server.listen(80);

app.get('/', function (req, res) {
  res.sendfile(dirname + '/index.html');
});

上面代码表示，先建立并运行HTTP服务器。Socket.io的运行建立在HTTP服务器之上。

第三步，将Socket.io插入客户端网页。

<script src="/socket.io/socket.io.js"></script>

然后，在客户端脚本中，建立WebSocket连接。

var socket = io.connect('http://localhost');

由于本例假定WebSocket主机与客户端是同一台机器，所以connect方法的参数是http://localhost。接着，指定news事件（即服务器端发送news）的回调函数。

socket.on('news', function (data){
   console.log(data);
});

最后，用emit方法向服务器端发送信号，触发服务器端的anotherNews事件。

请注意：emit方法可以取代Ajax请求，而on方法指定的回调函数，也等同于Ajax的回调函数。

第四步，在服务器端的app.js中加入以下代码。

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('anotherNews', function (data) {
    console.log(data);
  });
});

上面代码的io.sockets.on方法指定connect事件（WebSocket连接建立）的回调函数。在回调函数中，用emit方法向客户端发送数据，触发客户端的news事件。然后，再用on方法指定服务器端anotherNews事件的回调函数。

以上がHTML5 の新機能 WebSocketの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。