0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

鴻蒙上實(shí)現(xiàn)多人聊天功能

OpenHarmony技術(shù)社區(qū) ? 來源:OST開源開發(fā)者 ? 2023-01-09 10:03 ? 次閱讀

本樣例是基于即時通訊(簡稱 IM)服務(wù)實(shí)現(xiàn)的 OpenHarmony 應(yīng)用。

該應(yīng)用允許兩人或多人使用互聯(lián)網(wǎng)即時地傳遞文字、圖片、文件、語音、emoji 等訊息,可應(yīng)用于各類聊天場景,為人們帶來更加及時高效的通訊體驗(yàn)。

此外即時通訊平臺具備較高的定制化特點(diǎn),適用于多種行業(yè),客戶可以根據(jù)自己的需求來定制,實(shí)現(xiàn)即時通訊的內(nèi)部私有化。

設(shè)備端:

DAYU200(RK3568)開發(fā)板

OpenHarmony 3.1 release 系統(tǒng)

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

如下圖:

0f8d5868-8f42-11ed-bfe3-dac502259ad0.png

想要實(shí)現(xiàn)多個設(shè)備之間的無障礙即時通訊,需要多臺終端設(shè)備、終端應(yīng)用和服務(wù)器配合一起使用。

首先應(yīng)該將終端應(yīng)用安裝到終端設(shè)備上,用戶通過應(yīng)用向服務(wù)器申請注冊賬號。

隨后,用戶可以通過賬號進(jìn)行查找,添加其他好友,并向好友發(fā)送文字、圖片、文件、語音、emoji 等訊息。

用戶發(fā)送的訊息會先送達(dá)服務(wù)器,由服務(wù)器判斷其好友的狀態(tài)(離線/在線),然后選擇發(fā)送或者暫時緩存消息等操作。

最后,好友的終端應(yīng)用接收到消息。

實(shí)現(xiàn)即時通訊的設(shè)備需求:安裝應(yīng)用的終端設(shè)備、網(wǎng)絡(luò)環(huán)境和云端服務(wù)器。

前提條件:用戶將應(yīng)用安裝在終端設(shè)備上,并且擁有注冊賬號,且需要通訊的用戶也成功注冊了賬號并且添加了好友。

通訊原理:用戶在安裝了應(yīng)用的終端設(shè)備上編輯信息(文字、圖片、文件、語音、emoji 等),通過網(wǎng)絡(luò)將消息發(fā)送至云端服務(wù)器。

當(dāng)對方用戶在線時,云端服務(wù)器將把消息推送給對方用戶,對方用戶安裝了應(yīng)用的終端設(shè)備也將接收到信息。當(dāng)對方用戶不在線時,信息將被暫時緩存在云端服務(wù)器。

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

通訊功能是通過 TCP 協(xié)議實(shí)現(xiàn)的,我們將通訊接口 connect()、send()、receive() 的實(shí)現(xiàn)放置在 CPP 文件中,通過 NAPI 的方式對 JS 層暴露接口。

如下:

connect():客戶端和服務(wù)器建立連接

send():消息發(fā)送功能

receive():消息接收功能


//建立TCP連接
if(connect(sock_cli,(structsockaddr*)&servaddr,sizeof(servaddr))

②文件消息的發(fā)送與接收

0faf7d8a-8f42-11ed-bfe3-dac502259ad0.png

文件轉(zhuǎn)發(fā)是即時通訊辦公場景下的重要功能。樣例中的文件功能支持文件消息的發(fā)送、接收和下載。 用戶通過點(diǎn)擊聊天界面的“+”按鈕,選擇“文件”按鈕,完成本地文件的瀏覽,隨后可以選擇是否將文件發(fā)送給好友。

這個功能的實(shí)現(xiàn)包括三個步驟:

文件的選擇

文件上傳到服務(wù)器

文件的接收

文件上傳:

//文件的選擇
letfile1={filename:this.$app.$def.uid+'-'+FILE_URL,name:'file',uri:FILE_URL,type:fileType}
letfileId=this.guid();
letdata={};
letheader={"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',functioncallback(headers){
_this.socketSendFile(fileId,timestamp);
});
}).catch((err)=>{
console.error('fileSelect=====Failedtorequesttheupload.Cause:'+JSON.stringify(err));
})
//文件的接收
letdownloadConfig={//下載參數(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',functioncallback(){
prompt.showToast({
message:'下載文件成功!',
duration:1000,
});
});
③語音消息的發(fā)送與接收 0fc981bc-8f42-11ed-bfe3-dac502259ad0.png 用戶通過點(diǎn)擊聊天界面的錄制按鈕,完成語音的錄制,隨后可以選擇是否將語音發(fā)送給好友。

這個功能的實(shí)現(xiàn)包括三個步驟:

語音的錄制

語音上傳到服務(wù)器

語音的接收

圖片消息的發(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}casefailed,audiorecorderisnull`)
}
}

//錄制好的語音文件的位置
letsrcPath='internal://cache/'+this.mainData.file+'.wav'
letfile1={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',functioncallback(headers){
_this.sendAudio(audioId)
});
uploadTask.on('progress',functioncallback(uploadedSize,totalSize){
console.info("dialogPages=====uploadtotalSize:"+totalSize+"uploadedSize:"+uploadedSize);
});
}).catch((err)=>{
console.error('dialogPages=====Failedtorequesttheupload.Cause:'+JSON.stringify(err));
})
//語音的接收
letdownloadConfig={//下載參數(shù)
url:item.content.path,
header:{},
enableMetered:true,
enableRoaming:true,
filePath:filePath,
networkType:request.NETWORK_WIFI
}
letdownloadTask;
let_this=this
request.download(downloadConfig,(err,data)=>{
if(err){
return;
}
downloadTask=data;
//下載完成
downloadTask.on('complete',functioncallback(){
letaudio={
content:{path:filePath}
}
_this.playAudio(audio)
});

④emoji 消息的發(fā)送與接收

100142aa-8f42-11ed-bfe3-dac502259ad0.png

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

//引入emoji第三方組件


//第三方組件的展示布局


所有表情

即時通訊功能總結(jié)

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

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

審核編輯:湯梓紅
聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴

原文標(biāo)題:鴻蒙上實(shí)現(xiàn)多人聊天功能

文章出處:【微信號:gh_834c4b3d87fe,微信公眾號:OpenHarmony技術(shù)社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。

收藏 人收藏

    評論

    相關(guān)推薦

    PHP實(shí)現(xiàn)簡單聊天功能

    php實(shí)現(xiàn)簡單聊天功能1、創(chuàng)建聊天消息表,其表的字段有消息內(nèi)容,發(fā)送時間和發(fā)送者的名稱;SQL:CREATE TABLE `guanhui`.`message` ( `id` INT(
    發(fā)表于 06-05 15:09

    如何實(shí)現(xiàn)HarmonyOS Java端的氣泡聊天框?

      HarmonyOSJava端的氣泡聊天框怎么實(shí)現(xiàn)?android上有9圖可實(shí)現(xiàn)?鴻蒙上有什么類似的方案沒?
    發(fā)表于 06-13 09:59

    請問一下鴻蒙如何實(shí)現(xiàn)分享功能?

    , currentScores.getText().toString()));shareIntent = Intent.createChooser(shareIntent, "分享到");startActivity(shareIntent);鴻蒙如何實(shí)現(xiàn)類似android
    發(fā)表于 06-15 10:37

    java實(shí)現(xiàn)IM即時通訊聊天功能代碼

    從實(shí)際工程應(yīng)用角度出發(fā),以計算機(jī)網(wǎng)絡(luò)原理為指導(dǎo),結(jié)合當(dāng)前網(wǎng)絡(luò)中的一些常用技術(shù),編程實(shí)現(xiàn)基于C/S架構(gòu)的網(wǎng)絡(luò)聊天工具是切實(shí)可行的。本文為大家介紹java Smack整合Openfire服務(wù)器實(shí)現(xiàn)IM即時通訊
    發(fā)表于 01-24 16:10 ?2.8w次閱讀

    小程序如何實(shí)現(xiàn)聊天功能?

    小程序即時聊天功能。 為小程序接入企達(dá)小程序IM后,可以實(shí)現(xiàn)用戶消息即時提醒,當(dāng)有用戶發(fā)送消息,會像QQ一樣閃爍提醒,并彈窗提示客服人員進(jìn)行接待,有效避免因接待不及時,而造成用戶流失。除了消息提醒,即時
    發(fā)表于 03-17 11:13 ?2453次閱讀

    鴻蒙系統(tǒng)有什么新功能

    鴻蒙系統(tǒng)有什么新功能?在前段時間,華為正式發(fā)布了鴻蒙系統(tǒng),鴻蒙系統(tǒng)勾起了許多小伙伴的好奇心,那么應(yīng)該有很多人好奇
    的頭像 發(fā)表于 07-06 16:22 ?7205次閱讀

    鴻蒙上使用Python進(jìn)行物聯(lián)網(wǎng)編程

    在上一篇帖子《使用 Python 開發(fā)鴻蒙設(shè)備程序(1-GPIO 外設(shè)控制)》中,已經(jīng)成功的使用 Python 對 GPIO 上的外設(shè)進(jìn)行了控制。 這其實(shí)不是什么大不了的事,從功能的角度也著實(shí)不值得
    的頭像 發(fā)表于 09-28 09:55 ?4227次閱讀
    在<b class='flag-5'>鴻蒙上</b>使用Python進(jìn)行物聯(lián)網(wǎng)編程

    鴻蒙版微信聊天UI效果實(shí)現(xiàn)!

    ? 最近開發(fā)中要做一個類似微信聊天的工單系統(tǒng)客服中心界面(安卓版)所以想著也模仿一個鴻蒙版(基于 Java UI 的,JS UI 版本的后期更新哈) 那么廢話不多數(shù)說我們正式開始。 ??? 具體實(shí)現(xiàn)
    的頭像 發(fā)表于 11-15 09:35 ?3571次閱讀
    <b class='flag-5'>鴻蒙</b>版微信<b class='flag-5'>聊天</b>UI效果<b class='flag-5'>實(shí)現(xiàn)</b>!

    如何在鴻蒙上實(shí)現(xiàn)聊天列表滑動刪除功能

    ?? 本項(xiàng)目基于 ArkUI 中 TS 擴(kuò)展的聲明式開發(fā)范式,關(guān)于語法和概念直接看官網(wǎng)。 ?? 基于 TS 擴(kuò)展的聲明式開發(fā)范式 1 : https: / /developer.harmonyos.com/cn /docs/documentation /doc-guides/ui -ts-overview- 00000011 92705715 基于 TS 擴(kuò)展的聲明式開發(fā)范式 2 : https: / /developer.harmonyos.com/cn /docs/documentation /doc-references/ts -framework-directory- 00000011115 81264 本文介紹列表滑動刪除: 列表中只允許滑出其中一項(xiàng) 如果有打開的項(xiàng),點(diǎn)擊或滑動其他項(xiàng)都會關(guān)閉打開的項(xiàng) 點(diǎn)擊刪除,刷新列表界面
    的頭像 發(fā)表于 12-03 10:55 ?3057次閱讀

    鴻蒙上安裝按鈕實(shí)現(xiàn)下載、暫停、取消、顯示等操作

    今天給大家分享在鴻蒙上一個按鈕實(shí)現(xiàn)下載、暫停、取消、顯示下載進(jìn)度操作。
    的頭像 發(fā)表于 01-04 14:32 ?2223次閱讀

    基于openHarmony適配移植的即時聊天功能實(shí)現(xiàn)

    項(xiàng)目介紹 項(xiàng)目名稱:NettyChat 所屬系列:openHarmony的第三方組件適配移植 功能實(shí)現(xiàn)了即時聊天功能 項(xiàng)目移植狀態(tài):100%,移植完成即時
    發(fā)表于 04-12 09:29 ?5次下載

    鴻蒙上實(shí)現(xiàn)“數(shù)字華容道”小游戲

    本篇文章教大家如何在鴻蒙上實(shí)現(xiàn)“數(shù)字華容道”小游戲。
    的頭像 發(fā)表于 12-26 09:52 ?1172次閱讀

    鴻蒙上實(shí)現(xiàn)簡單的“每日新聞”

    這是一篇講解如何實(shí)現(xiàn)基于鴻蒙 JS 的簡單的每日新聞。
    的頭像 發(fā)表于 12-26 09:58 ?820次閱讀

    鴻蒙上開發(fā)“小蜜蜂”游戲

    小時候我們有個熟悉的游戲叫小蜜蜂。本文教大家在鴻蒙上學(xué)做這個小蜜蜂游戲。
    的頭像 發(fā)表于 04-03 11:27 ?1599次閱讀

    鴻蒙OS開發(fā)實(shí)例:【HarmonyHttpClient】網(wǎng)絡(luò)框架

    鴻蒙上使用的Http網(wǎng)絡(luò)框架,里面包含純Java實(shí)現(xiàn)的HttpNet,類似okhttp使用,支持同步和異步兩種請求方式;還有鴻蒙版retrofit,和Android版Retrofit相似的使用,解放雙手般優(yōu)雅使用注解、自動解析j
    的頭像 發(fā)表于 04-12 16:58 ?792次閱讀
    <b class='flag-5'>鴻蒙</b>OS開發(fā)實(shí)例:【HarmonyHttpClient】網(wǎng)絡(luò)框架