websocket相关js sdk设计小结

标签: geek | 发表时间:2016-10-15 00:00 | 作者:
出处:http://itindex.net/admin/pagedetail

先问自己几个问题

  • 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对象的浏览器有什么解决方案?

简要设计

  • 初始化主要是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设计的资料

写在最后

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

相关 [websocket 相关 js] 推荐:

websocket相关js sdk设计小结

- - IT瘾-geek
websocket的一般写法. 如何做浏览器websocket能力检测. 哪些浏览器不支持websocket对象. 对于不支持websocket对象的浏览器有什么解决方案. 简要说一说关于websocket的js-sdk的架构思路. 浏览器websocket一般写法. var URL = 'ws://localhost:8087'; var socket = new WebSocket(URL); //监听 打开连接 socket.onopen(function(event){.

WebSocket实战

- - 新浪UED
互联网发展到现在,早已超越了原始的初衷,人类从来没有像现在这样依赖过他;也正是这种依赖,促进了互联网技术的飞速发展. 而终端设备的创新与发展,更加速了互联网的进化;. WebSocket的前世今生. 为什么使用WebSocket. 搭建WebSocket服务器. 以上六点分为两大块,前3点侧重理论,主要让大家明白WebSocket是什么,而后3点则结合代码实战,加深对WebSocket的认知.

tomcat7之websocket

- - ITeye博客
从tomcat7.0.26之后开始支持websocket,建议大家使用tomcat7.0.30,期间版本的接口有一些改动. chrome默认支持websocket. 其他浏览器可能由于安全原因,默认是关闭的. // 与7.0.27不同的,Tomcat改变了createWebSocketInbound方法的定义,增加了一个HttpServletRequest参数.

基于Tomcat的WebSocket

- - ITeye博客
之前大概的看过WebSocket,当时Tomcat还不支持WebSocket,所以当时写了一篇基于Jetty的WebSocket实现,地址如下:. 现在Tomcat7.0.27发布了,从这个版本开始Tomcat就支持WebSocket了. Tomcat的WebSocket和Jetty的大致上差不多,大同小异,这里就简单的贴两个类吧:.

【转载】认识HTML5的WebSocket

- - HTML5研究小组
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API. WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术. 这个新的API提供了一个方法,从客户端使用简单的语法 有效地推动消息到服务器. 让我们看一看HTML5的WebSocket API:它可用于客户端、服务器端.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

反向Ajax,第2部分:WebSocket

- KnightE - 译言-电脑/网络/数码科技
来源Reverse Ajax, Part 2: WebSockets. 时至今日,用户期待的是可通过web访问快速、动态的应用. 这一文章系列展示了如何使用反向Ajax(Reverse Ajax)技术来开发事件驱动的web应用. 系列的第1部分介绍了反向Ajax、轮询(polling)、流(streaming)、Comet和长轮询(long polling).

七种WebSocket框架的性能比较

- - 鸟窝
前一篇文章 使用四种框架分别实现百万websocket常连接的服务器介绍了四种websocket框架的测试方法和基本数据. 最近我又使用几个框架实现了websocket push服务器的原型,并专门对这七种实现做了测试. 本文记录了测试结果和一些对结果的分析. 使用三台C3.4xlarge AWS服务器做测试.

Atmosphere 2.4.1 发布,异步 WebSocket 框架

- - 开源中国社区最新新闻
Atmosphere(大气)框架中包含用于构建异步Web应用程序客户端和服务器端的组件. 大多数 流行的框架要么支持Atmosphere要么那个框架提供本地支持. Atmosphere框架支持所有主要的 浏览器和服务器. Atmosphere透明地支持WebSockets、服务器发送的事件(SSE, Server Sent Events)、长轮询(Long-Polling)、HTTP流(永远帧)和JSONP.

使用nginx作为websocket的proxy server

- - CSDN博客推荐文章
WebSocket协议为创建客户端和服务器端需要实时双向通讯的webapp提供了一个选择. 其为HTML5的一部分,WebSocket相较于原来开发这类app的方法来说,其能使开发更加地简单. 大部分现在的浏览器都支持WebSocket,比如Firefox,IE,Chrome,Safari,Opera,并且越来越多的服务器框架现在也同样支持WebSocket.