Vue在H5 项目中使用融云进行实时个人单聊通讯


Posted in Vue.js onDecember 14, 2020

由于其他博客的相关融云的Vue项目开发不是特别完善,此项目加入了自己的一些思考,可供大家有一点方向。

1.融云官网注册账号,创建应用并获取必要的初始化参数 appkey

Vue在H5 项目中使用融云进行实时个人单聊通讯

2.融云web开发文档 本人使用3.x 版本

3.vue项目引入cdn(index.html)

​ 项目需求:用户当前会话列表+用户当前会话页面

// 注意在dom之前引入

<script src="https://cdn.ronghub.com/RongIMLib-3.0.0-dev.js"></script>

4.在项目开始之前先获取融云返回的Token(此操作需要后端操作,token用于后面初始化连接融云时使用)

// 获取融云token
	// RongToken --- api ---
  getRongToken() {
    let userId = this.$store.state.member.info.member_id
    let name = this.$store.state.member.info.member_name
    let portraitUri = this.$store.state.member.info.member_avatar
    RongToken(userId,name,portraitUri).then((res) => {
      if(res.code == 200) {
        this.appToken = res.data.token
        // 将融云token 存入vuex
        this.$store.commit('setAppToken',res.data.token)
      }else{
        return;
      }
    })
  },

5.融云初始化

// 初始化融云
initRong() {
  this.IM = RongIMLib.init({
    appkey: 'xxxxxxx' // 融云appkey
  })
},

6.建立连接

// 建立连接 

getConnect() {
  var user = {
    token: this.$store.state.im_chat.appToken
  };
  this.IM.connect(user).then((res) => {
    // console.log('链接成功, 链接用户 id 为: ', res.id); 
    // 改变用户连接状态 用于监听用户是否已连接 
    this.$store.commit('changeConnectStatus',true)
  }).catch((error) => {
    // console.log('链接失败: ', error.code, error.msg);
  });
},

7.会话列表(用于监听会话列表及渲染当前会话列表)

// 用于监听会话列表
ImWatch() {
  let IM = this.IM
  let conversationList = [];
  let option = {
    count: 30
  }
  IM.Conversation.getList(option).then((allConversationList) => {
    // console.log('获取会话列表成功', allConversationList);
    conversationList = IM.Conversation.merge({
      conversationList: conversationList,
      updatedConversationList: allConversationList
    }); // TODO 更新会话列表界面
    this.list = conversationList
  });
  IM.watch({
    conversation: (event) =>{
      var updatedConversationList = event.updatedConversationList; // 更新的会话列表
      // console.log('更新会话汇总:', updatedConversationList);
      // console.log('最新会话列表:', IM.Conversation.merge({
      //   conversationList: conversationList,
      //   updatedConversationList: updatedConversationList
      // }));
      this.list = updatedConversationList
    },
    message: function(event){
      var message = event.message;
      // console.log('收到新消息', message);
    },
    status: (event)=>{
      var status = event.status;
      if(status != RongIMLib.CONNECTION_STATUS.CONNECTED) {
        this.$store.commit('changeConnectStatus',false)
      }
      switch (status) {
      case RongIMLib.CONNECTION_STATUS.CONNECTED:
        console.log('链接成功');
        break;
      case RongIMLib.CONNECTION_STATUS.CONNECTING:
        console.log('正在连接中');
        break;
      case RongIMLib.CONNECTION_STATUS.DISCONNECTED:
        console.log('已主动断开连接');
        break;
      case RongIMLib.CONNECTION_STATUS.NETWORK_UNAVAILABLE:
        console.log('网络不可用'); // SDK 内部会自动进行重连
        break;
      case RongIMLib.CONNECTION_STATUS.SOCKET_ERROR:
        console.log('Socket 链接错误'); // SDK 内部会自动进行重连
        break;
      case RongIMLib.CONNECTION_STATUS.KICKED_OFFLINE_BY_OTHER_CLIENT:
        console.log('其他设备登录, 本端被踢'); // 己端被踢, 不可进行重连. 否则会造成多端循环互踢
        break;
      case RongIMLib.CONNECTION_STATUS.BLOCKED:
        console.log('链接断开, 用户已被封禁');
        break;
      default:
        console.log('链接状态变化为:', status);
        break;
      }
    }
  })
},

Vue在H5 项目中使用融云进行实时个人单聊通讯

8.会话页面(用于监听当前新消息是否是当前聊天对象以及是否渲染在当前会话页面)

