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中获取事件对象的方法小结
Mar 13 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
实例详解带参数的 npm script
2019/05/28 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python基础梳理(一)(推荐)
2019/04/06 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
J2EE相关知识面试题
2013/08/26 面试题
开工典礼策划方案
2014/05/23 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
办公经费申请报告
2015/05/15 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
高一英语教学反思
2016/03/03 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers