由于Ajax实现与服务器间的数据通信是单向性的，所以只有当创建一个XHR对象向服务器端发起请求之后，服务器才能将响应的数据传输给客户端，而在客户端发起请求之前，服务器是不能将数据传递给客户端，而且对于Ajax数据通信来说，只能实现一次性的数据接收，也就是说如果服务器端的数据在实时更新的话，Ajax只能接收到服务器最开始发送的响应数据，后续的数据只能通过刷新页面或者重新打开浏览器才能接收到第二次的数据，这是因为Ajax属于短连接，即在接受完一次数据之后就会断开连接，所以Ajax只适用于展示非实时性的数据。
短轮询
短轮询指的是指定一个固定的时间间隔去不停的创建XHR对象来实现客户端与服务器端之间不间断的通信，也就是说可以通过调用setInterval()函数来循环创建XHR对象向服务器端发送请求，从而实现实时通信的效果。
function ajax(url){
let xhr = new XMLHttpRequest();
xhr.open("post",url);
xhr.onreadystatechange = function(){
if(xhr.readySatet == 4){
if(xhr.status >=200 && xhr.status <300 || xhr.status == 304){
console.log(xhr.responseText);
}
}
xhr.send();
setInterval(ajax("http://192.168.43.237:3000/sign"),2);
长轮询
与短轮询原理基本相同，长轮询也是通过不停的创建XHR对象向服务器端发送请求来实现数据的实时接收的，相对于短轮询，长轮询向服务器端发送一个请求，并且停留一段时间，如果当服务请求超时或者失败之后再次调用函数重新进行请求
function ajax(url){
let xhr = new XMLHttpRequest();
xhr.open("post",url);
xhr.onreadystatechange = function(){
if(xhr.readySatet == 4){
if(xhr.status >=200 && xhr.status <300 || xhr.status == 304){
console.log(xhr.responseText);
}else{
ajax(url);
}
}
xhr.send();
从实现情况来看，不论是长轮询还是短轮询，不断的向服务器端发送请求都会造成资源的浪费，而且如果数据量偏大的话，轮询很可能会造成客户端的崩溃或者卡顿。
SSE（服务器发送事件）
SSE（Sever-Sent Event）,是围绕只读Comat交互推出的API或者模式，且SSE API创建的为通向服务器的单项连接，即服务器可以通过API实时的传输数据到客户端，由于是只读模式，所以客户端并不能向服务器端发送数据，即服务器端向客户端的单向通信。SSE API 支持长轮询，短轮询和HTTP流，而且在断开连接的时候可以自动确定何时进行重新连接，所以通过SSE API来实现Comet就容易很多了。z1
要实现SSE模式，首先要创建一个EventSource对象
let sse = new EventSource("url");
注意，传入的URL要与当前页面处于同一个域，同一个端口号和协议中（同源），EventSource对象有一个readyState属性用来表示连接的状态，“0”表示正在连接服务器，“1”表示打开了连接，“2”表示关闭了连接，另外还有三个事件。
open()：表示建立连接时触发
message()：表示在从服务器接收新事件时触发
error()：表示在无法建立连接时触发
sse.onmessage = function(event){
alert(event);
}
默认情况下，EventSource会与服务器一直保持连接，在连接断开的情况下也会重新连接，如果想强制断开连接，可以使用
sse.close();
在执行SSE事件的过程中，事件流的执行过程为按顺序执行，最简单的情况是在每个数据项前面都添加一个data:前缀
data:"one"
data:"two"
data:"three"
data:"four"
message事件第一次触发获取到的数据为“one”,第二次触发获取到的数据为“two”，第三次触发获取到的数据为“three\nfour”(中间存在一个换行符)，所以在发送数据的时候，要在数据后面再添加一个空行，否则不能重新触发message事件
通过id:前缀可以给特定的事件制定一个关联ID，id:前缀位于data:前缀前后都可以
data:"one"
id:1
设置了ID之后，服务器会跟踪上一次触发的事件，当服务器断开连接，并且重新连接之后，就可以根据指定的ID来找到上一次触发的message事件的位置，从而继续往下执行，确保客户端能收到顺序正确的数据信息。
网友评论