其他分享
首页 > 其他分享> > Vue 集成环信 全局封装环信WebSDK

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