Vue 集成环信 全局封装环信WebSDK 可直接使用

2019-11-25更新

npm install --save easemob-websdk
请直接使用官方安装方式即可。
import WebIM from \'easemob-websdk\'

以下是最开始版本 环信不适配所写

配置文件可用下面的

使用时请仔细检查域名与host 是否是HTTP/HHTPS协议

 

 

// Step1、安装 easemob-websdk

// npm install --save easemob-websdk

// Step2、安装 strophe.js    underscore    crypto-js

// npm install --save strophe.js underscore crypto-js

Update 2019-6-19  更新  使用 hx-websdk

npm install --save hx-websdk

Step3、使用 新建一个webim.js

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: [\'