最近做項(xiàng)目時(shí)有需求去實(shí)現(xiàn)實(shí)時(shí)通訊，要求可以文字聊天、表情聊天、圖片聊天、語音聊天。接下來我會(huì)先說該如何在vue項(xiàng)目中去配置webIM的環(huán)境以及集成webIM的方法。

1. 第一步是npm install 依賴包

npm install easemob-websdk npm install strophe.js

2. 修改原生代碼文件

• 找到node_modules/easemob-websdk/src/connection.js 在16行加入

var Strophe = require('strophe.js').Strophe; var meStrophe = require('strophe.js'); $iq = meStrophe.$iq; $build = meStrophe.$build; $msg = meStrophe.$msg; $pres = meStrophe.$pres;

• 找業(yè)務(wù)人員或項(xiàng)目經(jīng)理要環(huán)信ID,并依舊在connection.js大概740行中加入

var config = {xmppURL: 'im-api.easemob.com',apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',appkey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx', //去環(huán)信自己申請(qǐng)一個(gè)appkey就行https: false,isMultiLoginSessions: true,isAutoLogin: true,isWindowSDK: false,isSandBox: false,isDebug: false,autoReconnectNumMax: 2,autoReconnectInterval: 2,isWebRTC: (/Firefox/.test(navigator.userAgent) || /WebKit/.test(navigator.userAgent)) && /^https\:$/.test(window.location.protocol),heartBeatWait: 4500,isHttpDNS: false,msgStatus: true,delivery: true,read: true,saveLocal: false,encrypt: {type: 'none'} }

• 在connection.js中大概4110行中掛載剛才的config配置對(duì)象

WebIM.config = config;

• 找到node_modules/strophe.js/dist/strophe.js 在2892行左右加入以下代碼

setJid: function (jid) {this.jid = jid;this.authzid = Strophe.getBareJidFromJid(this.jid);this.authcid = Strophe.getNodeFromJid(this.jid);},getJid: function () {return this.jid;},

以上配置就完成了。

3. 在環(huán)信控制臺(tái)新建一個(gè)IM用戶，方便在控制臺(tái)模擬發(fā)送rest信息，此時(shí)你要記住測試用戶的ID

4. 在main.js中引入配置

import websdk from 'easemob-websdk' let WebIM = window.WebIM = websdk Vue.prototype.$WebIM = WebIM// 這里是建立連接，要聊天之前肯定需要進(jìn)行協(xié)議之間的連接，成功之后才可聊天 var conn = new WebIM.connection({isMultiLoginSessions: WebIM.config.isMultiLoginSessions,https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',url: WebIM.config.xmppURL,heartBeatWait: WebIM.config.heartBeatWait,autoReconnectNumMax: WebIM.config.autoReconnectNumMax,autoReconnectInterval: WebIM.config.autoReconnectInterval,apiUrl: WebIM.config.apiURL,isAutoLogin: true });// 登錄配置項(xiàng)（這里后續(xù)的賬號(hào)密碼是后端提供的，所以是需要對(duì)接后端接口的，我后面會(huì)將這里的配置遷移到聊天頁面） const options = {apiUrl: WebIM.config.apiURL,user: 'xxxxxxxx', //換成剛才自己添加的IM用戶的賬號(hào)和密碼pwd: 'xxxxxxxx',appKey: WebIM.config.appkey,success:function (re) {console.log('登陸成功')},error:function (err) {console.log(err)} } // 分別將連接對(duì)象和登錄配置對(duì)象掛載到vue實(shí)例上，方便頁面的調(diào)用 Vue.prototype.$imconn = conn Vue.prototype.$imoption = options

到這里main.js的配置也算成功了，如何判斷是否成功，如果連接成功會(huì)在控制臺(tái)中打印登陸成功的。如：

5. 接下來就可以在組件中使用了，先說最基礎(chǔ)的發(fā)送文本把（需要看方法的得自己去看WebIM的文檔）

data() {return {// 在data中聲明這兩個(gè)vue實(shí)例掛載的對(duì)象，并在created中賦值$imconn: {},$imoption: {},// 每次發(fā)送信息或收到信息后都會(huì)吧數(shù)據(jù)push到這一個(gè)聊天數(shù)組中chatContent: [],// 發(fā)送的消息內(nèi)容content: ''} },created() {this.$imconn = this.$imconn;this.$imoption = this.$imoption;// 調(diào)用登錄方法this.loginWebIM()},methods: {loginWebIM() {// open方法，傳入掛載在vue實(shí)例上的配置對(duì)象this.$imconn.open(this.$imoption);let _this = this;this.$imconn.listen({onOpened: function (message) {console.log('用戶已上線') // 控制臺(tái)打印出這句證明連接成功啦},})// 集成收到文本信息方法onTextMessage: function ( message ) {console.log('收到文本信息')console.log(message)let date = +new Date()let value = {}// 普通文本信息value = {type: 'text', // 加上標(biāo)識(shí)，后續(xù)還有語音、圖片、表情等類型，加上標(biāo)識(shí)好用于dom元素的判斷并修改樣式avatar: require('@/assets/defult-avatar.jpg'),content: message.data,to: message.to,from: message.from,time: date}}_this.chatContent.push(value) // 添加到聊天信息數(shù)組中}},// 發(fā)送文本信息sendMsg() {let _this = this;// 生成本地消息idvar id = this.$imconn.getUniqueId()var msg = new WebIM.message('txt', id)var time = +new Date()// 設(shè)置bodymsg.set({msg: _this.content, // 發(fā)送的消息內(nèi)容（content是與input輸入框雙向綁定的變量）to: 'admin', // 接收消息對(duì)象，這里可以先寫死是admin，代表發(fā)給控制臺(tái)roomType: false,// ext表示拓展對(duì)象，這個(gè)會(huì)隨著你發(fā)送而發(fā)送過去，你接收時(shí)同樣可以拿到這個(gè)數(shù)據(jù)ext: {time},success: function (id, serverMsgId) {console.log(msg) // 自己去打印出來看看是啥//把發(fā)送者的頭像和文本數(shù)據(jù)push到數(shù)組中在頁面上展示let value = {type: 'text',avatar: require('../../assets/defult-avatar.jpg'),content: msg.value,to: 'admin', // 先寫死adminfrom: 'cwlojako', // 這里寫上你控制臺(tái)創(chuàng)建的測試IM用戶ID(我這里是cwlojako,見上圖)time: msg.body.ext.time // 獲取發(fā)送時(shí)間}_this.chatContent.push(value);},fail: function(e){console.log("消息發(fā)送失敗");}});msg.body.chatType = 'singleChat';this.$imconn.send(msg.body);// 發(fā)送后將輸入框清空this.content = ''} }

致此 發(fā)送文本信息到此成功結(jié)束。時(shí)間有限，后續(xù)會(huì)更新配置表情，發(fā)送表情等。如果要看看具體效果的小伙伴想要源碼私信我。總體效果：

總結(jié)

以上是生活随笔為你收集整理的vue h5项目集成环信webIM超详细步骤，附代码注释讲解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。