前言

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

開發準備

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

即時通訊功能開發

如何用前端技術來實現即時通訊功能，并且一套代碼同時能夠支持Android、iOS端呢？具體實現流程如下：

1）打開中控易動官網。

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

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

RongCloud插件：

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

5）怎么調用這些接口呢，其實很簡單，只需要引入一個js，即可調用所有API接口

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

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

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

一鍵打包生成APP

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

還需要借助中控易動平臺，在–控制臺–我的應用–模塊中點擊創建應用，顯示如下：

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

結語

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