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程序之undefined篇(中)
Nov 23 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
ionic实现底部分享功能
May 11 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
Ajax异步刷新功能及简单案例
Nov 20 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
如何隐藏你的.php文件
2007/01/04 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
PHP比你想象的好得多
2014/11/27 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
js 数组去重的四种实用方法
2014/09/09 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
Python 26进制计算实现方法
2015/05/28 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
Python单链表原理与实现方法详解
2020/02/22 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
优秀团队获奖感言
2014/02/19 职场文书
婚礼司仪主持词
2014/03/14 职场文书
学生手册评语
2014/05/05 职场文书
校外活动方案
2014/08/28 职场文书
作风大整顿心得体会
2014/09/10 职场文书
复兴之路展览观后感
2015/06/02 职场文书
贷款收入证明格式
2015/06/24 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书