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í)間才弄明白其中是怎么一回事，接下來(lái)廢話少說(shuō)，直接上代碼，告訴小白如何操作。
首先要注冊(cè)融云，這個(gè)傻逼操作就不說(shuō)了，注冊(cè)融云后拿到appkey和融云提供的token （這個(gè)token一般是后端返回，我們app登錄的時(shí)候，后臺(tái)返回來(lái)給我們的，不關(guān)我們的事，如果實(shí)在要在前端通過融云獲取，我后面會(huì)說(shuō)到）。
很多新手一開始的時(shí)候都會(huì)無(wú)從下手，到處看文檔，你會(huì)看到下圖：
看到這里，我們開發(fā)app當(dāng)然要用本地文檔咯，不多說(shuō)，直接打開下載回來(lái)看看是什么鬼，打開目錄如下，
這就是我們要找的文件，我們只要最新版本的，就拿這三個(gè)文件，（當(dāng)然你也可以直接引用他們的外鏈的sdk）,外鏈當(dāng)然沒有本地的快咯。
接下來(lái)我們獲取了sdk回來(lái)后，要怎么用呢，怎么放進(jìn)我們的vue-cli項(xiàng)目跟我們的項(xiàng)目結(jié)合在一起呢，融云的sdk是es5寫的，接下來(lái)我們要怎么把它跟我們用ES6寫的代碼相結(jié)合使用呢，這里官網(wǎng)并沒有說(shuō)明。
接下來(lái)要把這三個(gè)件怎么放進(jìn)我們的項(xiàng)目呢，首先把RongIMLib-2.2.9.min.js 文件放到static目錄底下，把protobuf-2.2.8.min.js文件放到src目錄下(這里你隨意，通常放在公司的js文件下)
然后我們打開剛才下載回來(lái)的文件夾，打開里面的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 使用moment獲取當(dāng)前時(shí)間及一月前的時(shí)間
開發(fā)中會(huì)有要獲取當(dāng)前日期的需求,有的是獲取到當(dāng)前月份,本文就介紹了vue獲取當(dāng)前日期時(shí)間(moment、new?Date()),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2023-08-08
這篇文章介紹了Vue發(fā)送ajax請(qǐng)求的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
這篇文章主要介紹了vue filter 完美時(shí)間日期格式的方法，文中給大家提到了vue filter方法-時(shí)間格式化 的代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-08
最近一段時(shí)間，一直在做主題方面的工作。我們的主題，并不是簡(jiǎn)單切換一下顏色，或者排版變化這些，而是變化比較大的主題。比如說(shuō)：主題1和主題2看起來(lái)完全不一樣，功能甚至都不一樣。這樣，通過切換css就無(wú)法做到了，因此我思考良久，使用了如下2種方法2021-06-06
Vue移動(dòng)端實(shí)現(xiàn)調(diào)用相機(jī)掃描二維碼或條形碼的全過程
最近在使用vue開發(fā)的h5移動(dòng)端想要實(shí)現(xiàn)一個(gè)調(diào)用攝像頭掃描二維碼的功能,所以下面這篇文章主要給大家介紹了關(guān)于Vue移動(dòng)端實(shí)現(xiàn)調(diào)用相機(jī)掃描二維碼或條形碼的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue項(xiàng)目登錄成功后退出時(shí)清空sessionId和userId的問題
這篇文章主要介紹了vue項(xiàng)目登錄成功后退出時(shí)清空sessionId和userId的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
解決vue單頁(yè)面應(yīng)用打包后相對(duì)路徑、絕對(duì)路徑相關(guān)問題
這篇文章主要介紹了解決vue單頁(yè)面應(yīng)用打包后相對(duì)路徑、絕對(duì)路徑相關(guān)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-08-08
使用Vue純前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼并實(shí)現(xiàn)倒計(jì)時(shí)
在實(shí)際的應(yīng)用開發(fā)中,涉及用戶登錄驗(yàn)證、密碼重置等場(chǎng)景時(shí),通常需要前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼的功能,以提升用戶體驗(yàn)和安全性,以下是一個(gè)簡(jiǎn)單的前端實(shí)現(xiàn),演示了如何在用戶點(diǎn)擊發(fā)送驗(yàn)證碼按鈕時(shí)觸發(fā)短信驗(yàn)證碼的發(fā)送,并開始一個(gè)倒計(jì)時(shí)2024-04-04
這篇文章主要給大家介紹了關(guān)于項(xiàng)目部署后前端vue代理失效問題的解決辦法,文中通過圖文以及代碼示例將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02
Vue實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05