从web实时通信讲H5 WebSocket

通常我们打开一个浏览器访问网页时,都会向页面所在的服务器发送一个HTTP请求,然后web服务器确认请求并向浏览器做出响应。简单的说,就是一个请求对应的一个响应。然而这种方法对许多的应用场景都会使服务器的HTTP请求变得臃肿,甚至崩溃。比如:对于股价、新闻每日推送、好友聊天信息收发等情况,如果每次都是客户端发送HTTP请求给服务器来获取相应数据,那么用户就需要每次都对页面进行刷新从而来获取最新的消息。相信这样的网页用户也不会喜欢

前期实时通信解决方式

1> HTTP轮询 

    1.定义:轮询是一种定时性的同步调用,客户端想服务器发送请求查看是否有可用的新数据。请求以固定的时间间隔发出,不管是否有信息,客户端都会得到响应数据:如果有可用信息,服务器就会将它们返回给客户端;如果没有可用信息,服务器就会返回一个拒绝响应,客户端接受到这种响应时就可以关闭连接。轮询的本质上就是推迟完成HTTP响应,向客户端提交信息

    2.适用场景:在知道信息交互的时间间隔的情况下,使用它是一个好的办法,然而大多数的情况下,我们都不知道信息交付的时间间隔,我们不知道用户什么时候发数据,新闻什么时候更新等等..

    3.缺陷:使用HTTP轮询方式需要服务器有很快处理速度和资源,而且发送的http请求也很多

2> 长轮询

    1.定义:客户端向服务器端请求信息,并在设定的时间内打开一个连接。服务器如果没有信息推送,那么请求就会一直打开,知道服务器响应数据或者设定的时间用完为止。当请求关闭时,客户端又可以重新向服务器发送请求信息。长轮询是一种阻塞模型,类似于打电话,没有人接就不挂电话,知道拨打电话时长超过限制或者对方接了。长轮询也称为Comet或者反向AJAX,长轮询延长HTTP响应的完成时间,直到服务器响应数据或者设定时间用完,这种技术通常称为挂起GET或者搁置POST

    2.缺陷:当信息量很大时,长轮询的性能相较于传统的通信而言并没有明显的优势,因为客户端必须繁重得重连服务器来获取新信息。并且长轮询缺乏标准实现。而且长轮询需要有很高的并发能力即同时接待多个客户的能力

3> 流化技术 

    1.定义:在流化技术中,客户端发送一个请求,服务器发送并维护一个持续更新和保持打开(可以指定时间段,也可以设置为无限)的开放响应,每当服务器有需要交付给客户端的信息时,它就更新响应

    2.缺陷:流化技术中的服务器从不发出完成HTTP响应的请求,从而使连接一直保持打开状态。这种情况下,代理和防火墙可能会缓存HTTP响应,导致信息交付的延迟时间增加,因此,大多数的流化测试对于存在防火墙和代理的网络都是不友好的

WebSocket

1.定义:WebSocket是一种自然的全双工、双向、单套接字连接。通过使用WebSocket,客户端发送的即时HTTP请求变成了打开WebSocket的单一请求,并且这一请求式连接会一直重用,知道用户关闭。

2.优势:WebSocket明显减少了延迟时间,因为只要建立起WebSocket连接,服务器就可以在消息可用时发送他们,客户端和服务器连接全过程都只发出一个请求,建立一个连接,服务器不需要等待来自客户端的HTTP请求,同时,客户端也可以在任何时候向服务器发送消息

WebSocket与轮询方式发送请求的方式

WebSocket测试小实例 

// 新建js文件 hellows.js 
<html> 
  <head> 
    <title>hello websocket</title> 
    <meta charset='UTF-8' /> 
  </head> 
  <body> 
    <input type="button" id='test' value='点我测试' /> 
    <!--引入JQuery文件简化DOM操作(其实就是懒~)--> 
    <script src="JS/jquery.min.js"></script> 
    <script>
            $(function(){
                //websocket测试服务器
                var url = "ws://echo.websocket.org/echo";
                var ws = null;
                function createws(){
                    if('WebSocket' in window)
                        ws = new WebSocket(url);
                    else if('MOzWebSocket' in window)
                        ws = new MozWebSocket(url);
                    else
                        console.log("浏览器太旧,不支持");
                }
                function btnfun(){
                    createws();
                    //成功建立WebSocket连接时触发onopen事件,通常客户端发送数据都是放在open事件里面
                    ws.onopen = function(){
                        console.log("connected");
                        ws.send("hello world");
                    };
                    //接受服务器响应数据时触发onmessage事件
                    ws.onmessage = function(event){
                        console.log("receive message:"+event.data);
                        //关闭websocket连接
                        ws.close(999,"close normal");
                    };
                    //服务器处理异常,通常在服务器里try-catch发生异常时或者连接异常时触发onerror事件
                    ws.onerror = function(err){
                        console.log("error: "+err);
                        ws.close(1000,"close after error");
                    };
                    //websocket连接关闭时触发onclose事件
                    ws.onclose = function(event){
                        console.log("close reason: "+event.reason);
                    };
                };
                //为button绑定事件
                $("#test").click($.fn.btnfun);
            });
        </script> </body> </html>

浏览器打开该页面,打开浏览器的控制台,然后点击里面的按钮将会出现一系列我们在里面设置的测试输出数据则代表websocket测试成功了。如果console控制台输出的是“浏览器太旧,不支持”,就表示当前所使用的浏览器版本太旧,虽然目前所有的主流浏览器的最新版本都包含了对WebSocket API以及其协议的支持,但是还是有一些在用的旧版本的浏览器没有这方面的支持,因此想要获得WebSocket的支持可以去下载新版本或者主流的浏览器,也可以研究变通或者模拟策略来自己模拟实现WebSocket~~ 

猜你喜欢

转载自my.oschina.net/u/3771868/blog/2208300
今日推荐