Vue 集成環信 全局封裝環信WebSDK 可直接使用
2019-11-25更新vue
npm install --save easemob-websdk
請直接使用官方安裝方式便可。
import WebIM from 'easemob-websdk'如下是最開始版本 環信不適配所寫git
配置文件可用下面的github
使用時請仔細檢查域名與host 是不是HTTP/HHTPS協議web
// Step一、安裝 easemob-websdknpm
// npm install --save easemob-websdk// Step二、安裝 strophe.js underscore crypto-jsapi
// npm install --save strophe.js underscore crypto-jsUpdate 2019-6-19 更新 使用 hx-websdk網絡
npm install --save hx-websdkStep三、使用 新建一個webim.jsapp
import store from '@/store' // window.Strophe = require('strophe.js').Strophe // 務必在前面引入 // let WebIM = require('easemob-websdk')
let WebIM = require('hx-websdk') // 使用hx-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 }) } }Step四、若是須要視頻聊天 安裝 hx-webrtcide
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 = /(?<=_).*(?=@)/ 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 })Step五、最終代碼ui
import store from '@/store' // window.Strophe = require('strophe.js').Strophe // let WebIM = require('easemob-websdk')
let WebIM = require('hx-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 = /(?<=_).*(?=@)/ 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) } } })
// 須要註冊一個全局的WebIM 在hx-sdk中有須要用到 否則發送接收表情時會拋出異常
window.WebIM = WebIM export default { install: function (Vue, options) { // console.log(WebIM) Object.defineProperty(Vue.prototype, '$imConn', { value: conn }) Object.defineProperty(Vue.prototype, '$rtcCall', { value: rtcCall }) } }Step七、組件使用或者全局使用
// 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
####
####
最後附上一個git-demo地址：https://github.com/MR-ZiWeiter/demo-webim
該demo只提供環信相關的東西哦如需幫助能夠發郵件至：201512990@qq.com
貼個圖：
相關文章
- 1. Vue 集成環信 全局封裝環信WebSDK 可直接使用
- 2. Vue 集成環信 全局封裝環信WebSDK
- 3. vue+webpack 集成環信---
- 4. vue集成環信IM
- 5. 環信集成
- 6. 集成環信
- 7. Android環信集成
- 8. 環信web集成
- 9. vue-cli項目集成環信WebIM
- 10. java 環信集成
- 更多相關文章...
- • C# 封裝 - C#教程
- • Lua 環境安裝 - Lua 教程
- • Composer 安裝與使用
- • Git可視化極簡易教程 — Git GUI使用方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安裝和Hello，World編寫
- 2. 重磅解讀：K8s Cluster Autoscaler模塊及對應華爲雲插件Deep Dive
- 3. 鴻蒙學習筆記2（永不斷更）
- 4. static關鍵字 和構造代碼塊
- 5. JVM筆記
- 6. 無法啓動 C/C++ 語言服務器。IntelliSense 功能將被禁用。錯誤: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回碼狀態含義
- 8. Java樹形結構遞歸（以時間換空間）和非遞歸（以空間換時間）
- 9. 數據預處理---缺失值
- 10. 都要2021年了，現代C++有什麼值得我們學習的？
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Vue 集成環信 全局封裝環信WebSDK 可直接使用
- 2. Vue 集成環信 全局封裝環信WebSDK
- 3. vue+webpack 集成環信---
- 4. vue集成環信IM
- 5. 環信集成
- 6. 集成環信
- 7. Android環信集成
- 8. 環信web集成
- 9. vue-cli項目集成環信WebIM
- 10. java 環信集成