通讯（2）

短轮询

1. 原理
   短轮询利用http的请求/响应模式，通过每隔一段时间向服务器发送请求获取服务器数据更新，在开发过程中，利用ajax和setInterval()方法实现每隔一段时间向服务器发送请求的功能。
2. 实现

/* 客户端 */
function ajaxRequest() {
  return axios.post('------')
} 
setInterval(ajaxRequest, 2000);

/* 服务端 */
服务端正常操作，该干嘛干嘛！

comet

1. 原理
   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...。