消息推送Web端组件

这里使用基于HTTP长链接推送技术 --Comet

实现方式
  • 基于 AJAX 的长轮询(long-polling)

利用Ajax与服务器建立Http长连接查询是否有数据更新,服务器收到一个连接如果没有数据更新就阻塞(挂起)这个连接不要返回给客户端,直到有新数据或服务端设置超时后再返回给客户端。
Web客户端发起的连接一旦被返回,或者超时就再次发起Ajax请求建立Http长连接。

HTML tag


组件依赖jQuery1.5.0版本以上,使用到了Deferred对象,以实现异步处理耗时操作(ajax请求)。

初始化组件
var mcSync = new McSync({
    url: "data/sync.json",
    data: '',
    method: 'GET',
    callback: function(data) {
        console.log("do callback 1 sync: " + data.msg);
    }
});

组件的构造函数需要传入一个options对象,包括获取消息的url、向服务端发送的数据data、http请求方法method以及请求成功返回后的回调函数callback。

启动和停止长轮询
mcSync.start();
mcSync.stop();

start()方法执行后,向设置的url发起ajax请求,并在请求成功返回后执行设置的callback方法,然后继续向url发起请求。
stop()方法可以将正在进行的长轮询停止。


核心函数
function syncMsg(options) {
    return jQuery.Deferred(function(defer) {
        jQuery.ajax(options).then(defer.resolve, defer.reject);
    }).promise();
}

function doSync(options,callback,self) {
    syncMsg(options).then(function(data) {
        callback.call(this,data);
    }, function(e) {
        console.log(e);
    }).always(function(){
        if(self.isStop) return;
        doSync(options,callback,self);
    })
}

你可能感兴趣的:(消息推送Web端组件)