生活随笔
收集整理的這篇文章主要介紹了
vue-cli3.0 Typescript 项目集成环信WebIM 群组聊天
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
項(xiàng)目背景
環(huán)信webim 官方?jīng)]有vue版本的，自己就根據(jù)sdk重寫(xiě)了個(gè)vue版本的，只實(shí)現(xiàn)了基礎(chǔ)的 登錄 群組功能，其他的可以根據(jù)需要參考官方文檔，添加相應(yīng)的功能。
環(huán)信webim SDK相關(guān)文檔：
http://docs-im.easemob.com/im/web/intro/start
先使用vue-cli新建一個(gè)typescript項(xiàng)目
集成webim
安裝環(huán)信sdk和strophe.js 這兩個(gè)是必須的
cnpm install easemob-websdk --save
cnpm install strophe.js --save
cnpm install crypto-js --save
cnpm install underscore --save
- 打開(kāi)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;//配置文件參考環(huán)信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 = configvar 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
};
運(yùn)行效果
git倉(cāng)庫(kù)地址：
https://github.com/sandsli/huanxin-vue
轉(zhuǎn)載于:https://www.cnblogs.com/sands/p/11284605.html
總結(jié)
以上是生活随笔為你收集整理的vue-cli3.0 Typescript 项目集成环信WebIM 群组聊天的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
