vue-cli3.0 Typescript 項目集成環信WebIM 羣組聊天

項目背景

環信webim 官方沒有vue版本的，本身就根據sdk重寫了個vue版本的，只實現了基礎的 登陸 羣組功能，其餘的能夠根據須要參考官方文檔，添加相應的功能。

環信webim SDK相關文檔： http://docs-im.easemob.com/im/web/intro/start

先使用vue-cli新建一個typescript項目

集成webim

安裝環信sdk和strophe.js 這兩個是必須的

cnpm install easemob-websdk --save cnpm install strophe.js --save cnpm install crypto-js --save cnpm install underscore --save

• 打開node_modules/easemob-websdk/src/connection.js

添加組件 在components中添加 WebIM.ts

// 引入Strophe方法
var Strophejs = require('strophe.js');
var Strophe = (Strophejs as any).Strophe;

// 給Strophe.Connection 添加方法
Strophe.Connection.prototype.setJid = (jid: any) => {
    Strophe.Connection.jid = jid;
    Strophe.Connection.authzid = Strophe.getBareJidFromJid(Strophe.Connection.jid);
    Strophe.Connection.authcid = Strophe.getNodeFromJid(Strophe.Connection.jid);
}

Strophe.Connection.prototype.getJid = () => {
    return Strophe.Connection.jid;
}

(window as any).Strophe = Strophe;

var WebIM = require('easemob-websdk') as any;

//配置文件參考環信demo
var config = {
    xmppURL: 'im-api.easemob.com',
    apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',
    appkey: 'easemob-demo#chatdemoui',
    https: false,
    isMultiLoginSessions: true,
    isAutoLogin: true,
    isWindowSDK: false,
    isSandBox: false,
    isDebug: false,
    autoReconnectNumMax: 2,
    autoReconnectInterval: 2,
    // isWebRTC: (/Firefox/.test(navigator.userAgent) || /WebKit/.test(navigator.userAgent)) && /^https\:$/.test(window.location.protocol),
    heartBeatWait: 4500,
    isHttpDNS: false,
    msgStatus: true,
    delivery: true,
    read: true,
    saveLocal: false,
    encrypt: {
        type: 'none'
    }
}

//初始化配置
WebIM.config = config

var conn: any = () => {
    return new WebIM.connection({
        isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
        https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
        url: WebIM.config.xmppURL,
        isAutoLogin: true,
        heartBeatWait: WebIM.config.heartBeatWait,
        autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
        autoReconnectInterval: WebIM.config.autoReconnectInterval,
        apiUrl: WebIM.config.apiURL
    });
}

export interface CurrentUserInfo {
    access_token: string,
    expires_in: number,
    user: {
        activated: string,
        nickname: string,
        type: string,
        username: string,
        uuid: string
    }
}

export default {
    conn,
    WebIM
};

運行效果

git倉庫地址： https://github.com/sandsli/huanxin-vue