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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
一段好玩的JavaScript代码
Dec 01 Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
jquery ui对话框实例代码
May 10 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
js 获取扫码枪输入数据的方法
Jun 10 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内核学习教程之php opcode内核实现
2016/01/27 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
Array对象方法参考
2006/10/03 Javascript
面向对象的javascript(笔记)
2009/10/06 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
vue.js中npm安装教程图解
2018/04/10 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
浅谈python可视化包Bokeh
2018/02/07 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
Python基础教程之异常详解
2019/01/10 Python
python3 实现调用串口功能
2019/12/26 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
大专计算机个人求职的自我评价
2013/10/21 职场文书
摄影助理岗位职责
2014/02/07 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
长城导游词300字
2015/01/30 职场文书
世界红十字日活动总结
2015/02/10 职场文书
土建施工员岗位职责
2015/04/11 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
文艺演出主持词
2015/07/01 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书