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

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

ajax轮询

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

long polling

WebSocket协议

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

WebSocket通信场景

使用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     } }

这里有个坑，请躲好。。