vue 组件全局封装_Vue 集成环信 全局封装环信WebSDK

1 安装

npm install easemob-websdk --save 官方安装 ，这种安装要在依赖包配置初始化链接，提交代码时并没把配置提交

使用 hx-websdk 安装

npm install --save hx-websdk

2 .使用 新建一个webim.js  放在聊天窗口组件同一层级，为了Emoji图片路径同步

import store from '@/store/store'

// window.Strophe = require('strophe.js').Strophe

// let WebIM = require('easemob-websdk')

import WebIM from "hx-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: '1106190328208422#liangzi',

/*

* 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: './../../../../../assets/images/faces/',

map: {

'[微笑]': 'ee_1.gif',

'[撇嘴]': 'ee_2.gif',

'[色]': 'ee_3.gif',

'[发呆]': 'ee_4.gif',

'[流泪]': 'ee_5.gif',

'[害羞]': 'ee_6.gif',

'[闭嘴]': 'ee_7.gif',

'[睡]': 'ee_8.gif',

'[大哭]': 'ee_9.gif',

'[尴尬]': 'ee_10.gif',

'[发怒]': 'ee_11.gif',

'[调皮]': 'ee_12.gif',

'[呲牙]': 'ee_13.gif',

'[惊讶]': 'ee_14.gif',

'[难过]': 'ee_15.gif',

'[囧]': 'ee_16.gif',

'[抓狂]': 'ee_17.gif',

'[吐]': 'ee_18.gif',

'[偷笑]': 'ee_19.gif',

'[愉快]': 'ee_20.gif',

'[白眼]': 'ee_21.gif',

'[傲慢]': 'ee_22.gif',

'[饥饿]': 'ee_23.gif',

'[困]': 'ee_24.gif',

'[惊恐]': 'ee_25.gif',

'[流汗]': 'ee_26.gif',

'[憨笑]': 'ee_27.gif',

'[悠闲]': 'ee_28.gif',

'[奋斗]': 'ee_29.gif',

'[咒骂]': 'ee_30.gif',

'[疑问]': 'ee_31.gif',

'[嘘]': 'ee_32.gif',

'[晕]': 'ee_33.gif',

'[疯了]': 'ee_34.gif',

'[衰]': 'ee_35.gif',

'[敲打]': 'ee_36.gif',

'[再见]': 'ee_37.gif',

'[擦汗]': 'ee_38.gif',

'[抠鼻]': 'ee_39.gif',

'[糗大了]': 'ee_40.gif',

'[坏笑]': 'ee_41.gif',

'[左哼哼]': 'ee_42.gif',

'[右哼哼]': 'ee_43.gif',

'[哈欠]': 'ee_44.gif',

'[鄙视]': 'ee_45.gif',

'[委屈]': 'ee_46.gif',

'[快哭]': 'ee_47.gif',

'[阴险]': 'ee_48.gif',

'[亲亲]': 'ee_49.gif',

'[吓]': 'ee_50.gif',

'[可怜]': 'ee_51.gif',

'[拥抱]': 'ee_52.gif',

'[月亮]': 'ee_53.gif',

'[太阳]': 'ee_54.gif',

'[炸弹]': 'ee_55.gif',

'[骷髅]': 'ee_56.gif',

'[菜刀]': 'ee_57.gif',

'[猪头]': 'ee_58.gif',

'[西瓜]': 'ee_59.gif',

'[咖啡]': 'ee_60.gif',

'[饭]': 'ee_61.gif',

'[爱心]': 'ee_62.gif',

'[强]': 'ee_63.gif',

'[弱]': 'ee_64.gif',

'[握手]': 'ee_65.gif',

'[胜利]': 'ee_66.gif',

'[抱拳]': 'ee_67.gif',

'[勾引]': 'ee_68.gif',

'[OK]': 'ee_69.gif',

'[No]': 'ee_70.gif',

'[玫瑰]': 'ee_71.gif',

'[凋谢]': 'ee_72.gif',

'[嘴唇]': 'ee_73.gif',

'[爱情]': 'ee_74.gif',

'[飞吻]': 'ee_75.gif'

}

}

// WebIM.NewEmoji = {

// map: ['

标签：Vue,console,WebIM,ee,环信,gif,message,WebSDK,log

来源： https://www.cnblogs.com/yuwenyan/p/11364141.html