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 相关文章推荐
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
JavaScript中对象介绍
Dec 31 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
vant中的toast轻提示实现代码
Nov 04 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抓取页面与代码解析 推荐
2010/07/23 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
Django中URLconf和include()的协同工作方法
2015/07/20 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
德能勤绩工作总结
2015/08/11 职场文书
禁毒主题班会教案
2015/08/14 职场文书
JS实现数组去重的11种方法总结
2022/04/04 Javascript