Dojo WebSocket 應用

文章目錄

• CometD
• Socket.IO
• Comet Session Protocol
• Tunguska

Dojo 1.6 提供了一個基於WebSocket API開發的用於即時通訊的dojo socket API， WebSocket 提供了一種支援全雙工系統通訊的對象，我們可以非常方便的即時的將訊息從服務端直接發送到用戶端。Dojo的新 dojox.socket
模組還提供了WebSocket API所沒有的基於HTTP的
long-polling。

 

 

Dojox.socket
模組設計上十分簡單，輕量級並且與協議無關。原來dojo有很多針對特定協議開發的模組，如CometD 和 RestChannels， 但是還有大量的其他協議無法滿足，所以 dojox.socket
模組只是簡單的通過HTTP 協議或WebSocket串連 傳遞字串，這也保證了他對所有系統的相容性.

dojox.socket
最簡單的使用方式：

var socket = dojox.socket ( "/comet" ) ;

 

我們現在便可以監聽伺服器端的訊息事件：

socket.on ( "message" , function ( event) {<br /> var data = event.data ;<br /> // 處理伺服器端返回的 data<br />} ) ;
 

socket.on()
用於註冊監聽函數，捕獲後台訊息事件，我麼也可以用socket.connect()
實現相同的功能。

我們也可以用 send()
方法給伺服器端發送訊息. 但是在此之前我們通常要保證和背景串連已經建立起來了：

socket.on ( "open" , function ( event) {<br /> socket.send ( "hi server" ) ;<br />} ) ;
 

最後，我們也可以監聽“close”事件，判斷串連的關閉情況，我們可以通過調用socket.close()來開啟串連關閉的進程。

dojox.socket
也能接受一些標準的Dojo IO 參數用於初始化和伺服器端的串連，比如我們可以加入我們的訊息頭:

var socket = dojox.socket ( {<br /> url:"/comet" ,<br /> headers: {<br /> "Accept" : "application/json" ,<br /> "Content-Type" : "application/json"<br /> } } ) ;

 

這樣瀏覽器基於自身的特點會將這些URL路徑轉換為WebSocket URL (using ws://
scheme) 或者HTTP URL。

有的伺服器端只支援HTTP/long-polling（長輪詢）
(不支援真正的WebSocket). 這時候，我們可以顯式建立一個基於
long-poll 的串連：

var socket = dojox.socket .LongPoll ( {<br /> url:"/comet" ,<br /> headers: {<br /> "Accept" : "application/json" ,<br /> "Content-Type" : "application/json"<br /> } } ) ;

 

我們也可以使用dojo.io.script.get
串連到伺服器.  dojox.io.xhrPlugins

還支援跨域的 long-polling, 他們都能很好的和 dojox.socket
協同工作。

Auto-Reconnect

除了 dojox.socket
, 我們還有 dojox.socket.Reconnect
模組. 他封裝了 socket, 提供了自動重新串連的功能. 當一個socket串連由於網路或伺服器的問題關閉時，他會自動周期性的重新串連伺服器，此方式基於回退演算法，保證了最少的資源消耗。我們能通過如下代碼把一個普通的socket升級到自動重連的socket：

socket = dojox.socket
.Reconnect
(
socket)
;
 Dojo WebSocket 和Object Stores協同工作

Dojo 1.6 新曾的另一個很強大的功能是 new Dojo object store API
(取代 Dojo Data API), 基於 the HTML5 IndexedDB object
store API. Dojo 1.6 支援很多對 store 的封裝器,  Observable
store 提供了事件通知機制，能很好的和Comet driven updates 聯合使用. Observable
是一個 store 封裝器. 使用方式：先建立一個store，再用Observable封裝他:

define( "my-module" , function ( require) {<br /> var JsonRest = require( "dojo/store/JsonRest" ) ;<br /> var Observable = require( "dojo/store/Observable" ) ;<br /> var store = new JsonRest( { data:myData} ) ;<br /> store = Observable( store) ;<br />} ) ;
 

這個store 此時便具有 observe()
方法， 可以通過此方法綁定監聽函數，用於針對data變化是做出相應處理，我們此刻便能夠通過伺服器端的訊息得知data的變化，並手動通知store的Observe：

socket.on ( "message" , function ( event) {<br /> var existingId = event.data .id ;<br /> var object = event.data .object ;<br /> store.notify ( object, existingId) ;<br />} ) ;
 

store.notify()中，不傳入id參數則表示
新增object，不傳入object參數表示刪除，兩個都有便是修改。

處理 Long-Polling

Long-polling（長輪詢）請求和普通的polling（輪詢）請求不同在於：普通的polling是一次請求，一次查詢和回答（伺服器返回結果），而Long-polling請求則是一次請求，多次查詢，直到有訊息，再回答（返回）。Long-polling 方式的串連需要服務端的支援。在很多應用中，伺服器需要足夠的請求中的cookie資訊來決定發送什麼資訊到用戶端。由於有很多的協議的存在，我們可以通過在請求的訊息頭中放入相關資訊來以示區別：

var socket = dojox.socket .LongPoll ( {<br /> url:"/comet" ,<br /> headers: {<br /> "Accept" : "application/json" ,<br /> "Content-Type" : "application/json" ,<br /> "Client-Id" : Math.random ( )<br /> } } ) ;

 

dojox.socket
包含參數 Pragma: long-poll
來標識一系列 long-poll 請求中的第一個請求，從而協助伺服器處理串連的建立和逾時。

我們也能用 dojox.socket
支援其他的協議:

CometD

初始化 Comet connection 串連 CometD
伺服器, 我們可以進行 CometD 握手, 串連和訂閱:

var socket = dojox.socket ( "/cometd" ) ;<br />function send( data) {<br /> return socket.send ( dojo.toJson ( data) ) ;<br />}<br />socket.on ( "connect" , function ( ) {<br /> // 發送一次握手<br /> send( [<br /> {<br /> "channel" : "/meta/handshake" ,<br /> "version" : "1.0" ,<br /> "minimumVersion" : "1.0beta" ,<br /> "supportedConnectionTypes" : [ "long-polling" ] // or ["callback-polling"] for x-domain<br /> }<br /> ] ) .then ( function ( data) {<br /> // 等待回複，這樣我們可以通過提供的用戶端id建立串連<br /> data = dojo.fromJson ( data) ;<br /> if ( data.error ) {<br /> throw new Error( error) ;<br /> }<br /> // 擷取用戶端id<br /> clientId = data.clientId ;<br /> // 發送連結訊息<br /> send( [<br /> {<br /> "channel" : "/meta/connect" ,<br /> "clientId" : clientId,<br /> "connectionType" : "long-polling"<br /> } ,<br /> { // 同時發送訂閱訊息<br /> "channel" : "/meta/subscribe" ,<br /> "clientId" : clientId,<br /> "subscription" : "/foo/**"<br /> }<br /> ] ) ;<br /> socket.on ( "message" , function ( ) {<br /> // 處理伺服器返回的訊息<br /> } ) ;<br /> } ) ;<br />} ) ;

 Socket.IO

Socket.IO
提供了一個底層的介面，類似 dojox.socket, 支援簡單的簡訊傳送，下面是一個串連Socket.IO伺服器的例子：

var args, ws = typeof WebSocket != "undefined" ;<br />var socket = dojox.socket ( args = {<br /> url: ws ? "/socket.io/websocket" : "/socket.io/xhr-polling" ,<br /> headers:{<br /> "Content-Type" :"application/x-www-urlencoded"<br /> } ,<br /> transport: function ( args, message) {<br /> args.content = message; // 利用 URL-編碼發送訊息，避免直接發送原始訊息本身<br /> dojo.xhrPost ( args) ;<br /> } ;<br />} ) ;<br />var sessionId;<br />socket.on ( "message" , function ( ) {<br /> if ( !sessionId) {<br /> sessionId = message;<br /> args.url += ‘/’ + sessionId;<br /> } else if ( message.substr ( 0 , 3 ) == ‘~h~’ ) {<br /> }<br />} ) ;

 Comet Session Protocol

以下是串連 Comet Session Protocol
伺服器的例子：

var args, socket = dojox.socket ( args = {<br /> url: "/csp/handshake"<br />} ) ;<br />function send( data) {<br /> return socket.send ( dojo.toJson ( data) ) ;<br />}<br />var sessionId = Math.random ( ) .toString ( ) .substring ( 2 ) ;<br />socket.on ( "connect" , function ( ) {<br /> send( { session:sessionId} ) .then ( function ( ) {<br /> args.url = "/csp/comet" ;<br /> send( { session:sessionId} ) ;<br /> } ) ;<br />} ) ;

 Tunguska

Tunguska 提供了一個基於 Comet 訂閱資料變化的介面，以下是一個與Tunguska 伺服器通訊的簡單樣本：

var socket = dojox.socket ( {<br /> url:"/comet" ,<br /> headers: {<br /> "Accept" : "application/json" ,<br /> "Content-Type" : "application/json" ,<br /> "Client-Id" : Math.random ( )<br /> } } ) ;<br />function send( data) {<br /> return socket.send ( dojo.toJson ( data) ) ;<br />}<br />socket.on ( "connect" , function ( ) {<br /> // 訂閱了MyTable 的所有改動<br /> send( [ { "to" :"/MyTable/*" , "method" :"subscribe" } ] ) ;<br />} ) ;

 Conclusion

Dojo的socketAPI是一個和各種不同伺服器建立即時串連並通訊的模組，這是Dojo1.6令人振奮的一個改進。