前言

目前，即時(shí)通訊在App中逐漸成了不可或缺的功能，尤其是在疫情期間，音視頻會(huì)議功能更是火了一把，但是想自己開發(fā)即時(shí)通訊功能，卻一點(diǎn)都不簡(jiǎn)單，如果用原生開發(fā)的話，那么Android、IOS就需要兩套代碼，時(shí)間成本太高，針對(duì)上述問(wèn)題，本文將以跨平臺(tái)的形式來(lái)解決。

開發(fā)準(zhǔn)備

首先，此開發(fā)需要具備一定的前端基礎(chǔ)，開發(fā)工具建議使用vscode。

即時(shí)通訊功能開發(fā)

如何用前端技術(shù)來(lái)實(shí)現(xiàn)即時(shí)通訊功能，并且一套代碼同時(shí)能夠支持Android、iOS端呢？具體實(shí)現(xiàn)流程如下：

1）打開中控易動(dòng)官網(wǎng)。

2）在–開發(fā)者–文檔中心–中，打開前端開發(fā)指南，如下圖：

3）可以看到，這里有很多功能插件，我們目前只需要即時(shí)通訊插件，所以只需找到

RongCloud插件：

4)可以看到，功能非常豐富，有UI的插件打開的是一個(gè)原生APP頁(yè)面，里面包含了會(huì)話列表和聊天頁(yè)面，對(duì)于頁(yè)面定制要求不高的使用帶UI的接口，大大節(jié)省了開發(fā)時(shí)間，如果對(duì)頁(yè)面要求較高，可以選擇無(wú)UI的接口，自己繪制頁(yè)面即可。其中帶UI會(huì)話列表及會(huì)話界面如下圖：

5）怎么調(diào)用這些接口呢，其實(shí)很簡(jiǎn)單，只需要引入一個(gè)js，即可調(diào)用所有API接口

1 <!-- 在html文檔中 -->

2 <script type="text/JAVAscript" src="supconit://hcmobile.js"></script>

也可以在VSCode中搜索“中控易動(dòng)”，安裝，此插件集成了代碼提示和快速在app端運(yùn)行h5頁(yè)面以及js腳本的功能。點(diǎn)擊查看詳細(xì)文檔

一鍵打包生成APP

在開發(fā)完之后，如何把這個(gè)前端工程一鍵打包生成Android、iOS端的APP呢？

還需要借助中控易動(dòng)平臺(tái)，在–控制臺(tái)–我的應(yīng)用–模塊中點(diǎn)擊創(chuàng)建應(yīng)用，顯示如下：

把打包的前端工程上傳或者寫入在線的首頁(yè)地址，完善信息之后一鍵同時(shí)生成Android、iOS應(yīng)用，最后通過(guò)掃碼下載安裝即可。

結(jié)語(yǔ)

這里只展示了即時(shí)通訊功能的實(shí)現(xiàn)，除此之外還有海量的功能插件，如果想看JSSDK示例代碼和效果，可以在CloudGrid 應(yīng)用中查看實(shí)例。