WebSocket 初体验

其实老早就觊觎 Socket 这碗美食了，在 WebSocket 发出后更是心潮澎湃...

奈何这需要后端同志的帮助，使得至今才得以品尝。（当然本文也只涉及前端部分）

 

 

以前想监听其他设备变化，大屏幕交互，还有客服，多设备游戏等，

用过轮询（特定的时间间隔请求一次），后来也受教使用长链接（后端实现链接 1s 内不断，断了再请求）

但总要为性能这事捏一把汗，

而 Socket/WebSocket 就是即时通信，就是能很好的完成上述需求呀，

啊哈哈哈，不禁笑出了声音...

 

好的，回归正题，先看封装代码

function Socket(url, options) {
    var opt = $.extend({
        onopen: function(e){},
        whenGet: function(val){},
        onreset: function(){},
        beforeClose: function(){},
        onclose: function(){},  // (注：此处已不能再传输，为关闭后运行)
    }, options || {});

    var wsImpl = window.WebSocket || window.MozWebSocket;
    var socket = new wsImpl(url);

    // 关闭或刷新页面时，也关闭 socket
    var DispClose = true;
    $(window).on('beforeunload', CloseEvent);
    $(window).on('unload', UnLoadEvent);
    function _close() {
        opt.beforeClose.apply(this, arguments);
        socket.close();
    }
    function CloseEvent() {
        if (DispClose) return "是否离开当前页面?";
        _close();
    }
    function UnLoadEvent() {
        DispClose = false;
        _close();
    }

    // WebSocket 本身事件
    socket.onopen = function(){
        opt.onopen.apply(this, arguments);
    }
    socket.onclose = function(){
        opt.onclose.apply(this, arguments);
    }
    socket.onmessage = function(){
        opt.whenGet.apply(this, arguments);
    }
    socket.onerror = function(e){
        console.log(e);
    }

    // 外放的其他方法
    return {
        send: function(val) {
            socket.send(val);
        },
        reset: function(){
            socket = new wsImpl(url);
            opt.onreset.apply(this);
        },
        close: _close,
    };
}

演示地址： http://sum.kdcer.com/test/SocketGame/

 

技术难点：

1. 从后端那搞到 ws:// 格式的 url

2. 处理好 whenGet 的传值，可以看看演示的源码，这个就看需求，相当考逻辑了

 

但还有个小问题就是 socket 延时/主动断开的情况，beforeClose 就不运行了，也就不能传输告诉别人我挂了，这个很尴尬

 

敲黑板，WebSocket 是个好东西，大家快用起来吧，一起研究哈