websocket相关js sdk设计小结

先问自己几个问题

• websocket的一般写法？

• 如何做浏览器websocket能力检测？

• 哪些浏览器不支持websocket对象？

• 对于不支持websocket对象的浏览器有什么解决方案？

• 简要说一说关于websocket的js-sdk的架构思路

浏览器websocket一般写法

   var URL = 'ws://localhost:8087';
var socket = new WebSocket(URL);

//监听 打开连接
socket.onopen(function(event){
    console.log(event);
});

//监听 收到消息
socket.onmessage(function(event){
    console.log(event);
});

//监听 连接断开
socket.onclose(function(event){
    console.log(event);
});

//关闭连接
socket.close();

浏览器WebSocket能力检测

并不是所有浏览器都能“new WebSocket(URL)”，有写浏览器并不支持websocket,在你使用这种方式之前，最好做一下浏览器的能力检测。如果用户的浏览器不支持websocket写法。要么你改换其他方案来实施，要么你干脆啥也不做，告诉用户让他们换用其他现代浏览器。（如果你能告诉你的客户，让他们使用你指定的浏览器，这自然是最好的。）

   // 浏览器能力检测，前提是WebSocket函数没有被覆盖
function hasWebSocket(){
    return typeof WebSocket === 'function'?true:false;
}

对于不支持websocket对象的浏览器有什么解决方案？

• http://socket.io/

• http://sockjs.org

• http://www.jmesnil.net/stomp-...

简要设计

• 初始化主要是websocket地址，创建websocket对象

• 业务处理函数主要处理用户的操作，例如点击发送，接电话，挂点话等主动操作

• 事件处理函数主要是处理服务端推送过来的事件，这部分接口留给第三方来实现

代码雏形

   var softPhone = (function(){
    //配置信息
    var config = {
        debug:true
    };
    
    //内部函数
    var app = {
        //日志输出
        log:function(msg){
            if(config.debug){
                console.info(msg);
            }
        },
        error:function(msg){
            if(config.debug){
                console.error(msg);
            }
        },

        //事件派发
        deliverEvent:function(e){
            switch(e.type){
                case 'createChat':app.createChat(e);break;
                case 'receiveMsg':app.receiveMsg(e);break;
                case 'closeChat':app.closeChat(e);break;

                default:app.error('事件类型不存在');break;
            }
        },

        //空白事件 创建聊天 该事件需要第三方通过softphone.on()事件覆盖本函数
        createChat:function(e){
            app.error('该事件还没有被完成！');
        },

        //空白事件 收到消息 该事件需要第三方通过softphone.on()事件覆盖本函数
        receiveMsg:function(e){
            app.error('该事件还没有被完成！');
        },

        //空白事件 聊天关闭 该事件需要第三方通过softphone.on()事件覆盖本函数
        closeChat:function(e){
            app.error('该事件还没有被完成！');
        }
    };

    //公共接口
    return {
        //初始化
        init:function(url){
            var socket = new WebSocket(url);

            socket.onopen = function(e){
                app.log(e);
            };

            socket.onmessage = function(e){
                app.log(e);
                
                //事件派发
                app.deliverEvent(e);
            };

            socket.onclose = function(e){
                app.log(e);
            };

            socket.onerror = function(e){
                app.log(e);
            };
        },

        //添加事件处理函数
        on:function(name,fn){
            app[name]=fn;
        },

        //触发事件
        trigger:function(e){
            //只有在debug模式下才开启
            if(config.debug){
                app.deliverEvent(e);
            }
        },

        //日志
        log:function(msg){
            app.log(msg);
        },

        //设置softphone的debug
        setDebug:function(switcher){
            config.debug = switcher || true;
        },

        //打电话接口
        //to:对方号码
        //from:本机号码
        makeCall:function(opt){

        }
    };
})();


//第三方实现模块

softPhone.on('createChat',function(e){
    softPhone.log('完成createChat');
});

softPhone.on('receiveMsg',function(e){
    softPhone.log('完成receiveMsg');
});

softPhone.on('closeChat',function(e){
    softPhone.log('完成closeChat');
});

深入

关于写js-sdk设计的资料

• https://github.com/huei90/jav...

写在最后

我自己做过类似的两个项目，js写的比较不规范，虽然可以运行起来。希望通过自己的总结，可以把类似的项目做得更好。非常感谢大家的阅读，有什么不准确的地方，欢迎指正。