WebIM技术---编写前端WebSocket组件

过去我们想要实现一个实时Web应用通常会考虑采用ajax轮循或者是long polling技术,但是因为频繁的建立http连接会带来多余的请求以及消息精准性的问题,让我们在实现实时Web应用时头疼不已。现在,Html5提出了WebSocket协议来规范解决了这个问题。

ajax轮询,long polling技术实现原理

ajax轮询

ajax轮询非常简单了,就是在客户端设置一个定时器,频繁的去请求接口,看有没有数据返回,但是这样很明显会有很多的多余请求,导致服务器压力巨大。。

long polling

long polling技术,其实是在ajax轮询的基础上再做了一些优化,客户端请求服务端看有没有返回,如果暂时没有,服务端会把请求短暂的挂起,当有数据的时候再把数据返回给客户端,这时候客户端再另起一个请求,询问服务器。

为了保证连接的通道不断,我们通常会设置一个timeout,当过了这个timeout时还没有数据,服务端会把挂起的服务关闭,返回空的数据,然后客户端再进行请求。

这样做虽然比ajax轮询好很多,但是当消息量大的时候,请求数还是很多。而且轮询还极有可能在传输的过程中遇到消息丢失的情况,这时候需要服务端做消息缓存等处理。

WebSocket协议

WebSocket协议本质上是一个基于TCP的协议,它由通信协议和编程API组成,WebSocket能够在浏览器和服务器之间建立双向连接,以基于事件的方式,赋予浏览器实时通信能力。既然是双向通信,就意味着服务器端和客户端可以同时发送并响应请求,而不再像HTTP的请求和响应。简单来说,WebSocket就是一个长连接通道,在这个通道里客户端和服务端可以自由的发送消息给对方,而且不用管对方是否有返回,双方都有关闭这个通道的权利。

WebSocket通信场景

客户端:啦啦啦,我要建立Websocket协议,Websocket协议版本:17(HTTP Request)

服务端:ok,确认,已建立Websocket(HTTP Protocols Switched)

客户端:有消息的时候记得推给我哦。

服务端:ok,有的时候会告诉你的。

服务端:balabalabalabala

服务端:balabalabalabala

服务端:哈哈哈哈哈啊哈哈哈哈

客户端:哈哈哈哈哈哈哈,你可以不用返回

...

使用WebSocket有什么好处

  • WebSocket 能节约带宽、CPU 资源并减少延迟。
  • WebSocket 基于事件交流,通信简单。
  • WebSocket 可以跨域。

WebSocket API介绍

建立WebSocket连接

var ws = new WebSocket('ws://www.websocket.org')

为WebSocket 对象添加 4 个不同的事件:

  • open
  • message
  • error
  • close

代码示例:

// 当websocket连接建立成功时
ws.onopen = function() {
    console.log('websocket 打开成功');    
};

// 当收到服务端的消息时
ws.onmessage = function(e) {
    // e.data 是服务端发来的数据
    console.log(e.data);
};

// 当websocket关闭时
ws.onclose = function() {
    console.log("websocket 连接关闭");
};

// 当出现错误时
ws.onerror = function() {
    console.log("出现错误");
};

WebSocket对象方法

  • send
  • close

代码示例:

// 发送消息 
ws.send('blablabla')

// 关闭socket
ws.close()

定义一个前端Socket组件

为什么需要定义一个Socket组件

HTML5提供的SocketAPI太过于简陋,并不能满足复杂环境的socket交互需要,API的调用也不太方便。

定义一个什么样的Socket组件

  • 简单好用的客户端和服务端的双向通信API
  • 支持断线重连功能
  • 支持自定义事件
  • 能够自由感知socket状态信息

Socket组件示例

首先要和服务端约定互相可以识别的通信协议,假设我们约定的通信协议是

// 客户端发送给服务端
{
    method: 'xxx',
    request: {} 
}

// 服务端返回给客户端
{
    data: {},
    success: true,
    errorCode: 0,
    request: {} // 如果是服务端主动推消息给客户端,request会带有method参数
                // 如果是服务端返回客户端请求,request就是客户端之前请求的数据
}

然后我们上代码:

