一、应用场景

浏览器与服务器之间保持一个长连接（http链接），服务器有最新的数据生成时及时推送到前端展现。典型场景：新邮件到达通知。

 

二、业界常用的解决方案

定时轮询， ，websocket（HTML5新增的能力）

其中长轮询兼容性较好，应用的较为广泛，但是切忌在移动网络中应用该技术。

 

三、长连接前端代码

/** *pns模型层 *@constructs M2012.Model.Pns.PnsModel *@extends Backbone.Model *@example *new M2012.Model.Pns().startRequestPns(); */M139.namespace("M2012.Model.Pns", {    PnsModel : Backbone.Model.extend({        callApi : M139.RichMail.API.call,        pnsUrl : '/pns/poll?sid=' + top.sid + '&comeFrom=1003', // PNS接口地址负责推送消息到前端        pnsErrorInterval : 1000 * 120, // 接口报错后下一次重新调接口的时间间隔        pnsTimer : null, // 接口报错后需要用定时器再调一次接口，pnsTimer用于报错定时器ID        msgTypes : {
    //pns推送过来的消息类型            mailMsg : 70        },        logger : new top.M139.Logger({            name : "M2012.Model.Pns"        }),        initialize : function() {            $App.registerModel("pnsModel", this);        },        startRequestPns : function() {            var self = this;            var options = {};            options.method = 'get';            options.timeout = self.pnsErrorInterval;            options.error = function() {                self.callPns();                self.logger.error("newMailArrival callPns error");            };            options.ontimeout = function() {                self.callPns();                self.logger.error("newMailArrival callPns timeout");            };            options.isSendClientLog = false;            M139.RichMail.API.call(self.pnsUrl, null, function(e) {                var result = e.responseData;                if (result) {                    console.log(result);                    if (result.errorCode) {                        self.callPns();                        self.logger.error("newMailArrival returndata error", "[pns/poll]", result);                    } else {                        self.pnsResultHandle(result);                        $App.trigger("pnsNewArrival", result);                        //留给以后扩展                        self.callPns(500);                        //self.autoReceiveMail();                    }                } else {                    self.callPns();                    self.logger.error("newMailArrival returndata error", "[pns/poll]", result);                }            }, options);        },        callPns : function(seconds) {            var self = this;            // 判断用户是否登录超时            if (top.$App.isSessionOut()) {                console.log('登录超时！不再请求PNS');                return;            }            if (self.pnsTimer) {                clearTimeout(self.pnsTimer);            }            self.pnsTimer = setTimeout(function() {                self.startRequestPns();            }, seconds || self.pnsErrorInterval);        },        /*         * 此函数可用于单元测试         * $App.getModel("pnsModel").pnsResultHandle({});         */        pnsResultHandle : function(result) {            var self = this;            if (result.c > 0) {
    //c代表数量                var msgArr = result.msg;                for (var i = 0, l = msgArr.length; i < l; i++) {                    // TODO 根据消息类型处理业务逻辑                }            } else if (result.c == 0) {                console.log('超时返回！autoReceiveMail');            }        }    })});

 

四、异常捕获及应用服务器

（1）客户端捕获到xhr的error事件或者接口超时之后可500毫秒之后开始下次轮询。

（2）服务端接口报错，不要立即开始下次轮询，可考虑2分钟甚至更长时间后再开始轮询，因为服务端通常需要较长时间恢复正常。

（3）服务端要保持大量的长连接通常需要用特殊的应用服务器，比如：

jetty 。tomcat是肯定不行的。

 

五、参考资料

书籍：《web性能权威指南》

竞品：163邮箱收信