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 相关文章推荐
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
JS中Array数组学习总结
Jan 18 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
vue-hook-form使用详解
Apr 07 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 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 xml实例 留言本
2009/03/20 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
python编写的最短路径算法
2015/03/25 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
在python中修改.properties文件的操作
2020/04/08 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
浙大毕业生自荐信
2014/01/26 职场文书
金融专业求职信
2014/08/05 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
分享几种python 变量合并方法
2022/03/20 Python
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA