サーバー送信イベントを使用したリアルタイムアプリケーションの作成

つい最近、 Firefox 6がSSE （Opera 10.6 +、Chrome、WebKit 5 +、iOS Safari 4 +、Opera Mobile 10+で既に利用可能） を受信することがわかったため、すべてのブラウザーの半分以上（ユーザーにリーチする）のサポートはもはや有利ではありません山。 この技術を詳しく見てみましょう。 SSEは7年以上前にIan Hickson によって提供されましたが、1年前にブラウザに表示されるようになりました。 WebSocketがあるのに、なぜ別のプロトコルが必要なのですか？！ しかし、すべてに長所と短所があります。SSEが何に役立つか見てみましょう。



SSEの概念は単純です。クライアントはサーバーイベントにサブスクライブし、イベントが発生するとすぐに、クライアントは通知とこのイベントに関連するデータをすぐに受信します。 SSEプロトコルの有用性を理解するには、イベントを受信するための通常の方法と比較する必要があります。その本質を簡単に説明します。

ポーリング

最も単純ですが、最も効果的な方法ではありません。クライアントは数秒ごとにイベントを求めてサーバーをポーリングします。 何も存在しない場合でも、クライアントはすべて同じように要求を行いますが、何が来るかわかりません。

長所：

-ただ

-データを振ることができます

短所：

-多くの追加リクエスト

-イベントは常に遅れる

-サーバーは、クライアントがイベントを取得するか、イベントが期限切れになるまでイベントを保存する必要があります

長いポーリング

以前の方法の改良版。 クライアントはサーバーにリクエストを送信し、サーバーはデータが到着するかクライアントが自動的に切断するまで接続を開いたままにします。 データが到着するとすぐに、応答が送信され、接続が閉じられ、次の接続が開かれます。

ポーリングと比較した長所：

-リクエストの最小数

-イベントの高い時間的精度

-サーバーは再接続中にのみイベントを保存します

ポーリングと比較した短所：

-より複雑なスキーム

Websocket

これは、クライアントとサーバーが同等の条件で通信できるようにするバイナリ二重プロトコルです。 このプロトコルは、ゲーム、チャット、およびリアルタイムに近い非常に正確なイベントが必要なすべてのアプリケーションに使用できます。

ロングポーリングと比較した長所：

-1つの接続が上昇する

-イベントの非常に高い時間的精度

-ブラウザーによって制御されるネットワーク障害管理

ロングポーリングと比較した短所：

-HTTPは互換性のあるプロトコルではないため、独自のサーバーが必要です。デバッグは複雑です



私たちはこのような美しいWebSocketプロトコルを持っているので、なぜSSEを使用する必要がありますか？！ まず、すべてのWebアプリケーションが双方向通信を必要とするわけではありません-SSEも適しています。 次に、SSEはHTTP互換プロトコルであり、任意のWebサーバーでイベントブロードキャストを実装できます。

サーバー送信イベントプロトコル

クライアントはサーバーに要求を送信し、サーバーは応答として次のヘッダーを送信します。

Content-Type: text/event-stream
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、接続を閉じません（phpでは、無限ループを作成できます。node.jsで行う方法については、サンプル記事で説明します）。 それだけです-SSEは動作します！ クライアントにデータを送信するために、サーバーは次の形式の行をソケットに書き込むだけです。

 data: My message\n\n
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

複数行のデータを送信する必要がある場合、形式は次のようになります。

 data: {\n data: "msg": "hello world",\n data: "id": 12345\n data: }\n\n
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、原則として、プロトコルベース全体です。 さらに、サーバーはメッセージIDを送信できます。これは、接続が切断された場合に必要です。 接続が切断された場合、クライアントは接続しようとすると、特別なヘッダー（Last-Event-ID）を送信して、失われたイベントを復元します。

 id: 12345\n data: GOOG\n data: 556\n\n
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

エラーが発生した場合の再試行時間：

 retry: 10000\n data: hello world\n\n
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

idおよびretryフィールドはオプションです。



