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 相关文章推荐
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 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
使用无限生命期Session的方法
2006/10/09 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
python实现可变变量名方法详解
2019/07/01 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
母亲追悼会答谢词
2014/01/27 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
文员求职信
2014/07/15 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
公司与个人合作协议书
2016/03/19 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers