jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码


Posted in jQuery onMarch 21, 2017

心血来潮想为自己的小项目做一个提醒系统,譬如私信,评论等消息都能及时传递过来。由于道行尚浅,网上那些长轮询对于我略微复杂,于是觉得还是自己写一写试试比较好。

我的思路是,单独在数据库中建一个提醒表,表主要由接收者的id和消息类型两个字段组成

/* 前台提醒表 */
CREATE TABLE IF NOT EXISTS notification(
  id      INT NOT NULL AUTO_INCREMENT PRIMARY KEY,  --  主键自增
  mid     INT NOT NULL DEFAULT 0,            --  用户id
  type    INT NOT NULL DEFAULT 0            -- 0:私信 1:帖子评论 2:商品售出 3:商品评论 4:小组申请已发送 5:小组创建成功 6:小组新成员加入 7:小组旧成员退出 8:活动邀请
)ENGINE=MyISAM DEFAULT CHARSET=UTF8;

然后在前台页面中写一个递归函数,用来请求Ajax。

function require() {
   var url = "{U('Group/checkNotify')}";
    
   $.get(url,null,function(data) {
    



      // 如果获得的数据不为空,则显示提醒
      if ($.trim(data) != '') {
        // 这里写提醒的方式
    

alert('haha');
      }
   });
   // 每三秒请求一次
   setTimeout('require()',3000);
}

在后台查询三秒前到当前时刻数据库中是否有数据插入,如果有,则返回所需要的信息

public function checkNotify() {
  // 实例化自定义的模型类
  $Notify = D("Notification");
  // 获取当前用户的id
  $mid = $_SESSION['member']['id'];
  // 由于Ajax三秒钟才执行一次,所以新数据的插入时间要晚于查询的的请求时间(当前时间)三秒钟
  $time = time() - 3;
  // 准备查询条件
  $where = "mid = $mid and created>$time";
   // 查找数据库中是否有新数据插入
  $bool = $Notify->where($where)->find();
  // 如果查询结果非空,则输出结果集第零条数据的type参数,即提醒类型,然后再从数据库对应表中获取提醒内容
  //本测试默认3秒中内只有一条消息,如果想更加精确,也可以缩短请求时间
  if ($bool != null) {
    //测试数据     
    echo $bool[0]['type'];
  };
}

当然,要让文档载入完毕后就执行该函数

<body onload="javascript:return require();">

以上所述是小编给大家介绍的jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jquery插件实现搜索历史
Apr 24 jQuery
jquery插件制作 自增长输入框实现代码
Aug 17 #jQuery
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 #jQuery
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
You might like
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
用python 制作图片转pdf工具
2015/01/30 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python代码实现KNN算法
2017/12/20 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
农村婚礼证婚词
2014/01/10 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
本科生就业推荐信
2014/05/19 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
论文评审意见
2015/06/05 职场文书
护士业务学习心得体会
2016/01/25 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
python_tkinter弹出对话框创建
2022/03/20 Python