Vue-cli整合环信WebIM

[b]非常抱歉以前写的文章给各位带来了麻烦,今天突然看到imgeek推送的邮件才记起这个[/b]
其实很简单的,以前是我弄复杂了
 
1. 在index.html页面引入js文件

<script type='text/javascript' src='static/webim/webim.config.js'></script>

<script type='text/javascript' src='static/webim/strophe-1.2.8.js'></script>


2. 在main.js 赋值 ,  如下图

QQ图片20180206105624.png


 
代码如下
let WebIM = require('easemob-websdk')
Vue.prototype.$webim = WebIM
WebIM.config = {
xmppURL: 'im-api.easemob.com',
apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',
appkey: '你的环信appkey',
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'
}
}
// 创建连接
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
})
// 添加成功的回调
conn.listen({
onOpened: function (message) {
console.log('连接打开=>', message)
},
onClosed: function (message) {
console.log('连接关闭=>', message)
},
onTextMessage: function (message) {
console.log('收到文本信息message=>', message)
}
})
const options = {
apiUrl: WebIM.config.apiURL,
user: null,
pwd: null,
appKey: WebIM.config.appkey
}
Vue.prototype.$imconn = conn
Vue.prototype.$imoption = options



3.  在页面调用全局的赋值即可
 
this.$imconn.open(this.$imoption)
 
 
 
 
 
 
 
 
 
 
 
 

32 个评论

手动点赞!
为什么要在strophe.js加入两个函数呢,在哪里用到
webimsdk里面用到了
您好,能不能给一个vue整合环信的例子的源码啊? 按照上面的弄完后项目报错了
你那种解决方案是非常不好的,不知道你现在有没有找到好的解决方案,如果没有的话 我有好的解决方案,不需要修改任何node_modules环信的源码
可不可以说下,因为我现在也是在开发vue+webIM的项目
你好,能够说下你解决方案吗,我按照上面的步骤还是报错了
楼主,为什么我按照你的方法,import websdk from 'easemob-websdk'一直报错呢
按照这种方法配置,然而还是报错: These dependencies were not found: * crypto-js in ./node_modules/_easemob-websdk@1.4.15@easemob-websdk/src/connection.js, ./node_modules/_easemob-websdk@1.4.15@easemob-websdk/src/message.js * underscore in ./node_modules/_easemob-websdk@1.4.15@easemob-websdk/src/connection.js To install them, you can run: npm install --save crypto-js underscore 版本信息: easemob-websdk:1.4.15 strophe:1.2.14
大佬,能分享下你的解决方案吗?
npm install --save crypto-js underscore 我运行了这一句就不报错了。。。尴尬了
请问博主监听事件无效的问题解决了吗?
楼主,这个监听回调无效的问题,解决了么? 分享下啊
非常抱歉啊,其实我在头部有提示啊
更新了文章
更新了文章
更新了文章
更新了文章
更新了文章
监听回调无效的问题,试着还是不可以? 用户名密码错误的时候走 onError 但是成功的时候不走
不应该啊, 这个应该没有问题的
你再看下文章,我把代码贴上了,你对照着改一下
楼主我按照你的步骤,报错http://a1.easemob.com/lixiaodiedie/lixiaocall/token 404 (Not Found)
可以了可以了,原来是我的账号密码没传对
大牛,按照你的方法引入后调用方法一直报XXX未定义,怎么解决啊?
这个文件在哪里 <script type='text/javascript' src='static/webim/webim.config.js'></script>
怎么把main.js回调收到的消息绑定到部件中呢? 我是用了个全局变量 vue.protype.XXX获取回调消息,然后绑定到部件data的属性上,在wait监听数据变化,但是不起作用,刚用vue不是很熟,跪求指点
跪求Vue-cli 整合WebIM
怎么弄
F:\measurement\easemob> npm install --save crypto-js underscore npm ERR! path F:\measurement\easemob\node_modules\npm\node_modules\dezalgo npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall rename npm ERR! enoent ENOENT: no such file or directory, rename 'F:\measurement\easemob\node_modules\npm\node_modules\dezalgo' -> 'F:\measurement\easemob\node_modules\npm\node_modules\.dezalgo.DELETE' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\soort\AppData\Roaming\npm-cache\_logs\2018-07-02T07_43_33_622Z-debug.log 这个怎么解决,你遇到过这个问题么
写了一篇完整的使用在vue中集成环信的 博客 https://blog.csdn.net/github_35631540/article/details/80278114 有人任何问题可加我微信 demon_0212 咨询

要回复文章请先登录注册