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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
ExtJS Window 最小化的一种方法
Nov 18 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
模块化react-router配置方法详解
Jun 03 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 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
NOT NULL 和NULL
2007/01/15 PHP
php实现telnet功能示例
2014/04/08 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
Python多线程实例教程
2014/09/06 Python
详解Python中where()函数的用法
2018/03/27 Python
python 剪切移动文件的实现代码
2018/08/02 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
实例详解Python模块decimal
2019/06/26 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
网络管理专业求职信
2014/03/15 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
上班离岗检讨书
2014/09/10 职场文书
小学生优秀评语
2014/12/29 职场文书
户外活动总结
2015/02/04 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers