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实现div弹出层的方法
Nov 20 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
uniapp开发小程序的经验总结
Apr 08 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 cookies中删除的一般赋值方法
2011/05/07 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
浅谈php://filter的妙用
2019/03/05 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
python通过smpt发送邮件的方法
2015/04/30 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
在python中bool函数的取值方法
2018/11/01 Python
python 实现绘制整齐的表格
2019/11/18 Python
美国轮胎网站:Priority Tire
2018/11/28 全球购物
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
考博专家推荐信
2014/05/10 职场文书
安全生产标语大全
2014/10/06 职场文书
借款民事起诉状范文
2015/05/19 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
大学同学聚会感言
2015/07/30 职场文书
军训后的感想
2015/08/07 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
python引入其他文件夹下的py文件具体方法
2021/05/23 Python