// 用于当前会话页面
ImWatch() {
  let IM = this.IM
  var conversation = IM.Conversation.get({
    targetId: this.targetId,
    type: RongIMLib.CONVERSATION_TYPE.PRIVATE
  });
  var option = {
    timestrap: 0, // 为0从当前时间最新获取
    count: 20
  };
  conversation.getMessages(option).then((result) =>{
    var list = result.list; // 历史消息列表
    var hasMore = result.hasMore; // 是否还有历史消息可以获取
    // console.log('获取历史消息成功', list, hasMore);
    this.list = list
  });
  IM.watch({
    message: function(event){
      var message = event.message;
      // console.log('收到新消息', message);
    },
    // 监听会话
    conversation:(res) => {
      var updatedConversationList = res.updatedConversationList;
      // 发送信息过来--用户id
      // 发送过来id != 当前用户id 或者当前会话id 则不渲染在列表中
      // 等于当前id 或 会 话id 则即加入列表中
      let updateId = updatedConversationList[0].latestMessage.content.user.id
      let member_id = this.$store.state.member.info.member_id
      let targetId = Number(this.targetId)
      if(updateId != targetId && updateId != member_id){
        return;
      }
      this.list.push(updatedConversationList[0].latestMessage)
    },
    status: (event)=>{
      var status = event.status;
      if(status != RongIMLib.CONNECTION_STATUS.CONNECTED) {
        this.$store.commit('changeConnectStatus',false)
      }
      switch (status) {
      case RongIMLib.CONNECTION_STATUS.CONNECTED:
        console.log('链接成功');
        break;
      case RongIMLib.CONNECTION_STATUS.CONNECTING:
        console.log('正在连接中');
        break;
      case RongIMLib.CONNECTION_STATUS.DISCONNECTED:
        console.log('已主动断开连接');
        break;
      case RongIMLib.CONNECTION_STATUS.NETWORK_UNAVAILABLE:
        console.log('网络不可用'); // SDK 内部会自动进行重连
        break;
      case RongIMLib.CONNECTION_STATUS.SOCKET_ERROR:
        console.log('Socket 链接错误'); // SDK 内部会自动进行重连
        break;
      case RongIMLib.CONNECTION_STATUS.KICKED_OFFLINE_BY_OTHER_CLIENT:
        console.log('其他设备登录, 本端被踢'); // 己端被踢, 不可进行重连. 否则会造成多端循环互踢
        break;
      case RongIMLib.CONNECTION_STATUS.BLOCKED:
        console.log('链接断开, 用户已被封禁');
        break;
      default:
        console.log('链接状态变化为:', status);
        break;
      }
    }
  })
},

9.会话页面(用于点击发送之后监听发送信息及渲染当前页面)

// 监听当前发送的信息
send() {
  if(this.context == '') {
    Toast('请输入内容');
    return;
  }
  var conversation = this.IM.Conversation.get({
    targetId: this.targetId, // 发送的目标id
    type: RongIMLib.CONVERSATION_TYPE.PRIVATE, // 单聊
  });
  conversation.send({
    messageType: RongIMLib.MESSAGE_TYPE.TEXT, // 'RC:TxtMsg'
    content: {
      content: this.context, // 文本内容
      // 发送消息携带的参数 用于页面渲染及相关判断
      user:{
        id:this.$store.state.member.info.member_id,
        username:this.$store.state.member.info.member_name,
        shopname:this.storeName,
        portraitUri:this.$store.state.member.info.member_avatar,
      }
    }
  }).then((message) =>{
    // console.log('发送文字消息成功', message);
    this.context = ''
  }).catch((error) => {
    Toast('发送失败,请重试')
  });
}

Vue在H5 项目中使用融云进行实时个人单聊通讯

到此这篇关于Vue在H5 项目中使用融云进行实时个人单聊通讯的文章就介绍到这了,更多相关Vue使用融云实时个人单聊通讯内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 #Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 #Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 #Vue.js
vue3.0实现插件封装
Dec 14 #Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 #Vue.js
Vue实现点击当前行变色
Dec 14 #Vue.js
Vue实现简单购物车功能
Dec 13 #Vue.js
You might like
967 个函式
2006/10/09 PHP
php实现的短网址算法分享
2014/06/20 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
解析Python中while true的使用
2015/10/13 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
django连接oracle时setting 配置方法
2019/08/29 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
元旦文艺汇演主持词
2014/03/26 职场文书
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers