小程序开发入门教程_Vue Cli 3项目使用融云IM完成谈天功用的方法

  • 栏目:行业动态 时间:2021-01-07 14:30 分享新闻到:
<返回列表

Vue Cli 3项目使用融云IM实现聊天功能的方法       这篇文章主要介绍了Vue Cli 3项目 使用融云IM实现聊天功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

介绍:前台使用vue开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能。

效果如图(PC+移动):

一、申请融云账号(token、appKey)

建议先看教程:sdk使用介绍

过一遍教程,接下来开始写

二、引入融云IM

如图:

位置:,引入

 script src="RongIMLib-2.3.5.min.js" /script 

三、可以正常使用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, {
 ess: function(userId) {
 console.log('essfully. ' + userId);
 onTokenIncorrect: function() {
 console.log('token 无效');
 onError: function(errorCode){
  = '';
 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;
 );
 },

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' //自定义组件 ------重要
ponent('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 = '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: {
})

homeIm.vue

//一如以往,不废话,直接代码
 template 
 div id='homeIm' 
 //----------------------------------------------------重要-------------------自定义消息组件,下面会贴码
 home-news v-for="(item ,index) in answer" :key='index' :item='item' :data='item' /home-news 
 div 
 img src="../assets/images/mike.png" / 
 van-field v-model="say" placeholder="请输入" / 
 van-button size="large " @click="send" type='info' :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'

//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: 'upload/news/image//205_21404.jpg' }); let conversationType = RongIMLib.ConversationType.PRIVATE; // 单聊, 其他会话选择相应的消息类型即可 let targetId = JSON.parse(localStorage.getItem('userInfo')).IMUser.assistantId; // 目标 Id RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, { ess: function (message) { // message 为发送的消息对象并且包含服务器返回的消息唯一 Id 和发送消息时间戳 console.log('essfully',message,message.content.content); let say = { type:1, css:'right', txt:message.content.content, headImg:'upload/news/image//205_21404.jpg' that.answer.push(say) that.say = '' onError: function (errorCode, message) { = ''; 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, { ess: 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 ponent only -- style scoped .mike{ width: .3rem;height: .3rem; .border{border:1px solid #ccc;} .button{ width: .8rem;height: .46rem; .homeIm{padding-bottom: .7rem;} /style

homeNews.vue 全代码

 template 
 div 
 !-- 1:文字,2:红包,3:文章 ,css:类型 -- 
 div v-if="data.type == 1 data.css == 'left'" 
 div {{data.date}} /div 
 div 
 img :src="data.headImg" 
 div 
 {{data.txt}}
 /div 
 /div 
 /div 
 router-link to="/homeRedBag" v-else-if="data.type == 2 data.css == 'left'" 
 div {{data.date}} /div 
 div 
 img :src="data.headImg" 
 div 
 div 
 img src="../assets/images/redTabs.png" / 
 span {{data.title}} /span 
 /div 
 div {{data.txt}} /div 
 /div 
 /div 
 /router-link 
 router-link to="/homeArticle" v-else-if="data.type == 3 data.css == 'left'" 
 div {{data.date}} /div 
 div 
 img :src="data.headImg" 
 div 
 div {{data.title}} /div 
 div 
 div {{data.txt}} /div 
 img :src="data.banner" / 
 /div 
 /div 
 /div 
 /router-link 
 div v-if="data.type == 1 data.css == 'right'" 
 div {{data.date}} /div 
 div 
 div 
 {{data.txt}}
 /div 
 img :src="data.headImg" 
 /div 
 /div 
 /div 
 /template 
 script 
import Vue from "vue";
import router from "../router.js";
export default {
 name: "homeNews",
 pro凡科抠图:['data'],
 data() {
 return {
 created() {
 console.log()
 methods: {
 /script 
 !-- Add "scoped" attribute to limit CSS ponent 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: elli凡科抠图is;
 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:elli凡科抠图is;}
.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-colla凡科抠图e:colla凡科抠图e;}
.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);

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

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

总结

以上所述是小编给大家介绍的Vue Cli 3项目使用融云IM实现聊天功能的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


分享新闻到:

更多阅读

小程序开发入门教程_Vue Cli 3项目使用融云

行业动态 2021-01-07
Vue Cli 3新项目应用融云IM完成闲聊作用的方式 本文关键详细介绍了Vue Cli 3新项目 应用融...
查看全文

广州凡科互联网科技股份有限公司招聘阿

行业动态 2021-01-07
招聘人数:16职位信息一、岗位职责:1、作为阿里巴巴国际事业部在广东广州市花都区、白云...
查看全文

广州凡科互联网科技股份有限公司招聘电

行业动态 2021-01-07
招聘人数:19职位信息1、负责阿里巴巴诚信通产品的整合营销;2、负责公司新客户及服务新老...
查看全文
返回全部新闻


区域站点: 南丰县建站培训   南宫市建站程序   囊谦县凡科建站   南和县企业建站   南华县建站培训   南江县建站程序   南京市凡科建站   南靖县企业建站   南康市建站培训   南乐县建站程序   南陵县凡科建站   南宁市企业建站   南平市建站培训   南皮县建站程序   南市区凡科建站   南通市企业建站   南投县建站培训   南雄市建站程序   南溪县凡科建站   南阳市企业建站   南漳县建站培训   南召县建站程序   南郑县凡科建站   那坡县企业建站   那曲县建站培训   纳雍县建站程序   讷河市凡科建站   内黄县企业建站   内江市建站培训   内丘县建站程序   内乡县凡科建站   嫩江市企业建站   聂荣县建站培训   尼玛县建站程序   尼木县凡科建站   宁安市企业建站   宁波市建站培训   宁城县建站程序   宁德市凡科建站   宁都县企业建站   宁国市建站培训   宁海县建站程序   宁化县凡科建站   宁晋县企业建站   宁陵县建站培训   宁明县建站程序   宁南县凡科建站   宁强县企业建站   宁陕县建站培训   宁武县建站程序   宁乡市凡科建站   宁阳县企业建站   宁远县建站培训   农安县建站程序   磐安县凡科建站   盘锦市企业建站   盘山县建站培训   磐石市建站程序   盘州市凡科建站   蓬安县企业建站   澎湖县建站培训   蓬莱市建站程序   彭山县凡科建站   蓬溪县企业建站   彭阳县建站培训   彭泽县建站程序   彭州市凡科建站   偏关县企业建站   平安县建站培训   平昌县建站程序   平定县凡科建站   屏东县企业建站   平度市建站培训   平果县建站程序   平和县凡科建站   平湖市企业建站   平江县建站培训   平乐县建站程序   平凉市凡科建站   平利县企业建站   平罗县建站培训   平陆县建站程序   屏南县凡科建站   平泉市企业建站   屏山县建站培训   平顺县建站程序   平塘县凡科建站   平潭县企业建站   平武县建站培训   萍乡市建站程序   平乡县凡科建站   平阳县企业建站   平遥县建站培训   平阴县建站程序   平邑县凡科建站   平远县企业建站   平舆县建站培训   皮山县建站程序   普安县凡科建站   浦北县企业建站   浦城县建站培训   普洱市建站程序   普格县凡科建站   浦江县企业建站   普兰县建站培训   普宁市建站程序   莆田市凡科建站   迁安市企业建站   乾安县建站培训   潜江市建站程序   潜山市凡科建站  

友情链接: 医慧互通 创建网站教程 巴渝烤哥 美国免费建站平台 免费网页建站 免费自助建站

Copyright © 2002-2020 凡科建站_企业建站_建站培训_建站程序_自建网站 版权所有 (网站地图) 备案号:粤ICP备10235580号