前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >简易聊天室的实现 - Ajax轮询与长轮询

简易聊天室的实现 - Ajax轮询与长轮询

作者头像
xcsoft
发布2021-07-14 16:46:42
1.2K0
发布2021-07-14 16:46:42
举报
文章被收录于专栏:星辰日记星辰日记

什么是轮询

  轮询即rolling,通过Ajax循环访问服务端直到获取信息返回并关闭连接。 通俗点讲就是连续访问服务器,获取服务端数据并在前端输出。

Ajax轮询

  对于Ajax轮询, 我们可以简单的一笔带过,因为他真的太消耗服务器资源了。   Ajax轮询前端 index.html通过每隔一段时间访问后端 server.php并通过Jquery更新页面信息,后端负责判断是否有新信息通过json的形式传递给前端,我们来看一个样例:

前端:
代码语言:javascript
复制
<script>
      function getData() {
          $.ajax({
              url: 'server.php',
              type: 'get',
              success: function (data) {
                console.log(data);  // console输出
             }
         })
     }
     setInterval("getData()",1000);  //关键点,通过每隔1s访问一次服务器达到获取数据的目的
 </script>
后端
代码语言:javascript
复制
<?php
define('DATABASE','./database.json');
$f = new file();
echo json_decode($f->read(DATABASE),true);
//定义文件类
class file {
/*
  读取函数
 @param mixed $str  文件路径
*/
  function read($filepath) {
    if (file_exists($filepath)) {
      $str = file_get_contents($filepath);
      return json_decode($str,true);
    } else {
      self::write($filepath,'');
    }
  }
}
?>

  而这种Ajax轮询的方式无论如何都会每1s访问一次服务端,前一次请求完成后,无论有无结果返回,一秒之后下一次请求又会发出。这就叫做Ajax轮询。这边会导致严重消耗服务器资源,并且存在可能1s的延迟问题。(上述示例仅供方法参考,并不是最终样式)我们可以用伪代码来演示以下实现原理:

代码语言:javascript
复制
<?php
  while(true)
  {
    file_get_contents('server.php');  //获取后台数据
    sleep(1);     //休息一秒继续获取
  }
?>

Ajax长轮询

  对于聊天室的实现,相比Ajax轮询,Ajax长轮询是一个更好的方式。它优化了客户端与服务端之间的信息获取逻辑。通过前端设置一个较长的超时时间(如60秒),客户端访问一次后端,由后端判断是否存在新消息,如果有则 echo出来,没有则将前端挂起(不会断开连接,知道有新消息或到达超时时间)这就完美的解决了消息延迟以及很大程度上缓解了服务器压力。下面我们看一个样例:

前端:
代码语言:javascript
复制
    function getData() {
     $.ajax({
         method: 'GET',
         url: 'server.php',
         timeout: 50000,  //50秒延迟
         success: function(data) {
             console.log(data)
             getData();   //关键点,成功之后又发起请求
         },
         error: function(res) {
             getData();   //关键点,失败之后也重新发起请求
         }
     });
 }
 getData();
后端
代码语言:javascript
复制
<?php
define('DATABASE','./database.json');
$f = new file();
echo json_decode($f->read(DATABASE),true);
//定义文件类
class file {
/*
  读取函数
 @param mixed $str  文件路径
*/
  function read($filepath) {
    if (file_exists($filepath)) {
      $str = file_get_contents($filepath);
      return json_decode($str,true);
    } else {
      self::write($filepath,'');
    }
  }
}
?>

  我们可以用伪代码表示:

代码语言:javascript
复制
  <?php
     while(true)
    {
      if(无数据返回){
        等待数据返回(不断开连接)
      } else {
       有数据返回,返回给前端;
      }
    }
  ?>

示例demo

XCHAT   可以打开两个浏览器界面测试,由于极度占据服务器资源,可能在一定时间会关闭!对于聊天室还是推荐使用Websocket等方式

完整样例

  对于Ajax长轮询我提供了一个完整的样例,包括前端后端,可以直接部署参照. Github仓库

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是轮询
    • Ajax轮询
      • 前端:
      • 后端
    • Ajax长轮询
      • 前端:
      • 后端
  • 示例demo
  • 完整样例
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档