クライアントでは、すべてが次のようになります。

 var source = new EventSource('http://localhost/stream.php'); source.addEventListener('message', function(e) { //  -  console.log(e.data); }, false); source.addEventListener('open', function(e) { //    }, false); source.addEventListener('error', function(e) { if (e.eventPhase == EventSource.CLOSED) { //   } }, false);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてが非常に簡単です。 SSEプロトコルに基づいてアプリケーションを構築しましょう。 いつものように、これはチャットになります。

マルチパートXMLHTTPRequest

マルチパートストリーミングとも呼ばれます（Firefoxのみをサポート）。 SSEプロトコルに非常に似ています。

ヘッダーの形式は次のとおりです。

 Content-type: multipart/x-mixed-replace;boundary=smthing
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、パーツは次の形式で送信されます。

 Content-type: text/html\r\n\r\n --smthing\n Message\n --smthing\n
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

通常のXHRがクライアントで作成されますが、リクエストを送信する前にフラグreq.multipart = true;



設定する必要がありreq.multipart = true;





SSEのように見えますか？ 詳細



SSEにつながる可能性のある別のプロトコルがあります。

XMLHTTPRequest：インタラクティブ

これを使用するには、ブラウザはコード3（インタラクティブ）で特別なreadyStateをサポートする必要があります-このステータスは、データの一部が到着したが、接続がまだ閉じられていないことを示します。 コード3でreadyStateを使用するjQuery には同じ名前のプラグインがあります。また、いつものように、すべてのブラウザーがコード3でreadyStateをサポートしているわけではありません。

例：サーバー送信イベントでのチャット

SSEに関する一連のイベント（オフラインになる、オンラインになる、メッセージ）を受け入れます。 なぜなら SSEはメッセージを送信できないため、HTTPを介して送信します。



作業のスキームは次のとおりです。

-チャットに入るとき、名前が要求されます

-クライアントはチャットサーバーに接続します。 イベントストリームが作成されます。

-クライアントが接続すると、チャットは全員にイベントを送信します：％username％online

-クライアントを切断すると、チャットは全員にイベントを送信します：％username％offline

-クライアントはHTTP「POST /メッセージ」を介してメッセージを送信でき、サーバーはこのメッセージを受信し、SSEを介してすべてのクライアントに受信したメッセージを送信します。



クライアントコードを分析しましょう。 一部のブラウザで$ .readyの代わりに無限のダウンロードが行われないように、setTimeoutを実行します。

 setTimeout(function () { //   ,   $.ready       }, 50);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ユーザー名をリクエスト：

 //    localStorage    var name = (prompt('Name:', window.localStorage ? window.localStorage['name'] || '' : '') || 'anonymous').substr(0, 20); //    if (window.localStorage) { window.localStorage['name'] = name; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

EventSourceを作成し、それにユーザー名を渡し（ユーザーがオンラインになった）、必要なイベントをリッスンします。

 var eventSrc = new EventSource("/event?name=" + name); //   EventSource - "message" eventSrc.addEventListener("message", function(event) { var data = JSON.parse(event.data); //      renderMessage(data); }, false); //   EventSource - "error" eventSrc.addEventListener("error", function(event) { //      renderMessage({ isbot: true, message: 'connection error', name: '@Chat' }); }, false);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

renderMessageメソッドとページレイアウトは考慮しません。 すべてのクライアントコードは、 index.htmlにあります。



サーバー側には、Node.jsがあります。 ここではすべてがより複雑ですが、1人のユーザーからすべてのユーザーへのマルチキャストメッセージの主な難しさであり、SSEを介した通信の構築は困難です。

必要なモジュールを接続します

 var http = require('http'), fs = require('fs'), qs = require('querystring'), parse = require('url').parse; //   (index.html      Node.js) var indexFile = fs.readFileSync('index.html'); // Buffer
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ルート

次のオブジェクトを含むルートルートのリストを作成します。

1.静力学。 インデックスページ、静的データのヘルメット：

  'GET /': function (request, response) { //    response.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'}); response.write(indexFile); response.end(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2. SSE接続の確立：

  'GET /event': function (request, response) { var url = parse(request.url, true); var name = (url.query.name || 'anonymous').substr(0, 20); var clientId = Clients.generateClientId(); //     EventSource response.writeHead(200, {'Content-Type': 'text/event-stream'}); //     ,     2  request.socket.setTimeout(1000 * 60 * 60); // 1  //    -    request.on('close', function () { Clients.remove(clientId); }); //     Clients.add(clientId, response, name); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.クライアントからのメッセージ：

  'POST /message': function (request, response) { var data = ''; //    POST request.on('data', function (chunk) { data += chunk; }); //   POST   request.on('end', function () { //   data = qs.parse(data); //    Clients.broadcast(data.message, data.name, false); response.writeHead(200); response.end(); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

4.デフォルトルート-ページ404：

  $: function (request, response) { response.writeHead(404); response.end(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

カスタマーマネージャー-クライアント

新しいクライアントを追加（追加）すると、マネージャーはクライアントが到着したすべてのメッセージを送信します。

  add: function (clientId, response, name) { this._clients[clientId] = {response: response, name: name || 'anonymous'}; this.count++; //      this.unicast(clientId, 'Hello, ' + name + '! Online ' + this.count, '@ChatBot', true); this.broadcast(name + ' online', '@ChatBot', true); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

削除すると、接続が閉じられ、クライアントがオフラインであることを全員に送信します。

  remove: function (clientId) { //   ,     var client = this._clients[clientId]; if (!client) { return; } //   client.response.end(); //   delete this._clients[clientId]; this.count--; //   ,    //      this.broadcast(client.name + ' offline', '@ChatBot', true); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

private _sendメソッドは、クライアントにメッセージを送信するために使用されます。

  _send: function (clients, message, name, isbot) { if (!message || !name) { return; } //   var data = JSON.stringify({ message: message.substr(0, 1000), name: (name || 'anonymous').substr(0, 20), isbot: isbot || false }); //   ,      //     -   Node.js data = new Buffer("data: " + data + "\n\n", 'utf8'); //   SSE //   clients.forEach(function (client) { client.response.write(data); //   }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

_sendメソッドは、パブリックブロードキャストメソッドとユニキャストメソッドを使用して、それぞれすべてのクライアントと1つのクライアントにメッセージを送信します。

サーバーを作成してオンにします

 //   var httpServer = http.createServer(function (request, response) { var key = request.method + ' ' + parse(request.url).pathname; //   ,     Routes.$ - 404 (Routes[key] || Routes.$)(request, response); }); //   httpServer.listen(80); console.log('Online');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ソースコードserver.js



SSEでのチャットの準備ができました。 サーバーを起動します。

 $ node server.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Firefox 6、Opera 10.6以降、Chrome、WebKit 5以降、iOS Safari 4以降、Opera Mobile 10以降のいずれかのブラウザーを開きます。 http://



localhost/



にアクセスしてチャットしてください！

おわりに

SSEはLong Polingに取って代わる優れたテクノロジーであり、シンプルであり、WebSocketsほど効果的ではありません。 現在、SSEはOpera 10.6+（Opera 9は古いSSE標準をサポートしています）、Chrome、Safari 5+をサポートしています。 FirefoxはMultipart XMLHTTPRequestをサポートしています。このためにラッパーを作成し、SSEインターフェースとして使用できます。

参照資料

1. SSEチャットのオンライン例は、 sse-chat.nodester.comで見ることができます。

Nodesterプロキシの機能により、これはチャットの一部が切り捨てられたバージョンです（オンラインのユーザー数に関するメッセージはなく、チャットから退出するというメッセージもありません。頻繁に再接続される可能性があります）

2. ソースの例： github.com/azproduction/event-source-chat

3. 別のSSEチュートリアル

4. 仕様



PSチャットはhabraeffectをカバーしているように見えますが、nodesterで何かをしているようです（多くの場合、このようになります）。 結果に興味がある場合は、GitHubからソースをダウンロードしてください。



マルチパートXMLHTTPRequest、XMLHTTPRequestによりUPDが追加されました： yui_room9を追加してくれたインタラクティブな感謝