Vue Cli 3项目使用融云IM实现聊天功能的方法

<script src="https://cdn.ronghub.com/RongIMLib-2.3.5.min.js"></script>

created () { //生命周期函数-可发起求 let that = this //融云初始化 RongIMLib.RongIMClient.init('4z3hrv4ovrt'); //------------------------------重要填写appkey that.beforeIm() //设置监听，必须先设置监听，再连接 that.nowIm() //连接融云 }, methods: { ...mapMutations({ //读取最新消息列表，并设置----------------------------重要  getAnswer:'getAnswer' }), beforeIm(){  let that = this  // 连接状态监听器  RongIMClient.setConnectionStatusListener({   onChanged: function (status) {    // status 标识当前连接状态    switch (status) {     case RongIMLib.ConnectionStatus.CONNECTED:      console.log('链接成功');      break;     case RongIMLib.ConnectionStatus.CONNECTING:      console.log('正在链接');      break;     case RongIMLib.ConnectionStatus.DISCONNECTED:      console.log('断开连接');      break;     case RongIMLib.ConnectionStatus.KICKED_OFFLINE_BY_OTHER_CLIENT:      console.log('其他设备登录');      break;     case RongIMLib.ConnectionStatus.DOMAIN_INCORRECT:      console.log('域名不正确');      break;     case RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE:      console.log('网络不可用');      break;    }   }  });  // 消息监听器  RongIMClient.setOnReceiveMessageListener({   // 接收到的消息   onReceived: function (message) {    // 判断消息类型    switch(message.messageType){     case RongIMClient.MessageType.TextMessage:      // message.content.content => 文字内容      //----------------------------重要-------把获取的消息存放在store中，全局公用homeIm.vue要使用      console.log('8080',message,message.content.content)      that.getAnswer(message.content)      break;     case RongIMClient.MessageType.VoiceMessage:      // message.content.content => 格式为 AMR 的音频 base64      break;     case RongIMClient.MessageType.ImageMessage:      // message.content.content => 图片缩略图 base64      // message.content.imageUri => 原图 URL      break;     case RongIMClient.MessageType.LocationMessage:      // message.content.latiude => 纬度      // message.content.longitude => 经度      // message.content.content => 位置图片 base64      break;     case RongIMClient.MessageType.RichContentMessage:      // message.content.content => 文本消息内容      // message.content.imageUri => 图片 base64      // message.content.url => 原图 URL      break;     case RongIMClient.MessageType.InformationNotificationMessage:      // do something      break;     case RongIMClient.MessageType.ContactNotificationMessage:      // do something      break;     case RongIMClient.MessageType.ProfileNotificationMessage:      // do something      break;     case RongIMClient.MessageType.CommandNotificationMessage:      // do something      break;     case RongIMClient.MessageType.CommandMessage:      // do something      break;     case RongIMClient.MessageType.UnknownMessage:      // do something      break;     default:      // do something    }   }  }); }, nowIm(){ //自己的token------从接口获取，写到缓存  var token = JSON.parse(localStorage.getItem('userInfo')).IMUser.token//"WzrthC5f4UfuiI7dIwCQ5fwtGfqCdobpowIZkcQnj8PQOQuAJb/nIi1ayzGFwJguvbQZxbJH3x0=";  RongIMClient.connect(token, {   onSuccess: function(userId) {    console.log('Connect successfully. ' + userId);   },   onTokenIncorrect: function() {    console.log('token 无效');   },   onError: function(errorCode){    var info = '';    switch (errorCode) {     case RongIMLib.ErrorCode.TIMEOUT:      info = '超时';      break;     case RongIMLib.ConnectionState.UNACCEPTABLE_PAROTOCOL_VERSION:      info = '不可接受的协议版本';      break;     case RongIMLib.ConnectionState.IDENTIFIER_REJECTED:      info = 'appkey不正确';      break;     case RongIMLib.ConnectionState.SERVER_UNAVAILABLE:      info = '服务器不可用';      break;    }    console.log(info);   }  }); } },

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import './assets/style.css' // 外部static样式 ------重要import './assets/js/rem.js' //rem适配 ------重要import my from './assets/js/lbc.js' //------不重要 ---自定义全局方法import HomeNews from './components/HomeNews.vue' //自定义组件 ------重要Vue.component('HomeNews',HomeNews)Vue.prototype.$my=my //------不重要 ---自定义全局方法 使用 this.$my.xxxVue.config.productionTip = falsenew Vue({ router, store, render: h => h(App)}).$mount('#app')

import Vue from 'vue'import Vuex from 'vuex'import axios from 'axios'const API_PROXY = 'https://bird.ioliu.cn/v1/?url='; //代理Vue.use(Vuex)export default new Vuex.Store({ state: { answer:[] }, getters: { }, mutations: { getAnswer (state, playload) {//--------------重要  let say ={ //自定义消息组件所需参数   type:1,   css:'left',   txt:playload.content,   date:'',   headImg:playload.extra  }  state.answer.push(say)  console.log(playload) }, }, actions: { }})

//一如以往，不废话，直接代码<template> <div class="homeIm" id='homeIm'> //----------------------------------------------------重要-------------------自定义消息组件，下面会贴码 <home-news v-for="(item ,index) in answer" :key='index' :item='item' :data='item'></home-news> <div class="posFix bottom0 left0 flex justsa alic w100 bgf " style="min-height:.6rem;">  <img src="../assets/images/mike.png" class="mike pl10 pr10"/>  <van-field v-model="say" placeholder="请输入" class="flex1 border borRad" />  <van-button size="large " @click="send" type='info' class="button borRad ml10 mr10" :disabled ='say?false:true'>确定</van-button> </div>  </div></template><script>import Vue from "vue";import { Field ,Button } from "vant";import router from "../router.js";import axios from "axios";import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'const arr = [ Field ,Button];arr.map(e => { //动态生成组件 Vue.use(e);});export default { data() { return {   say:'小仙女，你好鸭' }; }, name: "homeIm", props: { msg: String }, created() { //this.getChatRecord() //获取聊天记录，要钱 this.$nextTick(() => {//------------------------重要-------有消息就滚动到底部-----------------------  let list = document.getElementById('homeIm')  document.documentElement.scrollTop = list.scrollHeight  //如不行，请尝试-> list.scrollTop = list.scrollHeight  }) }, computed:{ ...mapState({  answer:"answer", }), }, watch: { //------------------------重要-------有消息就滚动到底部----------------------- answer() {  this.$nextTick(() => {  let list = document.getElementById('homeIm')  document.documentElement.scrollTop = list.scrollHeight  //如不行，请尝试-> list.scrollTop = list.scrollHeight  }) } }, methods: { send() {  let that = this  let msg = new RongIMLib.TextMessage({ content: that.say, extra: 'https://img.52z.com/upload/news/image/20171120/20171120080335_21404.jpg' });  let conversationType = RongIMLib.ConversationType.PRIVATE; // 单聊, 其他会话选择相应的消息类型即可  let targetId = JSON.parse(localStorage.getItem('userInfo')).IMUser.assistantId; // 目标 Id  RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, {   onSuccess: function (message) {    // message 为发送的消息对象并且包含服务器返回的消息唯一 Id 和发送消息时间戳    console.log('Send successfully',message,message.content.content);    let say = {     type:1,     css:'right',     txt:message.content.content,     headImg:'https://img.52z.com/upload/news/image/20171120/20171120080335_21404.jpg'    }    that.answer.push(say)    that.say = ''   },   onError: function (errorCode, message) {    let info = '';    switch (errorCode) {     case RongIMLib.ErrorCode.TIMEOUT:      info = '超时';      break;     case RongIMLib.ErrorCode.UNKNOWN:      info = '未知错误';      break;     case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:      info = '在黑名单中，无法向对方发送消息';      break;     case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:      info = '不在讨论组中';      break;     case RongIMLib.ErrorCode.NOT_IN_GROUP:      info = '不在群组中';      break;     case RongIMLib.ErrorCode.NOT_IN_CHATROOM:      info = '不在聊天室中';      break;    }    console.log('发送失败: ' + info + errorCode);   }  }); }, getChatRecord(){  let conversationType = RongIMLib.ConversationType.PRIVATE; //单聊, 其他会话选择相应的消息类型即可  let targetId = '2'; // 想获取自己和谁的历史消息，targetId 赋值为对方的 Id  let timestrap = null; // 默认传 null，若从头开始获取历史消息，请赋值为 0, timestrap = 0;  let count = 20; // 每次获取的历史消息条数，范围 0-20 条，可以多次获取  RongIMLib.RongIMClient.getInstance().getHistoryMessages(conversationType, targetId, timestrap, count, {   onSuccess: function(list, hasMsg) {    // list => Message 数组。    // hasMsg => 是否还有历史消息可以获取。    console.log('历史纪录',list, hasMsg)   },   onError: function(error) {    console.log('GetHistoryMessages, errorcode:' + error);   }  }); } },};</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.mike{ width: .3rem;height: .3rem;}.border{border:1px solid #ccc;}.button{ width: .8rem;height: .46rem;}.homeIm{padding-bottom: .7rem;}</style>

<template> <div class="homeNews">  <!-- 1:文字，2：红包，3：文章 ,css:类型 -->  <div v-if="data.type == 1&&data.css == 'left'">   <div class="colora1 fz12 lh40 pt10">{{data.date}}</div>   <div class="flex pl20 pr20 borBox">   <img :src="data.headImg" class="head borRad">   <div class="frame borRad bgf lh24 fz16 tl color3 pl10 pr10 pt10 pb10 borBox w250 ml15 posRel">    {{data.txt}}   </div>   </div>  </div>  <router-link to="/homeRedBag" v-else-if="data.type == 2&&data.css == 'left'">   <div class="colora1 fz12 lh40 pt10">{{data.date}}</div>   <div class="flex pl20 pr20 borBox">   <img :src="data.headImg" class="head borRad">   <div class="frame borRad bgf9 lh24 fz16 tl colorF w200 ml15 posRel redFrame">    <div class="flex alic pl10 pr10 pt10 pb10 borBox">    <img src="../assets/images/redTabs.png" class="redTabs"/>    <span class="pl10">{{data.title}}</span>    </div>    <div class="fz12 color6 bgf pl15 borBox txt">{{data.txt}}</div>   </div>   </div>  </router-link>  <router-link to="/homeArticle" v-else-if="data.type == 3&&data.css == 'left'">   <div class="colora1 fz12 lh40 pt10">{{data.date}}</div>   <div class="flex pl20 pr20 borBox">   <img :src="data.headImg" class="head borRad">   <div class="frame borRad bgf fz16 tl color3 pl10 pr10 pt10 pb10 borBox w250 ml15 posRel">    <div class="fz20 txt2 mb10 lh30">{{data.title}}</div>    <div class="flex justsa alic">    <div class="colora1 txt2 flex1 lh20">{{data.txt}}</div>    <img :src="data.banner" class="banner"/>    </div>   </div>   </div>  </router-link>  <div v-if="data.type == 1&&data.css == 'right'">  <div class="colora1 fz12 lh40 pt10">{{data.date}}</div>  <div class="flex pl20 pr20 borBox juste">   <div class="frame-right borRad bgf lh24 fz16 tl color3 pl10 pr10 pt10 pb10 borBox w250 mr15 posRel">   {{data.txt}}   </div>   <img :src="data.headImg" class="head borRad">  </div>  </div> </div></template><script>import Vue from "vue";import router from "../router.js";export default { name: "homeNews", props:['data'], data() { return { }; }, created() { console.log() }, methods: { }};</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.head { width: 0.36rem; height: 0.36rem;}.frame::before { display: block; content: ''; width: 0px; /* 宽高设置为0，很重要，否则达不到效果 */ height: 0px; border: .10rem solid #fff; border-bottom-color: transparent; /* 设置透明背景色 */ border-top-color: transparent; border-left-color: transparent; position: absolute;left:-.2rem;top:.1rem;}.frame-right::before{ display: block; content: ''; width: 0px; /* 宽高设置为0，很重要，否则达不到效果 */ height: 0px; border: .10rem solid #fff; border-bottom-color: transparent; /* 设置透明背景色 */ border-top-color: transparent; border-right-color: transparent; position: absolute;right:-.2rem;top:.1rem;}.redFrame::before{ display: block; content: ''; width: 0px; /* 宽高设置为0，很重要，否则达不到效果 */ height: 0px; border: .10rem solid #F99F3E; border-bottom-color: transparent; /* 设置透明背景色 */ border-top-color: transparent; border-left-color: transparent; position: absolute;left:-.2rem;top:.1rem;}.redFrame-right::before{ display: block; content: ''; width: 0px; /* 宽高设置为0，很重要，否则达不到效果 */ height: 0px; border: .10rem solid #F99F3E; border-bottom-color: transparent; /* 设置透明背景色 */ border-top-color: transparent; border-left-color: transparent; position: absolute;right:-.2rem;top:.1rem;}.w250{max-width: 2.5rem;}.w200{max-width: 2rem;}.redTabs{ width: .32rem; height:.39rem;}.txt{ border-bottom-left-radius: .05rem; border-bottom-right-radius: .05rem;}.banner{width: .4rem;height: .4rem;}</style>style.css 我自己的样式表@charset "utf-8";/* CSS Document 刘白超修改于2019/3/10*/html,body{height: 100%;width: 100%;word-wrap:break-word;}*{margin: 0;padding: 0;}.tc{text-align: center}.tr{text-align: right}.tl{text-align: left}.vm{vertical-align: middle;}.vs{vertical-align: sub;}.fl{float: left;}.fr{float: right;}.fz24{font-size: .24rem;}.fz20{font-size: .2rem;}.fz18{font-size: .18rem;}.fz16{font-size: .16rem;}.fz14{font-size: .14rem;}.fz12{font-size: .12rem;}.fw{font-weight: 600;}.mr5{margin-right: .05rem}.mr10{margin-right: .10rem}.mr15{margin-right: .15rem}.mr20{margin-right: .20rem}.ml5{margin-left:.05rem;}.ml10{margin-left:.10rem;}.ml15{margin-left:.15rem;}.ml20{margin-left:.20rem;}.ml24{margin-left:.24rem;}.mt40{margin-top:.40rem;}.mt20{margin-top: .20rem;}.mt15{margin-top: .15rem;}.mt10{margin-top: .10rem;}.mt5{margin-top: .05rem;}.mb5{margin-bottom: .05rem;}.mb10{margin-bottom: .10rem;}.mb15{margin-bottom: .15rem;}.mb20{margin-bottom: .20rem;}.pt5{padding-top: .05rem;}.pt10{padding-top: .10rem;}.pt15{padding-top: .15rem;}.pt20{padding-top: .20rem;}.pt30{padding-top: .30rem;}.pb5{padding-bottom: .05rem;}.pb10{padding-bottom: .10rem;}.pb15{padding-bottom: .15rem;}.pb20{padding-bottom: .20rem;}.pl5{padding-left: .05rem;}.pl10{padding-left: .10rem;}.pl15{padding-left: .15rem;}.pl20{padding-left: .20rem;}.pl30{padding-left: .30rem;}.pr5{padding-right: .05rem;}.pr10{padding-right: .10rem;}.pr15{padding-right: .15rem;}.pr20{padding-right: .20rem;}.pr30{padding-right: .30rem;}.bgef{background: #EFEFEF;}.bgf{background: #fff;}.bgf9{background: #F99F3E}.ee {background: #eee;}.bg259{background:#259DFF !important}.colordd{color: #DD4D41}.colorf9 {color: #ff9800;}.colore5{color: #e51c23;}.colorF{color: #fff;}.color3{color: #333;}.color6{color: #666;}.color9{color: #999;}.colora1{color:#a1a1a1}.color259{color:#259DFF}.color005{color:#00559B}.colorf3{color:#F3665E}.lh24{line-height: .24rem}.lh20{line-height: .20rem;}.lh30{line-height: .30rem;}.lh40{line-height: .40rem;}.lh50{line-height: .50rem;}.lh60{line-height: .60rem;}.hide{display: none}.show{display: block}.inline{display: inline-block;}.indent2{text-indent: 2em;}.txt2{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}.wn{white-space:nowrap;}.flex{display: flex;}.flex1{flex:1;}.colu{flex-direction: column;}.justc{justify-content: center;}.justs{justify-content: space-between}/*两端对齐*/.justsa{justify-content: space-around}/*分散对齐*/.juste{justify-content: flex-end;}.alic{align-items: center}.wrap{flex-wrap:wrap}.childEnd{align-self:flex-end;}.posAbs{position: absolute;}.posRel{position: relative;}.posFix{position: fixed;}.top0{top:0;}.bottom0{bottom:0;}.left0{left:0;}.right0{right: 0;}.w100{width: 100%}.h100{height: 100%}.borBox{box-sizing: border-box;}.borderte0{border-top:1px solid #e0e0e0; }.borderbe0{border-bottom:1px solid #e0e0e0; }.borRad{border-radius:.05rem;}.over{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.overH{overflow: hidden}.clear{zoom:1;}.clear:after{content: "/0020";display: block;height: 0;clear: both;}.mask{width: 100%;height: 100%;background: rgba(20, 20, 20, 0.5);position: fixed;z-index: 5;top: 0;left: 0;}.cursor{cursor: pointer;}.noClick{pointer-events: none;}li{list-style:none;}a{text-decoration:none;color:#555;}a:hover{color:#555;}img{display:block;vertical-align:middle;}a img,fieldset{border:0;}i,em{font-style:normal}b,strong,th{font-weight:100;}input,textarea,select{outline:none;}textarea{resize:none;}table{border-collapse:collapse;}.btn{ width: calc(100% - .54rem); background: #259DFF; font: .2rem/.5rem ""; text-align: center; color: #fff; border-radius: 5px; margin-left: .27rem;}rem.js rem自适应单位//例如设计稿为375，最大宽度为750，则为(375,750)!function(e,t){function n(){var n=l.getBoundingClientRect().width;t=t||540,n>t&&(n=t);var i=100*n/e;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}(375,640);