玩轉(zhuǎn)OpenHarmony社交場(chǎng)景：即時(shí)通訊平臺(tái)

開源項(xiàng)目 OpenHarmony是每個(gè)人的 OpenHarmony

朱偉

中國科學(xué)院軟件所

OpenHarmony知識(shí)體系工作組

一、簡介

本樣例是基于即時(shí)通訊（Instant messaging，簡稱IM）服務(wù)實(shí)現(xiàn)的OpenAtom OpenHarmony（簡稱“OpenHarmony”）應(yīng)用，允許兩人或多人使用互聯(lián)網(wǎng)即時(shí)地傳遞文字、圖片、文件、語音、emoji等訊息，可應(yīng)用于各類聊天場(chǎng)景，為人們帶來更加及時(shí)高效的通訊體驗(yàn)。 此外即時(shí)通訊平臺(tái)具備較高的定制化特點(diǎn)，適用于多種行業(yè)，客戶可以根據(jù)自己的需求來定制，實(shí)現(xiàn)即時(shí)通訊的內(nèi)部私有化。 設(shè)備端：DAYU200（RK3568）開發(fā)板，OpenHarmony 3.1 release系統(tǒng)。

二、即時(shí)通訊實(shí)現(xiàn)原理

想要實(shí)現(xiàn)多個(gè)設(shè)備之間的無障礙即時(shí)通訊，需要多臺(tái)終端設(shè)備、終端應(yīng)用和服務(wù)器配合一起使用。首先應(yīng)該將終端應(yīng)用安裝到終端設(shè)備上，用戶通過應(yīng)用向服務(wù)器申請(qǐng)注冊(cè)賬號(hào)。隨后，用戶可以通過賬號(hào)進(jìn)行查找，添加其他好友，并向好友發(fā)送文字、圖片、文件、語音、emoji等訊息。用戶發(fā)送的訊息會(huì)先送達(dá)服務(wù)器，由服務(wù)器判斷其好友的狀態(tài)（離線/在線），然后選擇發(fā)送或者暫時(shí)緩存消息等操作。最后，好友的終端應(yīng)用接收到消息。實(shí)現(xiàn)即時(shí)通訊的設(shè)備需求：安裝應(yīng)用的終端設(shè)備、網(wǎng)絡(luò)環(huán)境和云端服務(wù)器。前提條件：用戶將應(yīng)用安裝在終端設(shè)備上，并且擁有注冊(cè)賬號(hào)，且需要通訊的用戶也成功注冊(cè)了賬號(hào)并且添加了好友。通訊原理：用戶在安裝了應(yīng)用的終端設(shè)備上編輯信息（文字、圖片、文件、語音、emoji等），通過網(wǎng)絡(luò)將消息發(fā)送至云端服務(wù)器。當(dāng)對(duì)方用戶在線時(shí)，云端服務(wù)器將把消息推送給對(duì)方用戶，對(duì)方用戶安裝了應(yīng)用的終端設(shè)備也將接收到信息。當(dāng)對(duì)方用戶不在線時(shí)，信息將被暫時(shí)緩存在云端服務(wù)器。

三、4步實(shí)現(xiàn)多人即時(shí)通訊

（1）通訊功能 通訊功能是通過TCP協(xié)議實(shí)現(xiàn)的，我們將通訊接口connect()、send()、receive()的實(shí)現(xiàn)放置在CPP文件中，通過NAPI的方式對(duì)JS層暴露接口。 ?connect()：客戶端和服務(wù)器建立連接； ? send()：消息發(fā)送功能 ? receive()：消息接收功能；

//建立TCP連接
if (connect(sock_cli, (struct sockaddr *)&servaddr, sizeof(servaddr)) < 0) {
    napi_create_int32(env, 0, &result);
} else {
    napi_create_int32(env, 1, &result);
    OH_LOG_INFO(LOG_APP,"C++ 接收線程啟動(dòng)");
    startRec();
}
 //發(fā)送消息
if(send(sock_cli, data, strlen(data),0) == -1) {
    OH_LOG_INFO(LOG_APP,"zjf == send() : -1");
    napi_create_int32(env, 0, &result);
} else {
    OH_LOG_INFO(LOG_APP,"zjf == send() : !-1");
    napi_create_int32(env, 1, &result);
}
//接收消息
getStep(queue0,sharedMessage); //取出一條消息
const char *c_s=sharedMessage.c_str();//換為char*形式處理
napi_value result;
napi_create_string_utf8(env, c_s, sharedMessage.length(), &result);
std::string().swap(sharedMessage);//清空字符串

（2）文件消息的發(fā)送與接收 ? 文件轉(zhuǎn)發(fā)是即時(shí)通訊辦公場(chǎng)景下的重要功能。樣例中的文件功能支持文件消息的發(fā)送、接收和下載。用戶通過點(diǎn)擊聊天界面的“+”按鈕，選擇“文件”按鈕，完成本地文件的瀏覽，隨后可以選擇是否將文件發(fā)送給好友。這個(gè)功能的實(shí)現(xiàn)包括三個(gè)步驟：（1）文件的選擇；（2）文件上傳到服務(wù)器；（3）文件的接收。 ??文件上傳

