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 相关文章推荐
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery冲突问题解决方法
Jan 19 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
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
PHP网络操作函数汇总
2015/05/18 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
vue-router的hooks用法详解
2020/06/08 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
Structs界面控制层技术
2013/10/11 面试题
银行会计财务工作个人的自我评价
2013/10/29 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
php解析非标准json、非规范json的方式实例
2022/05/10 PHP