最近做項目時有需求去實現實時通訊，要求可以文字聊天、表情聊天、圖片聊天、語音聊天。接下來我會先說該如何在vue項目中去配置webIM的環境以及集成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;

• 找業務人員或項目經理要環信ID,并依舊在connection.js大概740行中加入

var config = {xmppURL: 'im-api.easemob.com',apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',appkey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx', //去環信自己申請一個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配置對象

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. 在環信控制臺新建一個IM用戶，方便在控制臺模擬發送rest信息，此時你要記住測試用戶的ID

4. 在main.js中引入配置

import websdk from 'easemob-websdk' let WebIM = window.WebIM = websdk Vue.prototype.$WebIM = WebIM// 這里是建立連接，要聊天之前肯定需要進行協議之間的連接，成功之后才可聊天 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 });// 登錄配置項（這里后續的賬號密碼是后端提供的，所以是需要對接后端接口的，我后面會將這里的配置遷移到聊天頁面） const options = {apiUrl: WebIM.config.apiURL,user: 'xxxxxxxx', //換成剛才自己添加的IM用戶的賬號和密碼pwd: 'xxxxxxxx',appKey: WebIM.config.appkey,success:function (re) {console.log('登陸成功')},error:function (err) {console.log(err)} } // 分別將連接對象和登錄配置對象掛載到vue實例上，方便頁面的調用 Vue.prototype.$imconn = conn Vue.prototype.$imoption = options

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

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

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

致此 發送文本信息到此成功結束。時間有限，后續會更新配置表情，發送表情等。如果要看看具體效果的小伙伴想要源碼私信我。總體效果：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。