//文件的選擇
let file1 = {filename: this.$app.$def.uid +'-'+ FILE_URL, name: 'file', uri: FILE_URL, type:fileType }
let fileId = this.guid();
let data = {};
let header = { "filename": this.selectedFileName.toString()};
//文件上傳到服務(wù)器
request.upload({ url: "http://" + this.$app.$def.ip +"/file/fileUpload?fileSignature=" + fileId + "&uid=" +this.$app.$def.uid + "&fileType=" +this.$app.$def.chatData[this.idx].unRead, header: header, method: "POST", files: [file1], data: [data] }).then((data) => {
  uploadTask = data;
  uploadTask.on('headerReceive', function callback(headers){
  _this.socketSendFile(fileId, timestamp);
  });
}).catch((err) => {
  console.error('fileSelect=====Failed to request the upload. Cause: ' + JSON.stringify(err));
})
//文件的接收
let downloadConfig = {  //下載參數(shù)
            url: fileUrl, 
            header: {}, 
            enableMetered: true, 
            enableRoaming: true,
            filePath: '/data/storage/el2/base/haps/entry/files/' + downloadFileName,
            networkType: request.NETWORK_WIFI
}
request.download(downloadConfig, (err, data) => {
        if (err) {
            return;
        }
        downloadTask = data;
        //下載完成
        downloadTask.on('complete', function callback() {
                prompt.showToast({
                   message: '下載文件成功！',
                   duration: 1000,
                });
});

（3）語音消息的發(fā)送與接收 ? 用戶通過點(diǎn)擊聊天界面的錄制按鈕，完成語音的錄制，隨后可以選擇是否將語音發(fā)送給好友。這個(gè)功能的實(shí)現(xiàn)包括三個(gè)步驟：（1）語音的錄制；（2）語音上傳到服務(wù)器；（3）語音的接收。 圖片消息的發(fā)送與語音消息的發(fā)送步驟相同，文章中不再贅述。

//語音錄制
startRecorder(config, callback) {
    if (typeof (this.audioRecorder) !== 'undefined') {
        this.audioRecorder.on('prepare', () => {
        this.audioRecorder.start()
    })
        this.audioRecorder.on('start', () => {
            callback()
        })
        this.audioRecorder.prepare(config)
     } else {
        logger.info(`${TAG} case failed, audiorecorder is null`)
    }
}


//錄制好的語音文件的位置
let srcPath = 'internal://cache/' + this.mainData.file + '.wav'
let file1 = { filename: this.$app.$def.uid +'-'+ this.mainData.path, name: 'audio', uri: srcPath, type: "wav" };


//語音消息發(fā)送到服務(wù)器
request.upload({ url: myurl, header: header, method: "POST", files: [file1], data: [data] }).then((data) => {
            uploadTask = data;
            uploadTask.on('headerReceive', function callback(headers){
              _this.sendAudio(audioId)
            });
            uploadTask.on('progress', function callback(uploadedSize, totalSize) {
                console.info("dialogPages=====upload totalSize:" + totalSize + "  uploadedSize:" + uploadedSize);
            });
        }).catch((err) => {
            console.error('dialogPages=====Failed to request the upload. Cause: ' + JSON.stringify(err));
        })
//語音的接收
let downloadConfig = {    //下載參數(shù)
        url: item.content.path,
        header: {},  
        enableMetered: true,                      
        enableRoaming: true,                      
        filePath: filePath,               
        networkType: request.NETWORK_WIFI        
}
        let downloadTask;
        let _this = this
        request.download(downloadConfig, (err, data) => {
            if (err) {
                 return;
            }
            downloadTask = data;
            //下載完成
            downloadTask.on('complete', function callback() {
               let audio = {
                  content: { path: filePath }
                 }
                 _this.playAudio(audio)
});

（4）emoji消息的發(fā)送與接收 ? emoji是即時(shí)通訊軟件不可缺少的一部分，可以更加生動(dòng)地表現(xiàn)用戶的聊天情感。在樣例中，用戶通過點(diǎn)擊聊天界面的emoji按鈕，即可找到目前應(yīng)用內(nèi)支持的所有樣式的emoji，隨后可以選擇具體樣式并將其發(fā)送給好友。

//引入emoji第三方組件
<element name="emojiExpression" src="../../common/components/emojiExpression/emojiExpression.hml">element>


//第三方組件的展示布局
<div id="moreContainer" if="{{showFace}}">
    <div id="moreOneLine">
        <div class="moreFillGap" style="flex: 1 1;">div>
        <text style="left: 25fp; top: 10fp;">所有表情text>
        <emojiExpression>emojiExpression>
        <div class="moreFillGap" style="flex: 1 1;">div>
    div>
div>

四、即時(shí)通訊功能總結(jié)

本樣例是基于OpenHarmony實(shí)現(xiàn)的即時(shí)通訊應(yīng)用，目前已經(jīng)支持文字、圖片、文件、語音、emoji等訊息的快速發(fā)送與接收。除此之外還實(shí)現(xiàn)了好友的添加與刪除、黑名單、安全登錄、私聊/群聊、個(gè)人信息設(shè)置（二維碼/頭像等）等功能的全方面支持。 代碼地址

https://gitee.com/isrc_ohos/instant-message_ohos

五、相關(guān)參考鏈接

樣例源碼

https://gitee.com/isrc_ohos/instant-message_ohos

OpenHarmony知識(shí)體系工作組

https://gitee.com/openharmony-sig/knowledge