Js和Jquery实现ajax长轮询
众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系。所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息。
一直以来的方式无非有这么几种:
1、长连接,即服务器端不断开联系,PHP服务器端用ob系列函数来不停的读取输出,但是相当耗费服务器资源。
2、Flash socket,flash的as3语言,创建一个socket服务器用来处理信息。
3、轮询,顾名思义就是不停地发送查询消息,一有新消息立刻更新,但是会有多次无用请求。
4、长轮询,是轮询的升级版,需要服务器端的配合。
5、websocket,HTML5的通信功能,建立一个与服务器端的专用接口ws协议来进行通讯,兼容可能成为问题,改天研究一下这个。
如图:用AJAX发送询问信息,服务器在没有信息要返回的时候进入无限等待。由于AJAX异步的特性,PHP在服务器端执行等待不会影响到页面的正常处理。一旦服务器查询到返回信息,服务器返回信息,AJAX用回调函数处理这条信息,同时迅速再次发送一个请求等待服务器处理。
与传统轮询相比,长轮询在服务器没的返回信息的时候进入等待,减少了普通轮询服务器无数次的空回复。可以这样认为,长轮询使服务器每次的返回更有目的性,而不是盲目返回。
长轮询的服务器端实现:
聊天信息存储:
数据库设计为信息ID(msgid),发送人(sender),接收人(receiver),信息内容(content),设置senderRead和receiverRead的目的是标记信息是否已被读取,读取后改变标记,以区别信息是否已经被读取。
CREATE TABLE `msg` (
`msgid` int(11) unsigned NOT NULL AUTO_INCREMENT,
`sender` char(16) NOT NULL,
`receiver` char(16) NOT NULL,
`content` text,
`senderRead` tinyint(1) DEFAULT '0',
`receiverRead` tinyint(1) DEFAULT '0',
PRIMARY KEY (`msgid`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;
PHP脚本:
脚本的主要目的是处理来自ajax的每次询问,ajax每次询问就查询一下数据库,看有没有新的信息,如果没有,刚用usleep()函数等待一秒后再次查询,直到有新信息插入数据库并被查到,脚本返回查询到的数据,并退出无限循环,结束脚本。
<?php set_time_limit(0);//设置脚本超时时间为无限,不然在过了超时时间后脚本会自动关闭,轮询失败。 $link=new mysqli("127.0.0.1","root","root","test"); $search="select sender,receiver,content from msg where receiverRead=0 limit 1";//限制每次读出一条数据,便于修改其已读flag $change="update msg set receiverRead=1 where receiverRead=0 limit 1"; while (true) {//进入无限循环 $res = null; $res=$link->query($search); if($res->num_rows!=0){ $link->query($change); $msg=$res->fetch_assoc(); $jsonstr=json_encode($msg); echo $jsonstr; break;
}
usleep(1000);//如果没有信息不会进入if块,但会执行一下等待1秒,防止PHP因循环假死。
} ?>
客户端实现:
客户端的主要任务是设置一个ajax请求函数,每次查询时被调用,当没有信息返回时,服务器端被搁置,当前页面正常执行;当有信息返回时,函数处理返回的数据,并迅速再次调用此函数发送一次请求。
用原生JS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body> </body>
<script>
function link(){ var xhr=null;//先设置xhr为空,为了轮询时再次调用函数对xhr重用,引发错误 xhr=new XMLHttpRequest(); xhr.open('GET','server.php',true);//第三个参数一定要设置为true,异步不阻塞,不会影响到后面JS的执行。 xhr.send(); xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.status==200){ var obj = JSON.parse(xhr.responseText) console.log('发送人:'+obj.sender+'接收人:'+obj.receiver+'内容:'+obj.content) setTimeout(function(){link()},3000)
}
};
}
link();
</script>
</html>
Js和Jquery实现ajax长轮询的更多相关文章
- [转]网页实时聊天之js和jQuery实现ajax长轮询 PHP
网页实时聊天之js和jQuery实现ajax长轮询 众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的 ...
- 网页实时聊天之js和jQuery实现ajax长轮询
众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式 ...
- php websocket-网页实时聊天之PHP实现websocket(ajax长轮询和websocket都可以时间网络聊天室)
php websocket-网页实时聊天之PHP实现websocket(ajax长轮询和websocket都可以时间网络聊天室) 一.总结 1.ajax长轮询和websocket都可以时间网络聊天室 ...
- Comet 反Ajax: jQuery与PHP实现Ajax长轮询
原文地址(http://justcode.ikeepstudying.com/2016/08/comet-%E5%8F%8Dajax-%E5%9F%BA%E4%BA%8Ejquery%E4%B8%8E ...
- Ajax 长轮询
长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求. 优点:在无消息的情况下不会频繁的请求. 缺 ...
- 用大白话揭开Ajax长轮询(long polling)的神秘面纱
在看这篇Ajax长轮询之前可以先看看Ajax轮询技术(没有长),有助于理解: Ajax长轮询属于Ajax轮询的升级版,在客户端和服务端都进行了一些改造,使得消耗更低,速度更快. "不间断的通 ...
- ajax长轮询 (转)
javaWeb项目中需要一个实时提醒的功能,也就是某人做了某一操作,可以立即提醒到当前在线的用户 最开始想在用户做了操作后,储存一个状态到数据库中然后用每隔几秒用ajax去请求后台查询数据库来确定是否 ...
- 基于jquery,php实现AJAX长轮询(LongPoll),类似推送机制
HTTP是无状态.单向的协议,用户只能够通过客服端向服务器发送请求并由服务器处理发回一个响应.若要实现聊天室.WEBQQ.在线客服.邮箱等这些即时通讯的应用,就要用到“ 服务器推送技术(Comet)” ...
- Ajax长轮询(LongPoll)
1)HTML HTTP是无状态.单向的协议,用户只能够通过客服端向服务器发送请求并由服务器处理发回一个响应.若要实现聊天室.WEBQQ.在线客服.邮箱等这些即时通讯的应用,就要用到“ 服务器推送技术( ...
随机推荐
- 编译一个需要用特定key前面的应用程序
LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) # Build all java files in the java subdirectory L ...
- 20175215 2018-2019-2 第六周java课程学习总结
第七章 内部类与异常类 1.内部类 Java支持在一个类中定义另一个类,这样的类称作内部类,而包含内部类的类成为内部类的外嵌类 内部类和外嵌类之间重要关系如下 内部类的外嵌类的成员变量在内部类中仍然有 ...
- 【转】diamond专题(四)—— 容灾机制
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 套接字之close系统调用
close系统调用用于关闭文件描述符,其系统调用实现如下所示: / * Careful here! We test whether the file pointer is NULL before * ...
- DS博客作业8——课程总结
1.当初你是如何做出选择计算机专业的决定的? 本来我在集美大学第一志愿专业是理学院的数据科学与大数据,奈何隔壁县城小伙伴比我高了2分,我就来到了网络,但经过我和她的交流,我意识到我们的课程差不多,同样 ...
- DataV数据可视化功能特性
使用DataV制作实时销售数据可视化大屏 (本课程可以帮助数据分析师学习数据可视化大屏的制作,包括制作的方法.设计原则等基础知识,并提供一个微项目,使用数加的DataV基于ABC公司的经营数据,快速构 ...
- git解决二进制文件冲突
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/karizhang/article/details/50378253 1.冲突的产生 当我们向远程 ...
- EventChannel 原生向Flutter传递数据
目的:原生页面主动向Flutter页面传递信息 1 flutter步骤 定义EventChannel static const EventChannel eventChannel = EventCha ...
- N2RR
一.背景 氨(NH 3)是一种新兴的能量载体,在液氨中含有17.6%(重量)的氢,而在甲醇中的含量为12.5%(重量),很可能成为未来氢能经济的有希望的候选者.然而,如果基于NH 3的肥料不足以养活世 ...
- ListView 中如何优化图片?
图片的优化策略比较多.1.处理图片的方式:如果 ListView 中自定义的 Item 中有涉及到大量图片的,一定要对图片进行细心的处理,因为图片占的内存是ListView 项中最头疼的,处理图片的方 ...