功能背景:

以前和朋友一块儿作了一个wbe项目集成环信的即时通讯的功能,作的时候感叹web端文档太少,并且npm包有一些坑,记录下来写了这篇博客,以后不断有人加我微信问我,怎么集成.如今我再来重写一下这篇博客.javascript

环信web集成功能介绍:

首先:在web端环信是不提供界面的,能拿到的官方的demo也只是用react写的编译后的文件,因此你要本身写UIhtml

其次:使用聊天功能前的登陆,是IM用户登陆,不是用你的环信帐号和密码vue

最后:这篇文章是以当前最新版sdk写的,当前最新版是java

"easemob-websdk": "^1.8.3",

正文:

这几天和朋友作的一个web项目中须要集成环信的即时通信功能,上网查了不少资料,也试作了一个发送消息的demo.感受用起来真是简单方便,只须要提供Appkey,帐号和密码就能够登陆环信,并且功能强大,支持发送表情,图片,文件,消息已读,以及视频直播.node

作demo的时候只直接使用

集成方式,环信的webSDK集成文档是不包含Vue项目的集成的web

我在集成的时候遇到了不少坑vue-cli

好比找不到Strophe对象 ,再好比使用require方式引入strophe 包Base64未定义,真是头大.后来功夫不负有心人,终于让我变查资料,边摸索,终于解决了全部问题,用户可以上线了.npm

网上有一篇博文也是介绍环信SDK集成到Vue项目中 地址vue-cli项目集成环信WebIM 另外在环信社区里也有一个文章做为参考Vue-cli整合环信WebIMapi

下面说一下个人集成方式

npm i easemob-websdk strophe.js --save   安装 easemob-websdk 和strophe.js 包 我用安装后是  "easemob-websdk": "^1.8.3",

"strophe.js": "^1.2.16"

修改三个文件

/node_modules/strophe.js/strophe.js

/node_modules/easemob-websdk/src/connection.js

/webim.config.js

在connection.js中头部加入如下几行代码

var Strophe = require('strophe.js').Strophe;

var meStrophe = require('strophe.js');

$iq = meStrophe.$iq;

$build = meStrophe.$build;

$msg = meStrophe.$msg;

$pres = meStrophe.$pres;

如图

在strophe.js中

setJid: function (jid) {

this.jid = jid;

this.authzid = Strophe.getBareJidFromJid(this.jid);

this.authcid = Strophe.getNodeFromJid(this.jid);

},

getJid: function () {

return this.jid;

},

如图: 在strophe.js的2896行处添加二个方法,即Strophe.Connection.prototype中

在SDK的配置文件中 webim.config.js中

首行var WebIM = {}; 替换成

var WebIM = window.WebIM || {};

尾行添加

window.WebIM = WebIM

3:第三步修改main.js

先引入webim.config.js 再引入sdk为WebIM对象,而后将WebIM对象赋值到Vue的原型上

代码以下

require('./assets/lib/easemob-sdk/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: '1',

pwd: 'xiuxiutrip123456',

appKey: WebIM.config.appkey,

success:function (re) {

console.log('连接服务器正常')

},

error:function (err) {

alert(err)

}

}

Vue.prototype.$imconn = conn

Vue.prototype.$imoption = options

第四步:在组件中调用时

代码以下

this.$imoption.user = this.from_username

this.$imoption.pwd = this.currentUserpwd

this.$imconn.open(this.$imoption)

this.$imconn.listen({

onOpened: function (message) {

console.log('用户已上线')

},

onClosed: function (message) {

console.log('用户已下线')

},

onEmojiMessage: this.receiveEmojiMessage,

onPictureMessage: this.receivePictureMessage,

onTextMessage: this.receiveTextMsg

})

到此vue项目集成环信webSDK算是吿一段落了

报错截图:

报此错的请修改 /node_modules/easemob-websdk/src/connection.js

报此错的请修改  /node_modules/strophe.js/strophe.js

报此错修改  webim.config.js

若是须要demo的话(demo是付费的,请尊重别人的劳动成果),请加我微信

npm run dev 访问 http://localhost:8080/#/chat?from_username=2&to_username=1&to_nickname=梦

demo效果图以下

谢谢阅读.若是以为对你有帮助请记得点赞或收藏.欢迎留言讨论.你的支持是我出产优秀博客的动力.