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