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 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
vue的项目如何打包上线
Apr 13 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
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
Python 不同对象比较大小示例探讨
2014/08/21 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
电子专业自荐信
2014/07/01 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书