uniapp接入融云

接入的第一步,当然是先看融云的文档,uniapp是混合开发,在手机端测试没有问题,在小程序微信开发者工具里面是测试不了的,所以在接入融云时,拿真机测试

融云文档API说明文档链接(常规)

  1. 融云集成:https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/uniapp.html
  2. 融云状态码标识:https://docs.rongcloud.cn/v4/views/im/noui/code/web.html?plat=uniapp
  3. 融云 聊天:https://docs.rongcloud.cn/v4/views/im/noui/guide/private/msgmanage/msgsend/web.html?plat=uniapp

接入

1.首先去下载融云的sdk(RongIMLib-3.0.5-dev.js),

const RongIMLib = require('./RongIMLib-3.0.5-dev.js')

2.请在开发功能之前从 融云开发者后台 (opens new window)注册得到的 Appkey,开发者在使用融云 SDK 所有功能之前,开发者必须先调用此方法初始化 SDK。 在应用整个生命周期中,开发者只需要将 SDK 初始化一次。

import store from '@/store';
var im = RongIMLib.init({
	appkey: '****c***9kqb3rdc6elj'	//Appkey
})

im.watch({	
	conversation: function(event) {
		var updatedConversationList = event.updatedConversationList; // 更新的会话列表
		console.log(updatedConversationList,'updatedConversationList')
	},
	message: function(event) {
		var message = event.message;
		ryStatus.newMsg.msg = message
		ryStatus.newMsg.num += 1
		store.commit('setNewState', ryStatus.newMsg);    //新消息存入缓存
		// console.log('接收消息成功,消息内容为:', message.content.content);
	},
	status: function(event) {
		var status = event.status;
		ryStatus.status= status
		// console.log('0,成功;1:正在连接;连接状态码:', status);
	}
});

3.需先设置监听再连接服务器

	let _t = this
	let ry_token = this.$store.state.vuex_user.ry_token
	im.connect({
		token: ry_token
	}).then((user) => {
		_t.userRyId = user.id
		// console.log('链接成功, 链接用户 id 为: ', user.id);
		im.Conversation.getList().then(function(conversationList) {
		  // console.log('获取会话列表成功', conversationList);
		  _t.$store.commit('setConversationList',conversationList)	//会话列表存入store
		});
		_t.getMsgList()
	}).catch(function(error) {
		console.log(error,'链接失败')
	});

4.获取会话列表

let ry_service_uid =  this.$store.state.vuex_user.ry_service_uid
var conversation = im.Conversation.get({
  targetId: ry_service_uid,
  type: RongIMLib.CONVERSATION_TYPE.PRIVATE
});
var option = {
  timestrap: +new Date(),
  count: 20
};
conversation.getMessages(option).then(function(result){
  var list = result.list; // 历史消息列表
  let arr = []
  list.forEach((v,k)=>{
	  let obj = {
		  type:v.type,
		  messageType:v.messageType,
		  sentTime:v.sentTime,
		  msg:{
			targetId:v.targetId,
			senderUserId:v.senderUserId,
			content:v.content.content,
			imageUri:v.content.imageUri || ''
		  }
	  }
	  arr.push(obj)
  })
  _t.msgList = arr
  _t.$nextTick(function() {
  	// 滚动到底
  	_t.scrollToView = 'msg'+arr[arr.length-1].sentTime
  });

需注意项

1.接入融云时,聊天时如果有图片,不要使用console.log(),不然日志缓冲区会爆(错误标识:unexpected EOF!)

这是自己从自己项目中抽取出来随意弄得一个demo https://download.csdn.net/download/qq_17798999/16587291

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