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 相关文章推荐
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
浅谈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 5.5 新特性
2013/07/02 PHP
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
python集合用法实例分析
2015/05/30 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
查看django版本的方法分享
2018/05/14 Python
python实现微信防撤回神器
2019/04/29 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
python+tkinter实现学生管理系统
2019/08/20 Python
Python实现TCP通信的示例代码
2019/09/09 Python
基于python实现把图片转换成素描
2019/11/13 Python
python实现电子词典
2020/03/03 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
幼儿教师考核制度
2014/01/25 职场文书
揠苗助长教学反思
2014/02/04 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
入职担保书怎么写
2014/05/12 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
结婚纪念日感言
2015/08/01 职场文书