博客 - Websocket的简单应用

var SocketClient = {

    websocket: undefined,

    strModule: "",

    strCommand: "",

    parametersObj: {},

    OnMessageCallBackFun: undefined,

    OnErrorCallBackFun: undefined,

    OnOpenCallBackFun: undefined,

    OnCloseCallBackFun: undefined,

    sendSocket: function() {

        this.setMessageInnerHTML("module:" + this.strModule);

        this.setMessageInnerHTML("command:" + this.strCommand);

        var reqObj = {

            module: this.strModule,

            command: this.strCommand,

            parameters: null

        };

        if (this.strCommand == '' || this.strModule == '') {

            return false;

        }

        reqObj.parameters = this.parametersObj;

        this.setMessageInnerHTML("parameters:" + JSON.stringify(this.parametersObj));

        //调用打开方法

        var json = JSON.stringify(reqObj);

        this.setMessageInnerHTML("send:" + json);

        this.websocket.send(json); //将消息发送到服务端

    },

​

    //打印日志

    setMessageInnerHTML: function(innerHTML) {

        logInfo(innerHTML);

    },

​

    //关闭WebSocket连接

    closeWebSocket: function() {

        this.websocket.close();

    },

​

    openWebSocket: function(ip, port) {

        var that = this;

        that.setMessageInnerHTML("开始建立连接-->" + "ws://" + ip + ":" + port);

        //判断当前浏览器是否支持WebSocket

        if ('WebSocket' in window) {

            that.websocket = new WebSocket("ws://" + ip + ":" + port);

        } else {

            that.setMessageInnerHTML("当前浏览器 Not support websocket");

            try {

                return that.OnErrorCallBackFun("当前浏览器 Not support websocket");

            } catch (e) {}

        }

​

        //连接发生错误的回调方法

        that.websocket.onerror = function () {

            that.setMessageInnerHTML("WebSocket连接发生错误");

            try {

                return that.OnErrorCallBackFun("WebSocket连接发生错误");

            } catch (e) {}

        };

​

        //连接成功建立的回调方法

        that.websocket.onopen = function () {

            that.setMessageInnerHTML("WebSocket连接成功");

            try {

                return that.OnOpenCallBackFun("WebSocket连接成功");

            } catch (e) {}

        };

​

        //接收到消息的回调方法

        that.websocket.onmessage = function (event) {

            console.log(event.data);

            that.setMessageInnerHTML("recv<==" + event.data);

            try {

                return that.OnMessageCallBackFun(JSON.parse(event.data));

            } catch (e) {}

        };

​

        //连接关闭的回调方法

        this.websocket.onclose = function () {

            that.setMessageInnerHTML("WebSocket连接关闭");

            try {

                return that.OnCloseCallBackFun("WebSocket连接关闭");

            } catch (e) {}

        };

​

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。

        window.onbeforeunload = function () {

            that.closeWebSocket();

        }

    }

};

​

​

var s = {

    CallBack: undefined,

    Field: 0,

    Test: function () {

        alert("Test: " + this.Field);

    },

    Demo: function () {

        this.Field = 9;

        alert("Demo: " + this.Field);

    },

    Fun: function (ent) {

        return this.CallBack(ent);

    }

};

​

function openFun () {

}

​

function errorFun () {

}

​

function messageFun () {

}

​

function closeFun () {

}

​

window.onload = function () {

   // set callback

   SocketClient.OnOpenCallBackFun = openFun;

   SocketClient.OnErrorCallBackFun = errorFun;

   SocketClient.OnMessageCallBackFun = messageFun;

   SocketClient.OnCloseCallBackFun = closeFun;

​

   // open socket

   SocketClient.openWebSocket('127.0.0.1', '9080');

};