专栏首页星辰日记简易聊天室的实现 - Ajax轮询与长轮询

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

什么是轮询

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

Ajax轮询

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

前端:

<script>
      function getData() {
          $.ajax({
              url: 'server.php',
              type: 'get',
              success: function (data) {
                console.log(data);  // console输出
             }
         })
     }
     setInterval("getData()",1000);  //关键点,通过每隔1s访问一次服务器达到获取数据的目的
 </script>

后端

<?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的延迟问题。(上述示例仅供方法参考,并不是最终样式)我们可以用伪代码来演示以下实现原理:

<?php
  while(true)
  {
    file_get_contents('server.php');  //获取后台数据
    sleep(1);     //休息一秒继续获取
  }
?>

Ajax长轮询

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

前端:

    function getData() {
     $.ajax({
         method: 'GET',
         url: 'server.php',
         timeout: 50000,  //50秒延迟
         success: function(data) {
             console.log(data)
             getData();   //关键点,成功之后又发起请求
         },
         error: function(res) {
             getData();   //关键点,失败之后也重新发起请求
         }
     });
 }
 getData();

后端

<?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,'');
    }
  }
}
?>

  我们可以用伪代码表示:

  <?php
     while(true)
    {
      if(无数据返回){
        等待数据返回(不断开连接)
      } else {
       有数据返回,返回给前端;
      }
    }
  ?>

示例demo

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

完整样例

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 网页实时聊天之js和jQuery实现ajax长轮询

    众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系。所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,...

    枕边书
  • 轮询与长轮询

    GH
  • HTML5 - Websocket

    Websocket是一种在单个TCP连接上进行全双工通讯的协议,他能够允许服务端主动向客户端推送数据。

    xing.org1^
  • PHP聊天室简单实现方法详解

    用户 = 客服 (先把信息入库,然后通过ob+长连接不断从数据库查询数据发送给客服)

    砸漏
  • 原 荐 webSocket与ajax、web

    作者:汪娇娇 时间:2017年8月2日 先看一个有道释义: ? 其实释义的挺形象的,下面我来一一解释哈: 1、聊天室:webSocket有名的应用就是聊天室了;...

    jojo
  • 原 荐 webSocket与ajax、web

    jojo
  • 基于Spring 4.0 的 Web Socket 聊天室/游戏服务端简单架构

    在现在很多业务场景(比如聊天室),又或者是手机端的一些online游戏,都需要做到实时通信,那怎么来进行双向通信呢,总不见得用曾经很破旧的ajax每隔10秒或者...

    风间影月
  • PHP系列 | PHP跨平台实时通讯框架 Socket.IO 的应用

    利用PHP构建能够在不同浏览器和移动设备上良好运行的实时应用,如实时分析系统、在线聊天室、在线客服系统、评论系统、WebIM等。

    Tinywan
  • SignalR 项目介绍

    SignalR 是 ASP.NET 团队正在开发的一个 Microsoft .NET Framework 库和 jQuery 插件,可能包括在以后版本的 ASP...

    张善友
  • ajax实现轮询

    ajax,每一个前端开发都用过,都知道它一般是异步的,也能同步使用。websocket,没开发过实时监听数据的项目一般不会用过。

    wade
  • WebSocket 原理浅析与实现简单聊天

    随着 Web 的发展,用户对于 Web 的实时推送要求也越来越高,在 WebSocket 出现之前,大多数情况下是通过客户端发起轮询来拿到服务端实时更新的数据,...

    政采云前端团队
  • springmvc+maven+netty-socketio服务端构建实时通信

    WebSocket是HTML5的一种新通信协议,它实现了浏览器与服务器之间的双向通讯。而Socket.IO是一个完全由JavaScript实现、基于Node.j...

    wuweixiang
  • 网页端收消息,究竟是推还是拉?

    抛开这些技术细节不谈,暂且认为服务端对每一个用户都有一个“待收消息”的队列,里面存放了需要给这个用户的一切消息。

    架构师之路
  • auto-comet服务器端向客户端的自动发送

    介绍一个服务器端自动向客户端推送信息的框架。在这之前先要了解几个东西,首先是comet comet介绍 基于 HTTP 长连接的“服务器推”技术,是一种新的 W...

    cloudskyme
  • 轮询和长轮询 轮询和长轮询

    大道七哥
  • 丑low的聊天室

    笔者第一次上网,学校网络室给定制的首页是一个红泥巴的聊天室。这回去看了下,卧槽还没倒闭:

    一粒小麦
  • HTML5 - websocket的应用 之 简易聊天室

    HTTP协议中,服务器是基于“请求 到 响应”的一个模型的 。也就是说,服务器无法主动发送消息给客户端,他必须接收一个请求才能响应。

    xing.org1^
  • ASP.NET SignalR 2.0入门指南介绍SignalRSignalR和WebSocket传输和回滚HTML5 传输协议Comet transports传输协议选择过程监测传输指定传输协议连接

    介绍SignalR ASP.NET SignalR 是一个为 ASP.NET 开发人员的库,简化了将实时 web 功能添加到应用程序的过程。实时Web功能使服务...

    小白哥哥
  • 【Go 语言社区】Web 通信 之 长连接、长轮询(long polling)--转

    基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交互性。 一、什么是长连接...

    李海彬

扫码关注云+社区

领取腾讯云代金券