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

<script src="/UploadFiles/2021-04-02/RongIMLib-2.3.5.min.js">



三、可以正常使用RongIMLib其自带方法了


app.vue 不是全代码（因为只是连接）




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);
   }
  });
 }
 },


main.js 代码




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.xxx
Vue.config.productionTip = false

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')


store.js 全代码




import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
const API_PROXY = 'https://bird.ioliu.cn/v1/"htmlcode">

//一如以往，不废话，直接代码
<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="/UploadFiles/2021-04-02/mike.png">

homeNews.vue 全代码


<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="/UploadFiles/2021-04-02/data.headImg">

完了，okk，文中所需icon，请自行到阿里icon下载


结尾：项目中需要配置rem。


总结
以上所述是小编给大家介绍的Vue Cli 3项目使用融云IM实现聊天功能的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

            
           
            上一篇：Bootstarp在pycharm中的安装及简单的使用方法

            下一篇：详解vue-cli+es6引入es5写的js(两种方法)