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中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 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入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
jquery的键盘事件修改代码
2011/02/24 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
node.js超时timeout详解
2014/11/26 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
用python实现刷点击率的示例代码
2019/02/21 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
Python callable内置函数原理解析
2020/03/05 Python
Python多分支if语句的使用
2020/09/03 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
.NET是怎么支持多种语言的
2015/02/24 面试题
大学生实习感言
2014/01/16 职场文书
教师自我反思材料
2014/02/14 职场文书
年终晚会主持词
2014/03/25 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
营销总监岗位职责
2014/09/16 职场文书
政工师工作总结2015
2015/05/26 职场文书