标签：function web socket 轮询 xhr ws 请求 连接 客户端

参考链接
https://blog.csdn.net/yingzizizizizizzz/article/details/83416987

一、短轮询 (定时器实现)

1. 定义：

在一秒内（自定义），由浏览器对服务器发出HTTP request请求，然后由服务器返回最新的数据给客户端的浏览器。
传统的web通信模式，后台处理数据，需要一定时间，前端想要知道后端的处理结果，就要不定时的向后端发出请求以获得最新情况。

2. 应用场景：小型应用

3. 优点：前后端编写程序容易

4. 缺点：

1、请求中有大半是无用，难于维护，浪费带宽和服务器资源；
2、响应的结果没有顺序（因为是异步请求，当发送的请求没有返回结果的时候，后面的请求又被发送，此时如果后面的请求比前面的请求要先返回结果，那么前面的请求返回结果数据已经是过时无效的数据了，利用率低）

5.实现：

var xhr = new XMLHttpRequest();
    setInterval(function(){
        xhr.open('GET','/user');
        xhr.onreadystatechange = function(){
        
        };
        xhr.send();
    },1000)

二、长轮询

1. 定义：

客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，
直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。

2. 应用场景：WebQQ、Facebook IM

3. 优点：在无消息的情况下，没有得到回应的时候，不会频繁地请求，耗费资源小。

4. 缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护。

5. 实现：

function ajax(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET','/user');
        xhr.onreadystatechange = function(){
              ajax();
        };
        xhr.send();

三、websocket 双向通信

参考链接
http://www.ruanyifeng.com/blog/2017/05/websocket.html

1. 定义：

1.WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
2.在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

2. 应用场景： 股票交易行情分析、聊天室、在线游戏

3. 优点：

1.请求响应快，不浪费资源。传统的http请求，其并发能力都是依赖同时发起多个TCP连接访问服务器实现的，而websocket则允许我们在一条连接上同时并发多个请求。
2.由于TCP的慢启动特性（新连接速度上来是需要时间的），以及连接本身的握手损耗，都使得websocket协议的这一特性有很大的效率提升；http协议的头部太大，且每个请求携带的几百上千字节的头部大部分是重复的，websocket则因为复用长连接而没有这一问题。
3.HTTP协议只有客户端询问之后才回复，解决了同步有延迟的问题。

4. 缺点：

主流浏览器支持的Web Socket版本不一致；服务端没有标准的API。

5. 实现：

//需要先npm install ws
 
//服务器端
var Server = require('ws').Server;
var wss = new Server({
    port:2000
});
wss.on('connection',function(ws){
    ws.on('message',function(data){
        ws.send('你好,客户端,我是服务器!');
        console.log(data);
    })
});

//node客户端

var WebSocket = require('ws');
var socket = new WebSocket('ws://localhost:8080/');
socket.on('open',function(){
   socket.send('你好，服务器,我是客户端');
});
socket.on('message',function(event){
   console.log(event);
})

//html客户端(注:浏览器客户端与node客户端只需要一种)

<script>
   var ws= new WebSocket('ws://localhost:8080/');
     //实例对象的onopen属性，用于指定连接成功后的回调函数。
   ws.onopen = function(evt) { 
   console.log("Connection open ..."); 
   ws.send("Hello WebSockets!");
};
  //如果要指定多个回调函数，可以使用addEventListener方法。
  ws.addEventListener('open', function (event) {
    ws.send('Hello Server!');
});

  //实例对象的onmessage属性，用于指定收到服务器数据后的回调函数。
   ws.onmessage = function(evt){
     console.log( "Received Message: " + evt.data);
     ws.close();
   };
   //实例对象的onclose属性，用于指定连接关闭后的回调函数。
   ws.onclose = function(evt) {
 console.log("Connection closed.");
};  
</script>

四、SSE(Server-sent-events)

1. 定义：以流的形式由服务端持续向客户端发送数据的技术

2. 应用场景:

由于HTTP是无状态的传输协议,每次请求需由客户端向服务端建立连接,HTTPS还需要交换秘钥，所以一次请求,建立连接的过程占了很大比例,虽然增加了keep-alive来保持和服务器的长连接,省去了很多建立连接的过程,但通信过程仍然是想要获得数据，就必须先发送一个request才能得到一个response,所以在实时监控、推送、视频直播等实时性较高或者带宽利用较苛刻的场景，仍然不是很合适。
SSE技术由于能保持连接，并持续接收服务端的数据，所以弥补了这一缺点。

3. 优点：

开发简单，和传统的http开发几乎无任何差别,客户端开发简单,有标准支持（EventSource）

4. 缺点：

websocket相比，只能单工通信，建立连接后，只能由服务端发往客户端，且占用一个连接，如需客户端向服务端通信，需额外打开一个连接

标签：function,web,socket,轮询,xhr,ws,请求,连接,客户端
来源： https://blog.csdn.net/rookie_0_0/article/details/115276900

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。