Ajax轮询，Ajax长轮询和websockte

最新推荐文章于 2024-09-12 14:45:25 发布

原创最新推荐文章于 2024-09-12 14:45:25 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ajax

AjAx 专栏收录该内容

2 篇文章

订阅专栏

本文深入解析HTTP协议的特性，包括其请求响应模型、无状态性和被动性，对比短轮询和长轮询的优劣，并详细阐述WebSocket如何解决HTTP协议的不足，实现全双工通讯，提高实时性和效率。

http协议介绍：
http协议是请求响应式的，每个http相应都对应一个http请求，http协议是没有状态的，多个http协议之间是没有关系的。
http协议的被动性：在标准的http语义中，浏览器发送请求，服务器响应请求，在浏览器再次发送请求之前，服务器不能发送新的消息给浏览器。
http短轮询
介绍：浏览器发送http请求给服务器，无论请求的数据有没有到达服务器，服务器都要立即做出响应，当浏览器收到的是空数据时，停留一段时间，浏览器会再次发送相同的http请求给服务器用来获取数据。
缺点：服务器和浏览器之间的数据反馈是低效率的。

<html>

<head>

    <title></title>

    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

</head>

<body>

</body>

<script type="text/javascript">

        var getting = {

        url:'server.php',

        dataType:'json',

        success:function(res) {

         console.log(res);

}

};

//关键在这里，Ajax定时访问服务端，不断获取数据 ，这里是1秒请求一次。

setInterval(function(){$.ajax(getting)},1000);

</script>

</html>

http长轮询
介绍：浏览器发送http请求给服务器，如果服务器请求的数据到达就立即做出响应。反之，如果服务器请求的数据没有到达，会停留一段时间，在这段时间内，如果服务器请求的数据到达就立即做出响应，如果没有到达，服务器就会给浏览器发送一个空数据，浏览器收到这个空数据就会再次发送相同的http请求给服务器。
缺点：在服务器停留的那段时间，会造成服务器资源浪费。
例子：假设有 1000个人停留在某个客户端页面，等待server端的数据更新，那就很有可能服务器这边挂着1000个线程，在不停检测数据是否发生变化，这依然是有问题的；
http长轮询和短轮询的异同
相同点：服务器请求的数据没有到达时，长轮询和短轮询都会停留一段时间。
不同点：http长轮询是在服务器端停留，http短轮询是在浏览器端停留。
性能总结：从这里可以看出，不管是长轮询还是短轮询，都不太适用于客户端数量太多的情况，因为每个服务器所能承载的TCP连接数是有上限的，这种轮询很容易把连接数顶满；

<html>

<head>

    <title></title>

    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

</head>

<body>

</body>

<script type="text/javascript">

    //前端Ajax持续调用服务端，称为Ajax轮询技术

    var getting = {

        url:'server.php',

        dataType:'json',

        success:function(res) {

         console.log(res);

         $.ajax(getting); //关键在这里，回调函数内再次请求Ajax

}        
        //当请求时间过长（默认为60秒），就再次调用ajax长轮询
        error:function(res){
        $.ajax(getting);
        }

};

$.ajax(getting);

</script>

</html>

WebSocket 是什么？

WebSocket 是一种网络通信协议。RFC6455 定义了它的通信标准。

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

为什么需要 WebSocket ？

了解计算机网络协议的人，应该都知道：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。

这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步JavaScript和XML（AJAX）请求实现长轮询。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。

因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。WebSocket 连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接，就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。
websockte
介绍：websockte时html5规范发布的新协议，和http协议完全是两个概念。唯一的一点联系是：websockte为了兼容现有的浏览器，握手方式采用http协议的握手方式用来建立websockte连接。
websockte协议：客户端与服务器端建立的是持久连接。
WebSocket 解决了 HTTP 的几个难题
难题1（http协议的被动性）：采用 WebSocket 协议后，服务器可以主动推送消息给客户端；而不需要客户端以（长/短）轮询的方式发起http请求到server以获取数据更新反馈；这样一来，客户端只需要经过一次HTTP请求，就可以做到源源不断的信息传送了（在程序设计中，这种设计叫做回调，即：server 端有信息了再来通知client 端，而不是 client 端每次都傻乎乎地跑去轮询server端是否有消息更新）；
难题2（http协议的无状态性/健忘性）：短轮询是每次http请求前都要建立连接，而长轮询是相邻几次请求前都要建立连接；http请求响应完成后，服务器就会断开连接，且把连接的信息全都忘记了；所以每次建立连接都要重新传输连接上下文（下面有补充），将 client 端的连接上下文来告诉server 端；而 WebSockct只需要一次HTTP 握手，整个通讯过程是建立在一次连接（状态）中的，server 端会一直推送消息更新反馈到客户端，直到客户端关闭请求，这样就无需客户端为发送消息而建立不必要的 tcp 连接和为了建立tcp连接而发送不必要的冗余的连接上下文消息；
连接上下文补充：连接上下文，如限定客户端和服务器平台的所有头信息，认证属性，负载描述等；看个荔枝：

在这里插入图片描述
下面是荔枝给出一部分代码供参考

 var scoket=new WebSocket("wss://echo.websocket.org");
    var msg={
        time:new Date(),
        text:"hello",
        clientId:"acssdas"
    }
    scoket.onopen=function(){
        console.log("连接成功");
        scoket.send(JSON.stringify(msg));
    }

    scoket.onmessage=function(event){
        console.log(event.data)
        scoket.close();
    }
    scoket.onclose=function(){
        console.log("连接关闭");
    }

三者之间比较

	短轮询	长轮询	websockte
浏览器支持	几乎所有现代浏览器	几乎所有现代浏览器	IE 10+ Edge Firefox 4+ Chrome 4+ Safari 5+ Opera 11.5+
服务器负载	较少的CPU资源，较多的内存资源和带宽资源	与传统轮询相似，但是占用带宽较少	无需循环等待（长轮询），CPU和内存资源不以客户端数量衡量，而是以客户端事件数衡量。三种方式里性能最佳。
客户端负载	占用较多的内存资源与请求数。	与传统轮询相似。	同Server-Sent Event。
延迟	非实时，延迟取决于请求间隔。	同传统轮询。	实时。
实现复杂度	非常简单。	需要服务器配合，客户端实现非常简单。	需要Socket程序实现和额外端口，客户端实现简单。