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 EasyPager 分页函数
May 25 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
Node.js返回JSONP详解
May 18 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 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后台如何避免用户直接进入方法实例
2013/10/15 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
教师敬业奉献模范事迹材料
2014/05/18 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
行政答辩状范文
2015/05/21 职场文书
心灵点滴观后感
2015/06/02 职场文书
欠条格式范本
2015/07/03 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
vue3中provide && inject的使用
2021/07/01 Vue.js
Mysql 文件配置解析介绍
2022/05/06 MySQL