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传递变量: 值传递?引用传递?
Feb 22 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
Node.js  事件循环详解及实例
Aug 06 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 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正则校验用户名介绍
2008/07/19 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
简单谈谈favicon
2015/06/10 PHP
php提取微信账单的有效信息
2018/10/01 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
微信小程序 rich-text的使用方法
2017/08/04 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
python3.0 字典key排序
2008/12/24 Python
从零学Python之入门(四)运算
2014/05/27 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
Python最小二乘法矩阵
2019/01/02 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
python ftplib模块使用代码实例
2019/12/31 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
Python如何获取文件路径/目录
2020/09/22 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
工程开工庆典邀请函
2014/02/01 职场文书
《学棋》教后反思
2014/04/14 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js