从web实时通讯讲H5 WebSocket

时间 2019-11-11

标签 web 实时通讯 h5 websocket 栏目 HTML 繁體版

原文原文链接

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

前期实时通讯解决方式html

1> HTTP轮询 jquery

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

2.适用场景：在知道信息交互的时间间隔的状况下，使用它是一个好的办法，然而大多数的状况下，咱们都不知道信息交付的时间间隔，咱们不知道用户何时发数据，新闻何时更新等等..浏览器

3.缺陷：使用HTTP轮询方式须要服务器有很快处理速度和资源，并且发送的http请求也不少缓存

2> 长轮询服务器

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

2.缺陷：当信息量很大时，长轮询的性能相较于传统的通讯而言并无明显的优点，由于客户端必须繁重得重连服务器来获取新信息。而且长轮询缺少标准实现。并且长轮询须要有很高的并发能力即同时接待多个客户的能力网络

3> 流化技术并发

1.定义：在流化技术中，客户端发送一个请求，服务器发送并维护一个持续更新和保持打开（能够指定时间段，也能够设置为无限）的开放响应，每当服务器有须要交付给客户端的信息时，它就更新响应socket

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~~