WebSocket（三）-H5 WebSocket 客戶端實現

原文地址：WebSocketDemo

//這是一個標准的demo
(function ($) {
    var $j = $;
    var ws;
    var msgObj = $j("#result");
    var port = "8900";
    var http = "192.168.10.253";
    var url = "ws://" + http + ":" + port;

    window.JSocket = {
        socket: null,
        userObject: null,

        init: function () {
            var support = "MozWebSocket" in window ? "MozWebSocket" : ('WebSocket' in window ? 'WebSocket' : null);
            if (support == null) {
                alert("您的瀏覽器不支持WebSocket!");
                msgObj.text("您的瀏覽器不支持WebSocket!");
                return false;
            }

            // if(!window.WebSocket){
            //     alert("您的瀏覽器不支持WebSocket!");
            //     msgObj.text("您的瀏覽器不支持WebSocket!");
            //     return false;
            // }

            this.connect();

        },

        connect: function () {
            try {
                ws = new WebSocket(url);  //, 'subprotocol'
                // ws.binaryType = "blob";
                if (ws.readyState === WebSocket.CONNECTING) {
                    console.log("正在連接WebSocket服務器...");
                    msgObj.text("正在連接WebSocket服務器...");
                }

                ws.onopen = this.onopen;
                ws.onmessage = this.onmessage;
                ws.onclose = this.onclose;
                ws.onerror = this.onerror;
            } catch (e) {
                console.log("Error：" + e);
                msgObj.text("Error：" + e.Message);
            }
        },

        disconnect: function () {
            if (ws != null && ws.readyState === WebSocket.OPEN) {
                ws.close();  //關閉TCP連接
            }
        },

        onopen: function (e) {
            //JSocket.sendMessage("Test!");
            console.log("open");
            msgObj.text("open");
            if (ws.readyState === WebSocket.OPEN) {
                console.log("已連接到WebSocket服務器");
                msgObj.text("已連接到WebSocket服務器");
            }

            // var THRESHOLD = 10240;
            // setInterval(function(){
            //     if(ws.bufferedAmount < THRESHOLD){
            //         JSocket.sendMessage("測試");
            //     }
            // }, 1000);
        },

        onmessage: function (e) {
            console.log("message");
            msgObj.text("message");
        },

        onclose: function (e) {
            var result = JSocket.getWebSocketState(ws);
            // console.log("close事件wasClean：" + e.wasClean + ",code：" + e.code + ",error：" + e.error + ",reason：" + e.reason + "," + result);
            msgObj.text("close事件wasClean：" + e.wasClean + ",code：" + e.code + ",error：" + e.error + ",reason：" + e.reason + "," + result);

            // 斷開后重新連接
            // if(ws.readyState !== WebSocket.OPEN){
            //     setTimeout(function(){
            //         JSocket.connect();
            //     }, 1000 * 3);
            // }
        },

        onerror: function (e) {
            console.log("error:" + e);
            // msgObj.text("error");
        },

        // WebSocket可以收發消息的類型有String、Blob和ArrayBuffer
        // readyState、bufferedAmount 和protocol。
        // bufferedAmount 特性檢查已經進入隊列，但是尚未發送到服務器的字節數
        sendMessage: function (msg) {
            if (ws != null && ws.readyState === WebSocket.OPEN) {
                if (msg == "" || msg == null || msg == "undefined") {
                    return false;
                }
                ws.send(msg);
                console.log(msg);
            } else {
                console.log("發送失敗！原因：可能是WebSocket未能建立連接！");
                msgObj.text("發送失敗！原因：可能是WebSocket未能建立連接！");
            }
        },

        getWebSocketState: function (ws) {
            var result = "";
            switch (ws.readyState) {
                case 0:
                    result = "連接正在進行中，但還未建立";
                    break;
                case 1:
                    result = "連接已經建立。消息可以在客戶端和服務器之間傳遞";
                    break;
                case 2:
                    result = "連接正在進行關閉握手";
                    break;
                case 3:
                    result = "連接已經關閉，不能打開";
                    break;
            }

            return result;
        },

        log: function (s) {
            if (document.readyState !== "complete") {
                // log.buffer.push(s);
            } else {
                msgObj.html(s + "\n");
            }
        },

        jsonToString: function (json) {
            return JSON.stringify(json);
        },

        stringToJson: function (str) {
            try {
                str = str.replace(/\'/g, "\"");
                return JSON.parse(str);
            } catch (error) {
                console.log(error);
            }
        }
    };

})(jQuery);