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实现广告栏上下滚动效果
Nov 26 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
JS日历 推荐
2006/12/03 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
Puppet的一些技巧
2018/09/17 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
Python ZipFile模块详解
2013/11/01 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python+opencv实现动态物体追踪
2018/01/09 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
巴西购物网站:Estrela10
2018/12/13 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
后备干部培训方案
2014/05/22 职场文书
员工聘用合同范本
2015/09/21 职场文书