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 相关文章推荐
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
javascript中的面向对象
Mar 30 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
关于JS解构的5种有趣用法
Sep 05 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 adodb操作mysql数据库
2009/03/19 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python地图绘制实操详解
2019/03/04 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
学生就业推荐信
2013/11/13 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
学生吸烟检讨书
2014/09/14 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
2014年行政部工作总结
2014/11/19 职场文书
教育实习指导教师评语
2014/12/31 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python