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扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jquery实现拖拽添加元素功能
Dec 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
php不用正则采集速度探究总结
2008/03/24 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
vue的for循环使用方法
2019/02/12 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
python错误处理详解
2014/09/28 Python
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
Python列表操作方法详解
2020/02/09 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
Python中的流程控制详解
2021/02/18 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
英国网上花店:Bunches
2016/11/29 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
建党伟业的观后感
2015/06/01 职场文书
浅谈Python协程asyncio
2021/06/20 Python