vue cli4接入環信webIM

1.安裝

npm install easemob-websdk --save

2.配置文件WebIMConfig.js

/*** 環信配置文件* Filename: webIMConfig.js* Author: * Time: */ let appKey = '' if (process.env.NODE_ENV === 'development') {appKey = '111111111111#ceshi'// 測試(放自己的appKey) } else {appKey = '222222222222222#comt'// 正式(放自己的appKey) }var config = {socketServer: '//im-api-v2.easemob.com/ws', // socket Server地址restServer: '//a1.easemob.com', // rest Server地址appkey: appKey, // appkeyhttps: true, // 是否使用httpsisAutoLogin: true, // 如果isAutoLogin設置為false，那么必須手動設置上線，否則無法收消息isHttpDNS: true, // 3.0 SDK支持，防止DNS劫持從服務端獲取XMPPUrl、restUrlisMultiLoginSessions: false, // 是否開啟多頁面同步收消息，注意，需要先聯系商務開通此功能isDebug: true, // 打開調試，會自動打印log，在控制臺的console中查看logautoReconnectNumMax: 0, // 斷線重連最大次數,如果autoReconnectNumMax=0，則不會自動連接。autoReconnectInterval: 2, // 每次重新連接之間的間隔秒數。僅當autoReconnectMaxNum>=2時有效delivery: false, // 是否發送已讀回執useOwnUploadFun: false // 是否使用自己的上傳方式（如將圖片文件等上傳到自己的服務器，構建消息時只傳url） } export default config

3.使用

使用組件中引入 import config from '@/utils/webIMConfig' import websdk from 'easemob-websdk' mounted() {this.getLiveInfo()},destroyed() {this.WebIMFun('close') // 根據自己的實際情況，關閉},methods: {getInfo() {getInfoApi({id: this.id}).then(res => {if (res.code === 200) {this.WebIMFun('open', res.data.huanxin_room_id, res.data.huanxin_username, res.data.huanxin_password)} else {this.$message.warning(res.msg)}})},WebIMFun(type, huanxin_room_id, huanxin_username, huanxin_password) {// 初始化IM SDKconst _this = thisvar WebIM = {}WebIM = window.WebIM = websdkWebIM.config = configWebIM.conn = new WebIM.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,autoReconnectNumMax: WebIM.config.autoReconnectNumMax,autoReconnectInterval: WebIM.config.autoReconnectInterval,delivery: WebIM.config.delivery,useOwnUploadFun: WebIM.config.useOwnUploadFun})if (type == 'close') {WebIM.conn.close()return false}// 鏈接環信WebIM.conn.open({user: huanxin_username,pwd: huanxin_password,appKey: WebIM.config.appkey})WebIM.conn.listen({onOpened: function() {console.log('成功登錄_用戶名:' + huanxin_username)console.log('成功登錄_密碼:' + huanxin_password)console.log('成功登錄_聊天室ID:' + huanxin_room_id)// WebIM.conn.setPresence()WebIM.conn.joinChatRoom({roomId: huanxin_room_id // 聊天室Id}).then(() => {console.log('加入聊天室成功')})},onClosed: function() {// 處理登出事件console.log('退出成功')},onPresence: function(message) {console.log(message)},onTextMessage: function(message) { // 接收消息//獲取到信息做處理//寫自己的邏輯},onError: function(e) {// 異常捕獲console.log('error:' + JSON.stringify(e))}})},}

總結

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

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