jquery websocket 插件

fmms 12年前

//==========websocket  (function($) {      $.websocket = function(options) {          var defaults = {              domain: top.location.hostname,              port:3398,              protocol:""          };          var opts = $.extend(defaults,options);          var szServer = "ws://" + opts.domain + ":" + opts.port + "/" + opts.protocol;          var socket = null;          var bOpen = false;          var t1 = 0;           var t2 = 0;           var messageevent = {              onInit:function(){                  if(!("WebSocket" in window) && !("MozWebSocket" in window)){                        return false;                  }                  if(("MozWebSocket" in window)){                      socket = new MozWebSocket(szServer);                    }else{                      socket = new WebSocket(szServer);                  }                  if(opts.onInit){                      opts.onInit();                  }              },              onOpen:function(event){                  bOpen = true;                  if(opts.onOpen){                      opts.onOpen(event);                  }              },              onSend:function(msg){                  t1 = new Date().getTime();                   if(opts.onSend){                      opts.onSend(msg);                  }                  socket.send(msg);              },              onMessage:function(msg){                  t2 = new Date().getTime();                   if(opts.onMessage){                      opts.onMessage(msg.data,t2 - t1);                  }              },              onError:function(event){                  if(opts.onError){                      opts.onError(event);                  }              },              onClose:function(event){                  if(opts.onclose){                      opts.onclose(event);                  }                  if(socket.close() != null){                      socket = null;                  }              }          }            messageevent.onInit();          socket.onopen = messageevent.onOpen;          socket.onmessage = messageevent.onMessage;          socket.onerror = messageevent.onError;          socket.onclose = messageevent.onClose;                    this.send = function(pData){              if(bOpen == false){                  return false;              }              messageevent.onSend(pData);              return true;          }          this.close = function(){              messageevent.onClose();          }          return this;      };  })(jQuery);

        我把自己网站后台管理部分重新写了一遍,以前用的ajax,因为采集部分我做的非常强大,而且是网页版的,python作为服务端,我需要能够实时与浏览器通信,这样才知道采集进度,之前用php curl 管道进行的批量采集,ajax返回进度,不是很实时,并且太死了,折腾了很久,于是我换成了websocket达到实时得知服务端详细信息

 

        这是我把websocket封装成了jquery插件,主要是为了更方便调用和让代码更加简洁,我后台管理是做成的一个web桌面形式,打开每个功能应用,主要是采集,必须使用websocket开启一个链接与python做的服务端进行通信,用原始的方式,会让结构非常不清晰,那就封装起来用吧,看下面例子

 

 

这是我这个websocket插件使用方法

//=========启动一个websocket      var Socket1 = $.websocket({          domain:"www.qhnovel.com",   //这是与服务器的域名或IP          port:8080,                  //这是服务器端口号          protocol:"text",            //这东西可有可无,组合起来就是 ws://www.qhnovel.com:8080/test          onOpen:function(event){              alert("已经与服务端握手,onOpen可省略不写");          },          onError:function(event){              alert("发生了错误,onError可省略不写");          },          onSend:function(msg){              alert("发送数据额外的代码,可省略不写");          },          onMessage:function(result,nTime){              alert("从服务端收到的数据:" + result);              alert("最近一次发送数据到现在接收一共使用时间:" + nTime);          }      });      //=========发送数据方式      Socket1.send("要发送的数据");      //=========关闭连接      Socket1.close();

Socket.bOpen == false 时候没有连接到服务端

 

websocket客户端本身就比较简单,这里只是在大量使用时候结构更清晰,我在与python服务端进行通信时候数据是通过了base64编码,然后用json 方式发送过来的,js 解码 base64出现中文乱码可看我另一篇文章

 

python实现新版websocket服务端请看我另一篇文章

 

代码我给的都是完整的,也比较清晰,要用的人直接复制粘贴就可以了

 

博客地址:http://0x14.iteye.com