近来,在做公司的聊天系统,引用的是极光的api。项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首页的,聊天的是子路由里面,我XXXX。监听过来我怎么给到子页面(注:没有引入vuex)?看样子只能存sessionStorage,但是vue也不可以监听sessionStorage阿(不知道为什么的,请去啃vue监听的代码)。那么重点来了 怎么实现?

  第一步

     

Vue.prototype.JIM  = JIMOBJECT
// 监听人的消息
Vue.prototype.JIMListenMsg = "";
// 需要监听的人的name
Vue.prototype.JIMListenTargetname = ""; 

  写入了原型几个变量,解释一下:JIMOBJECT 是我封装的极光的类,如下图(部分代码,省略了中间,需要极光的朋友可以私聊我要):

JIMListenMsg  是监听到的消息(最重要的变量,如果不是做极光的朋友,这一个就可以了)
JIMListenTargetname 记录用户点击的是在和谁聊天(极光实时聊天返回的是所有给你发消息的人 所以需要过滤掉)

第二步初始化、登录极光之后 聊天,对于不是做极光的就是在你们监听数据改变的地方。
this.JIM.JIM.onMsgReceive((data)=>{// 极光的实时监听this.receive(data);})//receive内容receive(msgBox){console.log(msgBox);if(msgBox.messages[0].content.msg_type=='image'){// 解析图片var obj = {};let url = "";let imgAlt = "";let imgWidth = 0;this.JIM.getResource(msgBox.messages[0].content.msg_body.media_id).then(data=>{if(data.message == "success"){url = data.url;imgAlt = '获取图片成功';// 过大的图片if(msgBox.messages[0].content.msg_body.width>document.body.clientWidth-6/16*document.body.clientWidth){imgWidth = document.body.clientWidth-6/16*document.body.clientWidth}obj = {url,imgAlt,imgWidth,msgSendType:1,//别人发给我传1 我发给别人穿0msgType : 1,//消息类型 图片传1 文字传0}}else{obj = {url,imgAlt:"获取图片失败",imgWidth,msgSendType:1,//别人发给我传1 我发给别人穿0msgType : 1,//消息类型 图片传1 文字传0}}}).catch(error=>{obj = {url,imgAlt:"获取图片失败",imgWidth,msgSendType:1,//别人发给我传1 我发给别人穿0msgType : 1,//消息类型 图片传1 文字传0}})}else if(msgBox.messages[0].content.msg_type=='text'){obj = {text:msgBox.messages[0].content.msg_body.text,msgSendType:1,//别人发给我传1 我发给别人穿0msgType : 0,//消息类型 图片传1 文字传0}}let sessionData = JSON.parse(sessionStorage.getItem("JIMMsgArr"))if (sessionData[this.targetName]!=undefined){let sessionedData = sessionData[this.targetName].push(obj);window.sessionStorage.setItem("JIMMsgArr",JSON.stringify(sessionData));}else{sessionData[this.targetName] = [];sessionData[this.targetName].push(obj);window.sessionStorage.setItem("JIMMsgArr",JSON.stringify(sessionData));}window.sessionStorage.setItem("JIMMsgArr",JSON.stringify(sessionData));if(msgBox.messages[0].from_username == this.$root.JIMListenTargetname){this.$root.JIMListenFunction(obj)}},

如上:我把聊天记录存储到sessionStorage,并且以用户key作为主键(根据自己需要),关键点是最后
 this.$root.JIMListenFunction(obj)

这句,触发一个全局方法,那么全局方法是什么呢?

this.$root.JIMListenFunction = (data)=> {this.$set(this.msgArr,this.msgArr.length,data);}

就是这个,写在你需要监听数据的地方,我赋值给msgArr 然后watch msgArr 调整页面滚动条,页面渲染呢?是不是想问?当然直接页面用msgArr就可以实现了。这个时候是不是有点懵逼,这些东西和sessionStorage有什么关系?

sessionStorage记录的是你所有的聊天以及聊天的列表,你不记录的话  历史记录怎么办?极光的历史记录只能记录你登录之前的记录,实时聊天切换用户时候 聊天记录不存的。

还有比较关键的就是在distoryed时候要把方法清空,防止切换出去还在工作

对于不是极光的朋友,你需要监听sessionStorage也可以用此方法,使用方法:将sessionStorage在更新的时候获取一边,然后把全局方法参数改为sessionStorage就可以了。

好了今天就分享这么多,帮助到你了么?请点个关注把。不懂的请加我qq:421217189  15274527

 
 

转载于:https://www.cnblogs.com/jinzhenzong/p/9323044.html

Vue跨路由触发事件,Vue监听sessionStorage相关推荐

  1. Vue动态路由传参和监听路由

    Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...

  2. 解决VUE在浏览器全屏下监听不到Esc键盘事件

    实测可以在谷歌.火狐.360 浏览器使用 解决了在浏览器全屏下监听不到键盘Esc事件 解决了取消全屏和全屏的同步问题,ESC按键下可以同步 以下是完整的代码, // data() {return {i ...

  3. vue中给window添加滚动监听无效的解决方案

    页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作. 我相信不少网友查阅过类似的资料,网友给出的解决方案,很多都是在mou ...

  4. VUE 全局监听sessionStorage变化

    VUE 全局监听sessionStorage变化 另参考: (转)vue中监听sessionStorage的变化

  5. qt Android 按键事件,QT无窗口状态下对键盘事件的监听

    Question:最近在搞linux下的一个客户端项目,需要接收键盘事件,但是又不能有界面,这种情况怎么处理呢? int main(int argc, char *argv[]) { QApplica ...

  6. 深入理解Spring的容器内事件发布监听机制

    前言 Spring 提供了 ApplicationContext 事件机制,可以发布和监听事件,这个特性非常有用. Spring 内置了一些事件和监听器,例如在 Spring 容器启动前,Spring ...

  7. 关于TP6的 事件,监听,订阅 理解

    最近关于业务原因.要使用到TP6的事件,之前有个模糊的的概念.今天彻底的去看一下,按照官方文档来说 定义事件 事件系统使用了观察者模式,提供了解耦应用的更好方式 首先的话需要生成一个事件类可以使用官方 ...

  8. jquery对事件的监听方法addEventListener()

    在这个点击事件的监听里,我们可以获取鼠标的点击坐标 (function($){window.addEventListener("click",function(evt){for(v ...

  9. html监听页面关闭事件,JS针对浏览器窗口关闭事件的监听方法集锦

    本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) window.οnbefοreun ...

最新文章

  1. c# redis hashid如何设置过期时间_Redis数据库实现原理(划重点)
  2. 电阻参数_压敏电阻原理、参数、选型
  3. H3C 路由器配置console密码登录[学习]
  4. ipad写python_ipad怎么写python
  5. Java笔记-使用RabbitMQ的Java接口生产数据并消费
  6. 天津农学院计算机考研专业,2021年天津农学院计算机与信息工程学院考研专业目录_研究生考试范围 - 学途吧...
  7. Flume之Source
  8. Cent OS 下 VI 使用方法
  9. springboot-异步线程调用
  10. 【优化算法】天牛须搜索优化粒子群算法【含Matlab源码 1256期】
  11. 基于51单片机WiFi温湿度远程控制
  12. 测回角值计算用计算机,土木工程测量6-计算题库及参考答案
  13. qq邮箱对方服务器退回,为什么我用QQ邮箱发邮件被退回来了?他说地 – 手机爱问...
  14. 五一就要到了,我用Python制作一款钉钉低价机票提示器!
  15. 2021年焊工(初级)考试资料及焊工(初级)新版试题
  16. JAVA宠物爱心驿站计算机毕业设计Mybatis+系统+数据库+调试部署
  17. 为你精选 · 地产行业数字化转型攻略
  18. Pygame实战:家里的小孩数学算数能力很差嘛?别慌—这款“巧算24点小游戏”等你来玩,管用。
  19. hugegraph图数据库索引详解
  20. LeetCode #69 x的平方根 二分查找

热门文章

  1. SAP Odata服务里filter的用法
  2. 一种轻量级的C4C业务数据同步到S/4HANA的方式:Odata通知 1
  3. it计算机知识竞赛主持稿,校园IT知识竞赛策划书
  4. 【HTML】JS基础知识
  5. 2014年职称计算机word2003,2014年职称计算机考试Word2003模拟题及答案5
  6. java radiobutton获取信息_如何获取JRadioButton的文本值
  7. 安装linux并卸载windows,如何在安装双启动后卸载 Windows 或者 Linux
  8. java短链接_java 生成短链接
  9. python 找到目录下文件名规则_Python学习第162课--PATH变量值修改以及模糊查找文件名...
  10. 8086控制转移指令学习笔记