vue（版本2.xx） + 环信web sdk(版本1.8.3)

2021-02-01 20:14

阅读：669

标签：文本用户 dimens 类型对话 ons sdk loading https

1.准备工作

npm引入sdk及 strophe.js（坑：刚开始下载的最新版的sdk，但是下载下来总是少文件src，挣扎半天，换了1.8.3版本的sdk好了，可能跟我项目的哪些东西的版本有不兼容的吧）

（1）cnpm i easemob-websdk@1.8.3 --save

（2）cnpm i strophe.js@1.2.16 --save

（3）下载webim.config.js: https://gitee.com/weimingye/web-im/blob/master/demo/javascript/dist/webim.config.js#

2.修改sdk的connection.js文件（注意新增代码的位置，放在11行声明变量的后边）

技术图片

代码：

//新增代码***********start
var Strophe = require(‘../../strophe.js/dist/strophe.js‘).Strophe;
var meStrophe = require(‘../../strophe.js/dist/strophe.js‘);
$iq = meStrophe.$iq;
$build = meStrophe.$build;
$msg = meStrophe.$msg;
$pres = meStrophe.$pres;
//新增代码***********end

3.修改strophe.js

技术图片

代码：

//新增代码***********start
  setJid: function (jid) {
    this.jid = jid;
    this.authzid = Strophe.getBareJidFromJid(this.jid);
    this.authcid = Strophe.getNodeFromJid(this.jid);
  },

  getJid: function () {
    return this.jid;
  },
  //新增代码***********end

4.修改webim.config.js（首行、最后一行，把自己公司的appkey换上去）

技术图片

5.main.js新增配置

//环信start
require(‘./assets/webim.config.js‘)
let WebIM = require(‘easemob-websdk‘)
Vue.prototype.$webim = WebIM

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
})

const options = {
  apiUrl: WebIM.config.apiURL,
  user: ‘‘,//用户名
  pwd: ‘‘,//密码
  appKey: WebIM.config.appkey,
  success:function (res) {
    console.log(‘链接服务器正常‘)
  },
  error:function (err) {
    alert(err)
  }
}
Vue.prototype.$imconn = conn
Vue.prototype.$imoption = options
//环信end

6.聊天中的表情编码对应文件

技术图片

emoji.js

module.exports = {
    path: "../../static/faces",
    obj: {
        "[):]": "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_18.png",
        "[(a)]": "ee_13.png",
        "[8o|]": "ee_14.png",
        "[8-|]": "ee_15.png",
        "[+o(]": "ee_16.png",
        "[,
        "[|-)]": "ee_17.png",
        "[*-)]": "ee_19.png",
        "[:-#]": "ee_20.png",
        "[:-*]": "ee_22.png",
        "[^o)]": "ee_21.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"
    }
};

emoji.js

index.js(暂时未用到)

const _WIDTH = window.screen.availWidth > 350 ? 350 : window.screen.availWidth;
export default {
    // whether auto check media query and dispatch by redux or not ?
    reduxMatchMedia: true,
    // map of media query breakpoints
    dimensionMap: {
        xs: "480px",
        sm: "768px",
        md: "992px",
        lg: "1200px",
        xl: "1600px"
    },
    name: "Web IM",
    logo: "",
    SIDER_COL_BREAK: "sm", // md
    SIDER_COL_WIDTH: 80,
    SIDER_WIDTH: 350,
    RIGHT_SIDER_WIDTH: _WIDTH,
    // imgType: {
    //     gif: 1,
    //     bmp: 1,
    //     jpg: 1,
    //     png: 1,
        
    // },
    PAGE_NUM: 20
};