短轮询
- 原理
短轮询利用http的请求/响应模式，通过每隔一段时间向服务器发送请求获取服务器数据更新，在开发过程中，利用ajax和setInterval()方法实现每隔一段时间向服务器发送请求的功能。 - 实现
/* 客户端 */
function ajaxRequest() {
return axios.post('------')
}
setInterval(ajaxRequest, 2000);
/* 服务端 */
服务端正常操作，该干嘛干嘛！
comet
- 原理
comet与传统的ajax区别在于，客户端会与服务端保持一个长连接，只有当客户端需要的数据更新时，服务器才会主动将数据推送给客户端。comet的实现方式有两种，一种是使用基于ajax的长轮询，另一种方式是基于iframe及HTMLfile的流方式。基于ajax方式的长轮询中，服务端在接受到客户端ajax 发送请求不立即返回响应，而是堵塞请求直到超时或有数据更新。当服务端在上述情况下返回响应后，客户端通过js再次发送请求建立连接，重复上述步骤。
/* 客户端 */
function ajaxRequst() {
axios.post('----', {
timeout: 20000, // 超时时间
})
.then(
() => {
// 继续发送请求
ajaxRequst();
},
() => {
// 超时
ajaxRequst();
}
})
}
/* 服务端 */
<?php
set_time_limit(0);
usleep($_POST['time']);
while(true) {
$rand = rand(1, 999);
if ($rand < 5000) {
$arr = array('success' => '1', 'name' => '有值', 'text' => $rand);
echo json_encode($arr);
exit();
} else {
$arr = array('success' => '0', 'name' => '无值', 'text' => $rand);
echo json_encode($arr);
exit();
}
}
?>
SEE
SEE不需要依赖客户端向服务器发送请求，而是可以直接在服务器端有数据更新时进行发送到客户端，相比轮询的‘拉数据’这种推送数据有着低延迟、高性能的优势。这种方法的服务器端非常简介，只要维护一个服务器和客户端之间的协议即可。前端使用EventSource对象
/* 客户端 */
let client = new EventSource('see.php');
es.addEventListener('mess', function (e) {
console.log(e);
});
/* 服务端 */
<?php
header('Content-Type: text/event-stream'); //这是专门为sse设置的数据格式
$time = date('Y-m-d H:i:s');
//下面这些echo出来的东西就是上面说的服务器端和客户端之间的协议
echo 'retry: 3000'.PHP_EOL; //retry类型的数据，规定了浏览器在连接断开之后进行再次连接之前的等待时间
echo 'data: The server time is: '.$time.PHP_EOL.PHP_EOL;
?>
上面的代码首先实例化了一个EvenetSource对象，并传入与之通讯的服务器端文件sse.php。利用addEventListener()方法，为对象绑定一个事件，（上面提到message在收到服务器发送时间时执行）。当客户端收到服务器传来的协议时，微页面中添加数据，通过获取的e.data获取，对应服务器端文件中协议表data类型定义的数据，即Thwawevertimeis...。