/*
 * @example
 *  var ws = new Socket('ws://www.websocket.org')
 *  ws.on('ready',function() {
 *      console.log('服务器连接成功');
 *      ws.on('message', function(json) {
 *          console.log('一条新消息:'+json.session);
 *      });
 *      ws.emit("send", {
 *          session: "一条新消息"
 *      })
 *  })
 *  ws.on("error",function(){
 *      console.log("连接报错")
 *  })
 *  ws.on("close",function(){
 *      console.log("连接关闭");
 *  })
 */

function Socket(url) {
    this.init(url)
}

Socket.prototype = {
    init: function(url) {
        this.initListeners()
        this.initSocket(url)
        this.bindSocketEvent()
    },

    initSocket: function(url) {
        this.url = url
        this.socket = new WebSocket(url)
        return this
    },

    initListeners: function() {
        this.listeners = {}
        return this
    },

    bindSocketEvent: function() {
        var me = this

        me.socket.onopen = function() {
            me.stopHeartBeat()
            me.startHeartBeat()
            me.clearAll()
            me.trigger('ready')
        }

        me.socket.onerror = function(e) {
            me.trigger('close', e)
            me.close()
        }

        me.socket.onmessage = function(e) {
            me.refreshServerTimer();
            var json = JSON.parse(e.data);
            me.trigger(json.request.method, json);
        }

        return this
    },

    reConnect: function() {
        this.initSocket(this.url).bindSocketEvent()
        this.trigger('reconnect')
    },

    isOffline: function() {
        return this.socket.readyState != WebSocket.OPEN
    },

    on: function(evt, fn) {
        var me = this

        if(me.listeners[evt] && me.listeners[evt].length) {
            if(me.listeners[evt].indexOf(fn) == -1){
                me.listeners[evt].push(fn)
            }
        }else {
            me.listeners[evt] = [fn]
        }

        return this
    },

    off: function(evt, fn) {
        var me = this

        if(me.listeners[evt] && me.listeners[evt].length){
            var index = me.listeners[evt].indexOf(fn)

            if(index != -1){
                me.listeners[evt].splice(index,1)
            }
        }

        return this
    },

    emit: function(method, info) {
        var me = this

        me.socket.send(JSON.stringify({
            method: method,
            request: info || ''
        }))

        return this
    },

    trigger: function(evt) {
        var me = this

        if(me.listeners[evt]) {
            for(var i=0; i<me.listeners[evt].length; i++) {
                me.listeners[evt][i].apply(me, [].slice.call(arguments,1))
            }
        }

        return this
    },

    startHeartBeat: function() {
        var me = this

        me.heartBeatTimer = setInterval(function() {
            me.emit("heartBeat")
        }, 5000)
    },

    stopHeartBeat: function() {
        clearInterval(this.heartBeatTimer)
    },

    //重新开始断线计时,20秒内没有收到任何正常消息或心跳就超时掉线
    refreshServerTimer: function() {
        var me = this

        clearTimeout(me.serverHeartBeatTimer)
        me.serverHeartBeatTimer = setTimeout(function() {
            me.trigger("disconnect")
            me.close()
            me.reConnect()
        }, 20000)
    },

    clearAll: function() {
        var tmp = this.listeners['ready']

        this.listeners = {}
        this.listeners['ready'] = tmp

        return this
    },

    close: function(options) {
        var me = this;

        clearTimeout(me.serverHeartBeatTimer);
        me.stopHeartBeat();
        me.socket.close();

        return this
    }
}

介绍一下组件里的心跳包机制:

因为一些原因,有这么一种情况,socket还在客户端连着,但是服务端和客户端之间却没有办法互相发送消息,我们称这种现象叫做WebSocket失活。

组件里采用的解决办法是,客户端每5秒钟向服务端发送心跳包,讲道理服务端会返回一个心跳包以保活。但是如果客户端检查1分钟内没有收到服务端的返回,客户端会自动重连WebSocket。

这里有个坑,请躲好。。

WebSocket在建立连接之前,会先发一个http协议询问服务端要不要建立WebSocket,因为http请求是会带上cookie的,这时候如果域名下的cookie太多,有可能会导致WebSocket建立连接失败。。

我这里的解决方案是,更换接口的域名地址,利用WebSocket可以跨域的特性绕过当前域的cookie建立连接。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章