当前访客身份:游客 [ 登录  | 注册加入尚学堂]
直播

我来了!

拥有积分:3868
尚学堂雄起!!威武。。。

博客分类

笔记中心

课题中心

提问中心

答题中心

解答题中心

jquery websocket 插件

我来了! 发表于 2年前 (2014-11-04 17:13:01)  |  评论(0)  |  阅读次数(853)| 0 人收藏此文章,   我要收藏   


 
//==========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服务端请看我另一篇文章

 

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

 

分享到:0
关注微信,跟着我们扩展技术视野。每天推送IT新技术文章,每周聚焦一门新技术。微信二维码如下:
微信公众账号:尚学堂(微信号:bjsxt-java)
声明:博客文章版权属于原创作者,受法律保护。如果侵犯了您的权利,请联系管理员,我们将及时删除!
(邮箱:webmaster#sxt.cn(#换为@))
北京总部地址:北京市海淀区西三旗桥东建材城西路85号神州科技园B座三层尚学堂 咨询电话:400-009-1906 010-56233821
Copyright 2007-2015 北京尚学堂科技有限公司 京ICP备13018289号-1 京公网安备11010802015183