diagnosis_app/views/IM/index/index.vue

<template>	
	<view class="">
		<chat-room 
			:chats="chats"
			@send="send"
		/>
	</view>
</template>

<script>
	import ChatRoom from '@/components/IM/index.vue';
	import {rongcloudInit,sendMsg,connect} from '@/libs/rongcloud';
	import {deepClone} from '@/libs';
	export default {
		components:{
			ChatRoom
		},
		data() {
			return {
				chats:[],
				communicatorId:"",
				communicatorName:""
			}
		},
		created() {
			this.initChat();
		},
		onLoad({id,name}) {
			this.communicatorId=id;
			this.communicatorName=name;			
		},
		methods: {
			//客户端连接服务器
			initChat(){
				rongcloudInit({
					receiveMsg:(info)=>{
						this.receive(info)
					},
					status(evt){
						console.log('聊天室状态：'+evt.status)
					}
				}); 
				let user=uni.getStorageSync('accountInfo');
				if(user){
					let imToken=user.imToken;
					connect({
						token:imToken
					}); 					
				}
			},
			send(sendmessage){
				let chats=deepClone(this.chats);
				let targetId=this.communicatorId;
	            sendMsg({sendmessage,targetId}).then((res)=>{    
					let info=res.content.content;
					chats.push({
						msg:info,
						type:'mine',
						user:'自己'
					})	
					this.chats=chats;	
	            }).catch((error)=>{
					chats.push({
						msg:"消息发送失败",
						type:'system',
						user:'系统'
					})                
	            })  					
			},
			receive(info){
				console.log("收到消息")
				let chats=deepClone(this.chats);
				let name=this.communicatorName;	
					
				console.log({
					msg:info.content.content,
					type:'receive',
					user:name				
				})
				chats.push({
					msg:info.content.content,
					type:'receive',
					user:name
				})	
				this.chats=chats;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('./index.css') 
</style>