Dojo WebSocket 应用

比眉伴天荒 2022-04-18 00:37 211阅读 0赞

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) \{ var data = event.data ; // 处理服务器端返回的 data \} ) ;

`socket.on()` 用于注册监听函数，捕获后台消息事件，我么也可以用`socket.connect()` 实现相同的功能。

我们也可以用 `send()` 方法给服务器端发送消息. 但是在此之前我们通常要保证和后台的连接已经建立起来了：

socket.on ( "open" , function ( event) \{ socket.send ( "hi server" ) ; \} ) ;

最后，我们也可以监听“close”事件，判断连接的关闭情况，我们可以通过调用`socket.close()来开启连接关闭的进程。`

`dojox.socket` 也能接受一些标准的Dojo IO 参数用于初始化和服务器端的连接，比如我们可以加入我们的消息头:

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

这样浏览器基于自身的特点会将这些URL路径转换为WebSocket URL (using `ws://` scheme) 或者HTTP URL。

有的服务器端只支持HTTP/long-polling（长轮询） (不支持真正的WebSocket). 这时候，我们可以显式创建一个基于 long-poll 的连接：

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

我们也可以使用`dojo.io.script.get` 连接到服务器. [`dojox.io.xhrPlugins` ][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) \{ var JsonRest = require( "dojo/store/JsonRest" ) ; var Observable = require( "dojo/store/Observable" ) ; var store = new JsonRest( \{ data:myData\} ) ; store = Observable( store) ; \} ) ;

这个store 此时便具有 `observe()` 方法， 可以通过此方法绑定监听函数，用于针对data变化是做出相应处理，我们此刻便能够通过服务器端的消息得知data的变化，并手动通知store的Observe：

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

`store.notify()中，不传入id参数则表示` 新增object，不传入object参数表示删除，两个都有便是修改。

### 处理 Long-Polling    ###

Long-polling（长轮询）请求和普通的polling（轮询）请求不同在于：普通的polling是一次请求，一次查询和回答（服务器返回结果），而Long-polling请求则是一次请求，多次查询，直到有消息，再回答（返回）。Long-polling 方式的连接需要服务端的支持。在很多应用中，服务器需要足够的请求中的cookie信息来决定发送什么信息到客户端。由于有很多的协议的存在，我们可以通过在请求的消息头中放入相关信息来以示区别：

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

`dojox.socket` 包含参数 `Pragma: long-poll` 来标识一系列 long-poll 请求中的第一个请求，从而帮助服务器处理连接的建立和超时。

我们也能用 `dojox.socket` 支持其他的协议:

### CometD ###

初始化 Comet connection 连接 [CometD][] 服务器, 我们可以进行 CometD 握手, 连接和订阅:

### Socket.IO ###

[Socket.IO][] 提供了一个底层的接口，类似 dojox.socket, 支持简单的文本消息传送，下面是一个连接Socket.IO服务器的例子：

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

### Comet Session Protocol ###

以下是连接 [Comet Session Protocol][] 服务器的例子：

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

### Tunguska ###

Tunguska 提供了一个基于 Comet 订阅数据变化的接口，以下是一个与Tunguska 服务器通信的简单示例：

## Conclusion ##

Dojo的socketAPI是一个和各种不同服务器建立实时连接并通信的模块，这是Dojo1.6令人振奋的一个改进。

[dojox.io.xhrPlugins_]: http://www.sitepen.com/blog/2008/07/31/cross-site-xhr-plugin-registry/
[new Dojo object store API]: http://www.dojotoolkit.org/reference-guide/dojo/store.html
[CometD]: http://cometd.org/
[Socket.IO]: http://socket.io/
[Comet Session Protocol]: http://orbited.org/csp/