vue引入集成環信Web IM有2種方式
官方鏈接
1、NPM
2、引用本地文件

這里采用第一種：
1.1、通過 NPM 安裝 Web SDK。

npm install easemob-websdk --save

1.2、在main.js頁面，先 import ，再訪問 Web IM 。

import websdk from "easemob-websdk"

1.3、在項目main.js內配置

const config = {xmppURL: '//im-api.easemob.com', // xmpp Server地址，對于在console.easemob.com創建的appKey，固定為該值apiURL: 'http://a1.easemob.com', // rest Server地址，對于在console.easemob.com創建的appkey，固定為該值appkey: '申請的key', // App keyhttps: false, // 是否使用httpsisHttpDNS: true, // 防止DNS劫持從服務端獲取XMPPUrl、restUrlisMultiLoginSessions: false, // 是否開啟多頁面同步收消息，注意，需要先聯系商務開通此功能isDebug: false, // 打開調試，會自動打印log，在控制臺的console中查看logautoReconnectNumMax: 2, // 斷線重連最大次數autoReconnectInterval: 3, // 斷線重連每次嘗試連接的間隔heartBeatWait: 30000, // 使用webrtc（視頻聊天）時發送心跳包的時間間隔，單位msdelivery: true, // 是否發送已讀回執 }

1.4、在項目main.js內初始化

var conn = {}; WebIM.config = config; conn = WebIM.conn = new WebIM.default.connection({appKey: WebIM.config.appkey,isHttpDNS: WebIM.config.isHttpDNS,isMultiLoginSessions: WebIM.config.isMultiLoginSessions,https: WebIM.config.https,url: WebIM.config.socketServer,apiUrl: WebIM.config.restServer,isAutoLogin: WebIM.config.isAutoLogin,heartBeatWait: WebIM.config.heartBeatWait,autoReconnectNumMax: WebIM.config.autoReconnectNumMax,autoReconnectInterval: WebIM.config.autoReconnectInterval,delivery: WebIM.config.delivery,useOwnUploadFun: WebIM.config.useOwnUploadFun }) // WebIM.config 為之前集成里介紹的WebIMConfig.js

1.5、在項目main.js添加回調函數(具體可以看著來不用全加)

conn.listen({onOpened: function ( message ) {}, //連接成功回調 onClosed: function ( message ) {}, //連接關閉回調onTextMessage: function ( message ) {}, //收到文本消息onEmojiMessage: function ( message ) {}, //收到表情消息onPictureMessage: function ( message ) {}, //收到圖片消息onCmdMessage: function ( message ) {}, //收到命令消息onAudioMessage: function ( message ) {}, //收到音頻消息onLocationMessage: function ( message ) {},//收到位置消息onFileMessage: function ( message ) {}, //收到文件消息onVideoMessage: function (message) {var node = document.getElementById('privateVideo');var option = {url: message.url,headers: {'Accept': 'audio/mp4'},onFileDownloadComplete: function (response) {var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);node.src = objectURL;},onFileDownloadError: function () {console.log('File down load error.')}};WebIM.utils.download.call(conn, option);}, //收到視頻消息onPresence: function ( message ) {}, //處理“廣播”或“發布-訂閱”消息，如聯系人訂閱請求、處理群組、聊天室被踢解散等消息onRoster: function ( message ) {}, //處理好友申請onInviteMessage: function ( message ) {}, //處理群組邀請onOnline: function () {}, //本機網絡連接成功onOffline: function () {}, //本機網絡掉線onError: function ( message ) {}, //失敗回調onBlacklistUpdate: function (list) { //黑名單變動// 查詢黑名單，將好友拉黑，將好友從黑名單移除都會回調這個函數，list則是黑名單現有的所有好友信息console.log(list);},onRecallMessage: function(message){}, //收到撤回消息回調onReceivedMessage: function(message){}, //收到消息送達服務器回執onDeliveredMessage: function(message){}, //收到消息送達客戶端回執onReadMessage: function(message){}, //收到消息已讀回執onCreateGroup: function(message){}, //創建群組成功回執（需調用createGroupNew）onMutedMessage: function(message){} //如果用戶在A群組被禁言，在A群發消息會走這個回調并且消息不會傳遞給群其它成員 });

1.6、創建用戶
在環信后臺直接創建（這里為了方便查看有沒有集成成功就直接在后臺創建了，沒調接口）

1.7、登錄，在項目main.js頁面創建

var options = { apiUrl: WebIM.config.apiURL,user: '',pwd: '',appKey: WebIM.config.appkey,success: function (res) {console.log(res)console.log('成功')},error: function (err) {console.log(err)} };

1.8、添加到原型其他頁面方便調用

Vue.prototype.$conn = conn; Vue.prototype.$login = options; //登錄

1.9、其他頁面調用

mounted () { // 頁面加載完調用this.$login.user = '1368065363'this.$login.pwd = '123456'this.$conn.open(this.$login)this.$conn.listen({onOpened: function ( message ) { //連接成功回調 console.log('登錄成功')},onTextMessage: function (message) { //收到文本消息console.log(message)}})},

以下是其他相關文章：
vue集成環信 web im視頻通話
vue 集成環信 web im 加 一對一視頻通話

總結

以上是生活随笔為你收集整理的vue集成环信Web IM的全部內容，希望文章能夠幫你解決所遇到的問題。

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