vue中使用vue-cli接入融云实现即时通信


Posted in Javascript onApril 19, 2019

    本人傻逼GOU,近日公司要开发一款移动app,要用vue结合webpack+es6搭建的项目开发,需要用到融云的即时通信功能,本人找遍了度娘,发现这类型的文章很少,我也是费了不少时间才弄明白其中是怎么一回事,接下来废话少说,直接上代码,告诉小白如何操作。

    首先要注册融云,这个傻逼操作就不说了,注册融云后拿到appkey和融云提供的token (这个token一般是后端返回,我们app登录的时候,后台返回来给我们的,不关我们的事,如果实在要在前端通过融云获取,我后面会说到)。

    很多新手一开始的时候都会无从下手,到处看文档,你会看到下图:

vue中使用vue-cli接入融云实现即时通信

看到这里,我们开发app当然要用本地文档咯,不多说,直接打开下载回来看看是什么鬼,打开目录如下,

vue中使用vue-cli接入融云实现即时通信

这就是我们要找的文件,我们只要最新版本的,就拿这三个文件,(当然你也可以直接引用他们的外链的sdk),外链当然没有本地的快咯。       

        接下来我们获取了sdk回来后,要怎么用呢,怎么放进我们的vue-cli项目跟我们的项目结合在一起呢,融云的sdk是es5写的,接下来我们要怎么把它跟我们用ES6写的代码相结合使用呢,这里官网并没有说明。

    接下来要把这三个件怎么放进我们的项目呢,首先把RongIMLib-2.2.9.min.js 文件放到static目录底下,把protobuf-2.2.8.min.js文件放到src目录下(这里你随意,通常放在公司的js文件下)

    然后我们打开刚才下载回来的文件夹,打开里面的html文件,看下他们是怎么实现的,

    vue中使用vue-cli接入融云实现即时通信

   好了,到这里,你们也看到了,它这里要引入RongIMLib-2.2.9.min.js 这个文件,在这里,我们先要理清楚你想要怎么使用这个js文件,

我们首先打开 项目目录下的index.html文件

把 RongIMLib-2.2.9.min.js 以<script src=""></script>形式引入,在这里引入后,我们就能在.vue文件中使用RongIMClient变量了,但是这里面引入的js是全局的,第个页面都能访问我们的RongIMClient,当然也占用性能,,我比较推荐在这里引入,因为做即时聊天项目,很多地方都要共用RongIMClient的监听,如果你实现不想在这里全局引用js,请看我的另一篇文章,es6引入es5写的js

总结

以上所述是小编给大家介绍的vue中使用vue-cli接入融云实现即时通信,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
这段js代码得节约你多少时间
Dec 20 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
jquery插件格式实例分析
Jun 16 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
浅谈Javascript中的对象和继承
Apr 19 #Javascript
详解如何在Vue项目中导出Excel
Apr 19 #Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 #Javascript
详解vue中使用微信jssdk
Apr 19 #Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 #Javascript
this.$toast() 了解一下?
Apr 18 #Javascript
Vue-input框checkbox强制刷新问题
Apr 18 #Javascript
You might like
一贴学会PHP 新手入门教程
2009/08/03 PHP
php四种基础算法代码实例
2013/10/29 PHP
浅析PHP文件下载原理
2014/12/25 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
javascript验证身份证号
2015/03/03 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
英国电子专家:maplin
2019/09/04 全球购物
《特殊的葬礼》教学反思
2014/04/27 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
作风建设剖析材料
2014/10/06 职场文书
女性健康知识讲座通知
2015/04/23 职场文书