Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >简易聊天室的实现 - Ajax轮询与长轮询

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

作者头像
xcsoft
发布于 2021-07-14 08:46:42
发布于 2021-07-14 08:46:42
1.4K00
代码可运行
举报
文章被收录于专栏:星辰日记星辰日记
运行总次数:0
代码可运行

什么是轮询

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

Ajax轮询

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

前端:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
      function getData() {
          $.ajax({
              url: 'server.php',
              type: 'get',
              success: function (data) {
                console.log(data);  // console输出
             }
         })
     }
     setInterval("getData()",1000);  //关键点,通过每隔1s访问一次服务器达到获取数据的目的
 </script>
后端
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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
代码运行次数:0
运行
AI代码解释
复制
<?php
  while(true)
  {
    file_get_contents('server.php');  //获取后台数据
    sleep(1);     //休息一秒继续获取
  }
?>

Ajax长轮询

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

前端:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    function getData() {
     $.ajax({
         method: 'GET',
         url: 'server.php',
         timeout: 50000,  //50秒延迟
         success: function(data) {
             console.log(data)
             getData();   //关键点,成功之后又发起请求
         },
         error: function(res) {
             getData();   //关键点,失败之后也重新发起请求
         }
     });
 }
 getData();
后端
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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
代码运行次数:0
运行
AI代码解释
复制
  <?php
     while(true)
    {
      if(无数据返回){
        等待数据返回(不断开连接)
      } else {
       有数据返回,返回给前端;
      }
    }
  ?>

示例demo

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

完整样例

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

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
mysql长轮询_ajax的轮询和长轮询
轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接。
全栈程序员站长
2022/11/08
4.1K0
网页实时聊天之js和jQuery实现ajax长轮询
摘要总结:本文通过分析PHP和JavaScript两种不同的语言实现聊天室,阐述了使用JavaScript实现聊天室的优势和可行性。同时,本文还通过具体的代码示例,讲解了使用jQuery插件实现聊天室的具体方法,对于从事前端开发的人员具有一定的参考价值。
枕边书
2018/01/04
4.5K0
网页实时聊天之js和jQuery实现ajax长轮询
spring ajax 长轮询,Ajax轮询和长轮询
缺点:Ajax轮询需要服务器有很快的处理速度与快速响应。long poll需要很高的并发,体现在同时容纳请求的能力。
全栈程序员站长
2022/11/04
1.5K0
PHP+WebSocket搭建简易聊天室实践
  公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室。于是搜集各种资料看文档、找实例自己也写了个简单的聊天室。
