vue vue-cli接入融雲實現即時通信

    本人傻逼GOU,近日公司要開發一款移動app,要用vue結合webpack+es6搭建的項目開發,需要用到融雲的即時通信功能,本人找遍了度娘,發現這類型的文章很少,我也是費了不少時間才弄明白其中是怎麼一回事,接下來廢話少說,直接上代碼,告訴小白如何操作。

    首先要註冊融雲,這個傻逼操作就不說了,註冊融雲後拿到appkey和融雲提供的token (這個token一般是後端返回,我們app登錄的時候,後臺返回來給我們的,不關我們的事,如果實在要在前端通過融雲獲取,我後面會說到)。

    很多新手一開始的時候都會無從下手,到處看文檔,你會看到下圖:

看到這裏,我們開發app當然要用本地文檔咯,不多說,直接打開下載回來看看是什麼鬼,打開目錄如下,

這就是我們要找的文件,我們只要最新版本的,就拿這三個文件,(當然你也可以直接引用他們的外鏈的sdk),外鏈當然沒有本地的快咯。       

        接下來我們獲取了sdk回來後,要怎麼用呢,怎麼放進我們的vue-cli項目跟我們的項目結合在一起呢,融雲的sdk是es5寫的,接下來我們要怎麼把它跟我們用ES6寫的代碼相結合使用呢,這裏官網並沒有說明。

    接下來要把這三個件怎麼放進我們的項目呢,首先把RongIMLib-2.2.9.min.js 文件放到static目錄底下,把protobuf-2.2.8.min.js文件放到src目錄下(這裏你隨意,通常放在公司的js文件下)

    然後我們打開剛纔下載回來的文件夾,打開裏面的html文件,看下他們是怎麼實現的,

    

   好了,到這裏,你們也看到了,它這裏要引入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

未完待續

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章