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仿微信聊天界面
May 06 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
使用jQuery实现购物车
Oct 29 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
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Python实现学校管理系统
2018/01/11 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
有模特经验的简历自我评价
2013/09/19 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
党章学习思想汇报
2014/01/14 职场文书
理财投资建议书
2014/03/12 职场文书
一年级学生评语
2014/04/23 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
社区科普工作方案
2014/06/03 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
2016大一新生军训感言
2015/12/08 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
python中数组和列表的简单实例
2022/03/25 Python