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 Object与Function使用
Jan 11 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
对比分析json及XML
Nov 28 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
js实现汉字排序的方法
Jul 23 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
vue中将网页打印成pdf实例代码
Jun 15 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
专业实习自我鉴定
2013/10/29 职场文书
公务员职务工作的自我评价
2013/11/01 职场文书
中青班党性分析材料
2014/02/16 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
厨房管理计划书
2014/04/27 职场文书
技术比武方案
2014/05/19 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
python字符串常规操作大全
2021/05/02 Python