星哥玩云
2022/07/08
1.3K0
PHP+WebSocket搭建简易聊天室实践
IM即时通信多房间聊天室仿微信聊天(二)
在IM即时通信多房间聊天室仿微信聊天(一)中我们已经搭建了基本的通信架构,接下来重点就是如何在自己的后台接收并处理客户端用户的消息了
安德玛
2022/03/06
1.6K0
轮询与长轮询
轮询 """ 轮询即轮番询问 让浏览器定时(例如每隔5s中发送一次)通过ajax偷偷滴朝服务端发送请求获取数据 不足之处 消息延迟 请求次数过多 损耗资源严重 效率低 基本不用 """ 长轮询 """ 服务端给每个客户端创建一个队列,让浏览器通过发送ajax请求,请求各自队列中的数据,如果没有数据则会阻塞但是不会一直阻塞,利用timeout参数加异常处理的形式最多阻塞30s之后返回,浏览器判断是否有数据,没有则继续发送请求(目前网页版的微信和qq用的还是这个原理) 优点:在无消息的
GH
2020/03/19
1.4K0
Ajax轮询定时的通过Ajax查询服务端
客户端按规定时间定时向服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接。
挨踢小子部落阁
2019/07/02
2.3K0
【全栈开发】---- 一文掌握Django的轮询、长轮询
在我们日常开发Web应用程序时,通常依赖HTTP协议来实现客户端与服务器之间的通信。在这种模式下,浏览器发起请求,服务器处理并响应这些请求。尽管这种请求-响应模型适用于大多数应用场景,但在某些情况下,比如直播间的实时聊天功能,它显得力不从心。具体来说,在一个直播间中,当一位用户发送消息后,其他观众需要即时看到这条信息,这就要求服务器能够主动向客户端推送更新,而不是被动地等待客户端发起请求。
用户11404404
2025/03/06
2030
丑low的聊天室
笔者第一次上网,学校网络室给定制的首页是一个红泥巴的聊天室。这回去看了下,卧槽还没倒闭:
一粒小麦
2019/07/18
7690
丑low的聊天室
传统轮询、长轮询、服务器发送事件与WebSocket
构建网络应用的过程中,我们经常需要与服务器进行持续的通讯以保持双方信息的同步。通常这种持久通讯在不刷新页面的情况下进行,消耗一定的内存资源常驻后台,并且对于用户不可见。本文将简要介绍Web通信中常用的四种方式。
kirin
2021/05/08
3.1K0
Typecho 无插件获取必应每日壁纸、故事
在原来的基础上添加了自定义路径变量$pach_image;注释掉了每日删除之前图片和故事信息。因为要保存图片。
laoknas网络技术
2021/07/14
6820
关于轮询与长轮询的分享
  1、轮询(Polling)是一种CPU决策如何提供周边设备服务的方式,又称“程控输入输出”(Programmed I/O)。轮询法的概念是:由CPU定时发出询问,依序询问每一个周边设备是否需要其服务,有即给予服务,服务结束后再问下一个周边,接着不断周而复始。
用户7053485
2020/03/11
2.6K0
如何使用PHP+WebHook自动同步Gitee、Github仓库内的代码到服务器?
本文以Gitee作为演示,Github实现步骤是一样的,区别在于二者WebHook推送的数据有所区别。
房东的狗丶
2023/02/17
1.4K0
连夜撸了一个简易聊天室
分不清轮询、长轮询?不知道什么时候该用websocket还是SSE,看这篇就够了。
芋道源码
2020/12/08
7520
连夜撸了一个简易聊天室
curl 要么 file_get_contents 获得授权页面的方法的必要性
今天,需要工作,需要使用 curl / file_get_contents 获得授权的必要性(Authorization)的页面内容。解决后写了这篇文章分享给大家。
全栈程序员站长
2022/07/06
1.2K0
vue结合axios与后端进行ajax交互
以前vue官方推荐的ajax库是vue-resource, 现在改为axios,原因详见Retiring vue-resource
章鱼喵
2018/08/02
7070
vue结合axios与后端进行ajax交互
​语音聊天程序源码——简单的聊天室搭建
安装好swoole后开始搭建 前段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聊天室</title> </head> <style> #set_name{ margin: auto; text-align: center; } </style> <body> <h3 style="text-align: center">亮亮的聊天室</h3> <d
nicai123
2019/10/07
4K0
​语音聊天程序源码——简单的聊天室搭建
easyswoole实现在线聊天室功能
一 : 安装easyswoole,可参考http://www.php20.cn/article/82
仙士可
2019/12/19
2.1K0
easyswoole实现在线聊天室功能
php+websocket 实现在线聊天室功能详解,含前后端代码
本文实例讲述了php+websocket 实现的聊天室功能。分享给大家供大家参考,具体如下:
程序猿的栖息地
2022/04/29
4K1
php+websocket 实现在线聊天室功能详解,含前后端代码
获取Bing图片作为WordPress等网站首页背景图
必应搜索的图片是什么这里就不说了,昨天渣渣龙在群里艾特要我把Bing的每日一图作为网站背景图
沈唁
2019/05/22
1.3K0
获取Bing图片作为WordPress等网站首页背景图
推荐阅读
相关推荐
mysql长轮询_ajax的轮询和长轮询
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验