jquery websocket 插件

fmms 12年前發布 | 100K 次閱讀 jQuery jQuery插件

//==========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);</pre>

        我把自己網站后臺管理部分重新寫了一遍,以前用的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

 本文由用戶 fmms 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!