vue中使用vue-cli接入融云實(shí)現(xiàn)即時(shí)通信
本人傻逼GOU,近日公司要開發(fā)一款移動(dòng)app,要用vue結(jié)合webpack+es6搭建的項(xiàng)目開發(fā),需要用到融云的即時(shí)通信功能,本人找遍了度娘,發(fā)現(xiàn)這類型的文章很少,我也是費(fèi)了不少時(shí)間才弄明白其中是怎么一回事,接下來廢話少說,直接上代碼,告訴小白如何操作。
首先要注冊(cè)融云,這個(gè)傻逼操作就不說了,注冊(cè)融云后拿到appkey和融云提供的token (這個(gè)token一般是后端返回,我們app登錄的時(shí)候,后臺(tái)返回來給我們的,不關(guān)我們的事,如果實(shí)在要在前端通過融云獲取,我后面會(huì)說到)。
很多新手一開始的時(shí)候都會(huì)無從下手,到處看文檔,你會(huì)看到下圖:

看到這里,我們開發(fā)app當(dāng)然要用本地文檔咯,不多說,直接打開下載回來看看是什么鬼,打開目錄如下,

這就是我們要找的文件,我們只要最新版本的,就拿這三個(gè)文件,(當(dāng)然你也可以直接引用他們的外鏈的sdk),外鏈當(dāng)然沒有本地的快咯。
接下來我們獲取了sdk回來后,要怎么用呢,怎么放進(jìn)我們的vue-cli項(xiàng)目跟我們的項(xiàng)目結(jié)合在一起呢,融云的sdk是es5寫的,接下來我們要怎么把它跟我們用ES6寫的代碼相結(jié)合使用呢,這里官網(wǎng)并沒有說明。
接下來要把這三個(gè)件怎么放進(jìn)我們的項(xiàng)目呢,首先把RongIMLib-2.2.9.min.js 文件放到static目錄底下,把protobuf-2.2.8.min.js文件放到src目錄下(這里你隨意,通常放在公司的js文件下)
然后我們打開剛才下載回來的文件夾,打開里面的html文件,看下他們是怎么實(shí)現(xiàn)的,

好了,到這里,你們也看到了,它這里要引入RongIMLib-2.2.9.min.js 這個(gè)文件,在這里,我們先要理清楚你想要怎么使用這個(gè)js文件,
我們首先打開 項(xiàng)目目錄下的index.html文件
把 RongIMLib-2.2.9.min.js 以<script src=""></script>形式引入,在這里引入后,我們就能在.vue文件中使用RongIMClient變量了,但是這里面引入的js是全局的,第個(gè)頁(yè)面都能訪問我們的RongIMClient,當(dāng)然也占用性能,,我比較推薦在這里引入,因?yàn)樽黾磿r(shí)聊天項(xiàng)目,很多地方都要共用RongIMClient的監(jiān)聽,如果你實(shí)現(xiàn)不想在這里全局引用js,請(qǐng)看我的另一篇文章,es6引入es5寫的js
總結(jié)
以上所述是小編給大家介紹的vue中使用vue-cli接入融云實(shí)現(xiàn)即時(shí)通信,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
vue(element ui)el-table樹形表格展示以及數(shù)據(jù)對(duì)齊方式
這篇文章主要介紹了vue(element ui)el-table樹形表格展示以及數(shù)據(jù)對(duì)齊方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue在echarts?tooltip中添加點(diǎn)擊事件案例詳解
本文主要介紹了Vue項(xiàng)目中在echarts?tooltip添加點(diǎn)擊事件的案例詳解,代碼具有一定的價(jià)值,感興趣的小伙伴可以來學(xué)習(xí)一下2021-11-11
vue移動(dòng)端城市三級(jí)聯(lián)動(dòng)組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端城市三級(jí)聯(lián)動(dòng)組件的使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
Vue+NodeJS實(shí)現(xiàn)大文件上傳的示例代碼
常見的文件上傳方式可能就是new一個(gè)FormData,把文件append進(jìn)去以后post給后端就可以了。但如果采用這種方式來上傳大文件就很容易產(chǎn)生上傳超時(shí)的問題。所以本文將利用Vue+NodeJS實(shí)現(xiàn)大文件上傳,需要的可以參考一下2022-05-05
vue-print-nb解決vue打印問題,并且隱藏頁(yè)眉頁(yè)腳方式
這篇文章主要介紹了vue-print-nb解決vue打印問題,并且隱藏頁(yè)眉頁(yè)腳方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05

