Vue 集成环信 全局封装环信WebSDK 可直接使用
Posted fang-li
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 集成环信 全局封装环信WebSDK 可直接使用相关的知识，希望对你有一定的参考价值。
Step1、安装 easemob-websdk
npm install --save easemob-websdkStep2、安装 strophe.js underscore crypto-js
npm install --save strophe.js underscore crypto-jsStep3、使用 新建一个webim.js
import store from ‘@/store‘ window.Strophe = require(‘strophe.js‘).Strophe // 务必在前面引入 let WebIM = require(‘easemob-websdk‘) WebIM.config = /* * XMPP server */ xmppURL: ‘im-api.easemob.com‘, /* * Backend REST API URL */ apiURL: (location.protocol === ‘https:‘ ? ‘https:‘ : ‘http:‘) + ‘//a1.easemob.com‘, /* * Application AppKey */ appkey: ‘你公司的环信AppKey‘, /* * Whether to use wss * @parameter Boolean true or false */ https: false, /* * isMultiLoginSessions * true: A visitor can sign in to multiple webpages and receive messages at all the webpages. * false: A visitor can sign in to only one webpage and receive messages at the webpage. */ isMultiLoginSessions: false, /* * set presence after login */ isAutoLogin: true, /** * Whether to use window.doQuery() * @parameter Boolean true or false */ isWindowSDK: false, /** * isSandBox=true: xmppURL: ‘im-api-sandbox.easemob.com‘, apiURL: ‘//a1-sdb.easemob.com‘, * isSandBox=false: xmppURL: ‘im-api.easemob.com‘, apiURL: ‘//a1.easemob.com‘, * @parameter Boolean true or false */ isSandBox: false, /** * Whether to console.log in strophe.log() * @parameter Boolean true or false */ isDebug: true, /** * will auto connect the xmpp server autoReconnectNumMax times in background when client is offline. * won‘t auto connect if autoReconnectNumMax=0. */ autoReconnectNumMax: 2, /** * the interval seconds between each auto reconnectting. * works only if autoReconnectMaxNum >= 2. */ autoReconnectInterval: 2, /** * webrtc supports WebKit and https only */ isWebRTC: (/Firefox/.test(navigator.userAgent) || /WebKit/.test(navigator.userAgent)) && /^https:$/.test(window.location.protocol), /** * after login, send empty message to xmpp server like heartBeat every 45s, to keep the ws connection alive. */ heartBeatWait: 4500, /** * while http access,use ip directly,instead of ServerName,avoiding DNS problem. */ isHttpDNS: false, /** * Will show the status of messages in single chat * msgStatus: true show * msgStatus: true hide */ msgStatus: true, /** * When a message arrived, the receiver send an ack message to the * sender, in order to tell the sender the message has delivered. * See call back function onReceivedMessage */ delivery: true, /** * When a message read, the receiver send an ack message to the * sender, in order to tell the sender the message has been read. * See call back function onReadMessage */ read: false, /** * Will encrypt text message and emoji message * type:‘none‘ no encrypt * type:‘base64‘ encrypt with base64 * type:‘aes‘,mode: ‘ebc‘,key: ‘123456789easemob‘,iv: ‘0000000000000000‘ encrypt with aes(ebc) * type:‘aes‘,mode: ‘cbc‘,key: ‘123456789easemob‘,iv: ‘0000000000000000‘ encrypt with aes(cbc) */ encrypt: type: ‘none‘ WebIM.Emoji = path: ‘images/faces/‘, map: ‘[):]‘: ‘ee_1.png‘, ‘[:D]‘: ‘ee_2.png‘, ‘[;)]‘: ‘ee_3.png‘, ‘[:-o]‘: ‘ee_4.png‘, ‘[:p]‘: ‘ee_5.png‘, ‘[(H)]‘: ‘ee_6.png‘, ‘[:@]‘: ‘ee_7.png‘, ‘[:s]‘: ‘ee_8.png‘, ‘[:$]‘: ‘ee_9.png‘, ‘[:(]‘: ‘ee_10.png‘, ‘[:\‘(]‘: ‘ee_11.png‘, ‘[:|]‘: ‘ee_12.png‘, ‘[(a)]‘: ‘ee_13.png‘, ‘[8o|]‘: ‘ee_14.png‘, ‘[|]‘: ‘ee_15.png‘, ‘[+o(]‘: ‘ee_16.png‘, ‘[<o)]‘: ‘ee_17.png‘, ‘[|-)]‘: ‘ee_18.png‘, ‘[*-)]‘: ‘ee_19.png‘, ‘[:-#]‘: ‘ee_20.png‘, ‘[:-*]‘: ‘ee_21.png‘, ‘[^o)]‘: ‘ee_22.png‘, ‘[8-)]‘: ‘ee_23.png‘, ‘[(|)]‘: ‘ee_24.png‘, ‘[(u)]‘: ‘ee_25.png‘, ‘[(S)]‘: ‘ee_26.png‘, ‘[(*)]‘: ‘ee_27.png‘, ‘[(#)]‘: ‘ee_28.png‘, ‘[(R)]‘: ‘ee_29.png‘, ‘[()]‘: ‘ee_30.png‘, ‘[()]‘: ‘ee_31.png‘, ‘[(k)]‘: ‘ee_32.png‘, ‘[(F)]‘: ‘ee_33.png‘, ‘[(W)]‘: ‘ee_34.png‘, ‘[(D)]‘: ‘ee_35.png‘ WebIM.NewEmoji = map: [‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘??‘, ‘??♂?‘, ‘??♀?‘, ‘??Det‘, ‘???♂?‘, ‘???♀?‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??????‘, ‘??????‘, ‘????????‘, ‘????????‘, ‘????????‘, ‘??????‘, ‘??????‘, ‘????????‘, ‘????????‘, ‘????????‘, ‘??????‘, ‘??????‘, ‘????????‘, ‘????????‘, ‘????????‘, ‘????‘, ‘??????‘, ‘????‘, ‘??????‘, ‘??????‘, ‘????‘, ‘??????‘, ‘????‘, ‘??????‘, ‘??????‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘??‘] /* eslint new-cap: ["error", "newIsCap": false ] */ const 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 ) conn.listen( // 连接成功回调 onOpened: function (message) conn.getRoster( success: function (roster) let rosData = [] for (var i = 0, l = roster.length; i < l; i++) if (roster[i].subscription === ‘both‘) rosData.push(roster[i]) console.log(rosData) // store.dispatch(‘getFriendsData‘, rosData) else return ) , // 收到文本消息 onTextMessage: function (message) , // 收到表情信息 onEmojiMessage: function (message) , // 收到联系人订阅请求、处理群组、聊天室被踢解散等消息 onPresence: function (message) , // 处理好友申请 onRoster: function () conn.getRoster( success: function (roster) let rosData = [] for (var i = 0, l = roster.length; i < l; i++) if (roster[i].subscription === ‘both‘) rosData.push(roster[i]) console.log(‘处理好友申请‘) console.log(rosData) // store.dispatch(‘getFriendsData‘, rosData) else return ) , onAudioMessage: function (message) console.log(‘当前关闭‘) , // 收到音频消息 onLocationMessage: function (message) console.log(‘当前关闭‘) , // 收到位置消息 onFileMessage: function (message) console.log(‘当前关闭‘) , // 收到文件消息 onVideoMessage: function (message) console.log(‘当前关闭‘) , // 收到视频消息 onInviteMessage: function (message) console.log(‘当前关闭‘) , // 处理群组邀请 onOnline: function () console.log(‘当前关闭‘) , // 本机网络连接成功 onOffline: function () console.log(‘当前关闭‘) , // 本机网络掉线 // 失败回调 onError: function (message) console.log(message) ) export default install: function (Vue, options) // console.log(WebIM) Object.defineProperty(Vue.prototype, ‘$imConn‘, value: conn )Step4、如果需要视频聊天 安装 hx-webrtc
npm install --save hx-webrtc // 代码部分 WebIM.WebRTC = require(‘hx-webrtc‘) // 集成 const rtcCall = new WebIM.WebRTC.Call( connection: conn, mediaStreamConstaints: audio: true, video: true , listener: onAcceptCall: function (from, options) // console.log(‘onAcceptCall::‘, ‘from: ‘, from, ‘options: ‘, options); , onGotRemoteStream: function (stream, streamType) // console.log(‘onGotRemoteStream::‘, ‘stream: ‘, stream, ‘streamType: ‘, streamType); , onGotLocalStream: function (stream, streamType) // console.log(‘onGotLocalStream::‘, ‘stream:‘, stream, ‘streamType: ‘, streamType); , onRinging: function (caller) let reg = /(?<=_).*([email protected])/ let callerId = (reg.exec(caller))[0] let curUser = [] let friends = store.state.data.friends for (let i in friends) if (friends[i].username === callerId) curUser = friends[i] console.log(curUser) // router.push( path: ‘/calling‘, query: user: curUser, curBtn: true ) , onTermCall: function (reason) console.log(‘onTermCall::‘) console.log(‘reason:‘, reason) , onIceConnectionStateChange: function (iceState) if (iceState === ‘closed‘) // router.push( path: ‘/friends‘ ) , onError: function (e) console.log(e) ) Object.defineProperty(Vue.prototype, ‘$rtcCall‘, value: rtcCall )Step5、最终代码
import store from ‘@/store‘ window.Strophe = require(‘strophe.js‘).Strophe let WebIM = require(‘easemob-websdk‘) // require(‘hx-emedia‘) WebIM.WebRTC = require(‘hx-webrtc‘) WebIM.config = /* * XMPP server */ xmppURL: ‘im-api.easemob.com‘, /* * Backend REST API URL */ apiURL: (location.protocol === ‘https:‘ ? ‘https:‘ : ‘http:‘) + ‘//a1.easemob.com‘, /* * Application AppKey */ appkey: ‘你们公司的环信AppKey‘, /* * Whether to use wss * @parameter Boolean true or false */ https: false, /* * isMultiLoginSessions * true: A visitor can sign in to multiple webpages and receive messages at all the webpages. * false: A visitor can sign in to only one webpage and receive messages at the webpage. */ isMultiLoginSessions: false, /* * set presence after login */ isAutoLogin: true, /** * Whether to use window.doQuery() * @parameter Boolean true or false */ isWindowSDK: false, /** * isSandBox=true: xmppURL: ‘im-api-sandbox.easemob.com‘, apiURL: ‘//a1-sdb.easemob.com‘, * isSandBox=false: xmppURL: ‘im-api.easemob.com‘, apiURL: ‘//a1.easemob.com‘, * @parameter Boolean true or false */ isSandBox: false, /** * Whether to console.log in strophe.log() * @parameter Boolean true or false */ isDebug: true, /** * will auto connect the xmpp server autoReconnectNumMax times in background when client is offline. * won‘t auto connect if autoReconnectNumMax=0. */ autoReconnectNumMax: 2, /** * the interval seconds between each auto reconnectting. * works only if autoReconnectMaxNum >= 2. */ autoReconnectInterval: 2, /** * webrtc supports WebKit and https only */ isWebRTC: (/Firefox/.test(navigator.userAgent) || /WebKit/.test(navigator.userAgent)) && /^https:$/.test(window.location.protocol), /** * after login, send empty message to xmpp server like heartBeat every 45s, to keep the ws connection alive. */ heartBeatWait: 4500, /** * while http access,use ip directly,instead of ServerName,avoiding DNS problem. */ isHttpDNS: false, /** * Will show the status of messages in single chat * msgStatus: true show * msgStatus: true hide */ msgStatus: true, /** * When a message arrived, the receiver send an ack message to the * sender, in order to tell the sender the message has delivered. * See call back function onReceivedMessage */ delivery: true, /** * When a message read, the receiver send an ack message to the * sender, in order to tell the sender the message has been read. * See call back function onReadMessage */ read: false, /** * Will encrypt text message and emoji message * type:‘none‘ no encrypt * type:‘base64‘ encrypt with base64 * type:‘aes‘,mode: ‘ebc‘,key: ‘123456789easemob‘,iv: ‘0000000000000000‘ encrypt with aes(ebc) * type:‘aes‘,mode: ‘cbc‘,key: ‘123456789easemob‘,iv: ‘0000000000000000‘ encrypt with aes(cbc) */ encrypt: type: ‘none‘ WebIM.Emoji = path: ‘images/faces/‘, map: ‘[):]‘: ‘ee_1.png‘, ‘[:D]‘: ‘ee_2.png‘, ‘[;)]‘: ‘ee_3.png‘, ‘[:-o]‘: ‘ee_4.png‘, ‘[:p]‘: ‘ee_5.png‘, ‘[(H)]‘: ‘ee_6.png‘, ‘[:@]‘: ‘ee_7.png‘, ‘[:s]‘: ‘ee_8.png‘, ‘[:$]‘: ‘ee_9.png‘, ‘[:(]‘: ‘ee_10.png‘, ‘[:\‘(]‘: ‘ee_11.png‘, ‘[:|]‘: ‘ee_12.png‘, ‘[(a)]‘: ‘ee_13.png‘, ‘[8o|]‘: ‘ee_14.png‘, ‘[|]‘: ‘ee_15.png‘, ‘[+o(]‘: ‘ee_16.png‘, ‘[<o)]‘: ‘ee_17.png‘, ‘[|-)]‘: ‘ee_18.png‘, ‘[*-)]‘: ‘ee_19.png‘, ‘[:-#]‘: ‘ee_20.png‘, ‘[:-*]‘: ‘ee_21.png‘, ‘[^o)]‘: ‘ee_22.png‘, ‘[8-)]‘: ‘ee_23.png‘, ‘[(|)]‘: ‘ee_24.png‘, ‘[(u)]‘: ‘ee_25.png‘, ‘[(S)]‘: ‘ee_26.png‘, ‘[(*)]‘: ‘ee_27.png‘, ‘[(#)]‘: ‘ee_28.png‘, ‘[(R)]‘: ‘ee_29.png‘, ‘[()]‘: ‘ee_30.png‘, ‘[()]‘: ‘ee_31.png‘, ‘[(k)]‘: ‘ee_32.png‘, ‘[(F)]‘: ‘ee_33.png‘, ‘[(W)]‘: ‘ee_34.png‘, ‘[(D)]‘: ‘ee_35.png‘ WebIM.NewEmoji = map: [‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘????‘, ‘??‘, ‘??♂?‘, ‘??♀?‘, ‘??Det‘, ‘???♂?‘, ‘???♀?‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??????‘, ‘??????‘, ‘????????‘, ‘????????‘, ‘????????‘, ‘??????‘, ‘??????‘, ‘????????‘, ‘????????‘, ‘????????‘, ‘??????‘, ‘??????‘, ‘????????‘, ‘????????‘, ‘????????‘, ‘????‘, ‘??????‘, ‘????‘, ‘??????‘, ‘??????‘, ‘????‘, ‘??????‘, ‘????‘, ‘??????‘, ‘??????‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘??‘, ‘?‘, ‘??‘, ‘??‘, ‘??‘] /* eslint new-cap: ["error", "newIsCap": false ] */ const 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 ) conn.listen( // 连接成功回调 onOpened: function (message) conn.getRoster( success: function (roster) let rosData = [] for (var i = 0, l = roster.length; i < l; i++) if (roster[i].subscription === ‘both‘) rosData.push(roster[i]) console.log(rosData) // store.dispatch(‘getFriendsData‘, rosData) else return ) , // 收到文本消息 onTextMessage: function (message) , // 收到表情信息 onEmojiMessage: function (message) , // 收到联系人订阅请求、处理群组、聊天室被踢解散等消息 onPresence: function (message) , // 处理好友申请 onRoster: function () conn.getRoster( success: function (roster) let rosData = [] for (var i = 0, l = roster.length; i < l; i++) if (roster[i].subscription === ‘both‘) rosData.push(roster[i]) console.log(‘处理好友申请‘) console.log(rosData) // store.dispatch(‘getFriendsData‘, rosData) else return ) , onAudioMessage: function (message) console.log(‘当前关闭‘) , // 收到音频消息 onLocationMessage: function (message) console.log(‘当前关闭‘) , // 收到位置消息 onFileMessage: function (message) console.log(‘当前关闭‘) , // 收到文件消息 onVideoMessage: function (message) console.log(‘当前关闭‘) , // 收到视频消息 onInviteMessage: function (message) console.log(‘当前关闭‘) , // 处理群组邀请 onOnline: function () console.log(‘当前关闭‘) , // 本机网络连接成功 onOffline: function () console.log(‘当前关闭‘) , // 本机网络掉线 // 失败回调 onError: function (message) console.log(message) ) const rtcCall = new WebIM.WebRTC.Call( connection: conn, mediaStreamConstaints: audio: true, video: true , listener: onAcceptCall: function (from, options) // console.log(‘onAcceptCall::‘, ‘from: ‘, from, ‘options: ‘, options); , onGotRemoteStream: function (stream, streamType) // console.log(‘onGotRemoteStream::‘, ‘stream: ‘, stream, ‘streamType: ‘, streamType); , onGotLocalStream: function (stream, streamType) // console.log(‘onGotLocalStream::‘, ‘stream:‘, stream, ‘streamType: ‘, streamType); , onRinging: function (caller) let reg = /(?<=_).*([email protected])/ let callerId = (reg.exec(caller))[0] let curUser = [] let friends = store.state.data.friends for (let i in friends) if (friends[i].username === callerId) curUser = friends[i] console.log(curUser) // router.push( path: ‘/calling‘, query: user: curUser, curBtn: true ) , onTermCall: function (reason) console.log(‘onTermCall::‘) console.log(‘reason:‘, reason) , onIceConnectionStateChange: function (iceState) if (iceState === ‘closed‘) // router.push( path: ‘/friends‘ ) , onError: function (e) console.log(e) ) export default install: function (Vue, options) // console.log(WebIM) Object.defineProperty(Vue.prototype, ‘$imConn‘, value: conn ) Object.defineProperty(Vue.prototype, ‘$rtcCall‘, value: rtcCall )Step7、组件使用或者全局使用
// main.js import IM from ‘./utils/plugin/webim‘ Vue.use(IM)
// APP.vue 或者其他组件内
this.$imConn.open( apiUrl: WebIM.config.apiURL, user: hx-username, pwd: hx-password, appKey: WebIM.config.appkey )消息处理操作 自定义啦 可以通过Vuex进行处理消息
####
####
至此结束 End
####
####
以上是关于Vue 集成环信 全局封装环信WebSDK 可直接使用的主要内容，如果未能解决你的问题，请参考以下文章
Vue3+TypeScript 如何以 Plugins 形式引入环信 WebSDK？