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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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横向重复区域显示二法
2008/09/25 PHP
解析strtr函数的效率问题
2013/06/26 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
python实现进程间通信简单实例
2014/07/23 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
python中的django是做什么的
2020/07/31 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
旷课检讨书1000字
2014/02/14 职场文书
自荐信的基本格式
2014/02/22 职场文书
腾讯广告词
2014/03/19 职场文书
12岁生日演讲稿
2014/05/14 职场文书
个性婚礼策划方案
2014/05/17 职场文书
升职自荐信范文
2015/03/27 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
JVM之方法返回地址详解
2022/02/28 Java/Android