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

想要實現(xiàn)多個設備之間的無障礙即時通訊,需要多臺終端設備、終端應用和服務器配合一起使用。
首先應該將終端應用安裝到終端設備上,用戶通過應用向服務器申請注冊賬號。
隨后,用戶可以通過賬號進行查找,添加其他好友,并向好友發(fā)送文字、圖片、文件、語音、emoji 等訊息。
用戶發(fā)送的訊息會先送達服務器,由服務器判斷其好友的狀態(tài)(離線/在線),然后選擇發(fā)送或者暫時緩存消息等操作。
最后,好友的終端應用接收到消息。
實現(xiàn)即時通訊的設備需求:安裝應用的終端設備、網(wǎng)絡環(huán)境和云端服務器。
前提條件:用戶將應用安裝在終端設備上,并且擁有注冊賬號,且需要通訊的用戶也成功注冊了賬號并且添加了好友。
通訊原理:用戶在安裝了應用的終端設備上編輯信息(文字、圖片、文件、語音、emoji 等),通過網(wǎng)絡將消息發(fā)送至云端服務器。
當對方用戶在線時,云端服務器將把消息推送給對方用戶,對方用戶安裝了應用的終端設備也將接收到信息。當對方用戶不在線時,信息將被暫時緩存在云端服務器。
4步實現(xiàn)多人即時通訊
①通訊功能是通過 TCP 協(xié)議實現(xiàn)的,我們將通訊接口 connect()、send()、receive() 的實現(xiàn)放置在 CPP 文件中,通過 NAPI 的方式對 JS 層暴露接口。
如下:
connect():客戶端和服務器建立連接
send():消息發(fā)送功能
receive():消息接收功能
//建立TCP連接 if(connect(sock_cli,(structsockaddr*)&servaddr,sizeof(servaddr))0)?{ ????napi_create_int32(env,?0,?&result); }?else?{ ????napi_create_int32(env,?1,?&result); ????OH_LOG_INFO(LOG_APP,"C++?接收線程啟動"); ????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);//清空字符串
②文件消息的發(fā)送與接收

文件轉發(fā)是即時通訊辦公場景下的重要功能。樣例中的文件功能支持文件消息的發(fā)送、接收和下載。 用戶通過點擊聊天界面的“+”按鈕,選擇“文件”按鈕,完成本地文件的瀏覽,隨后可以選擇是否將文件發(fā)送給好友。
這個功能的實現(xiàn)包括三個步驟:
文件的選擇
文件上傳到服務器
文件的接收
文件上傳:
//文件的選擇 letfile1={filename:this.$app.$def.uid+'-'+FILE_URL,name:'file',uri:FILE_URL,type:fileType} letfileId=this.guid(); letdata={}; letheader={"filename":this.selectedFileName.toString()}; //文件上傳到服務器 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ā)送與接收
用戶通過點擊聊天界面的錄制按鈕,完成語音的錄制,隨后可以選擇是否將語音發(fā)送給好友。
這個功能的實現(xiàn)包括三個步驟:
語音的錄制
語音上傳到服務器
語音的接收
圖片消息的發(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ā)送到服務器
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ā)送與接收

emoji 是即時通訊軟件不可缺少的一部分,可以更加生動地表現(xiàn)用戶的聊天情感。 在樣例中,用戶通過點擊聊天界面的 emoji 按鈕,即可找到目前應用內(nèi)支持的所有樣式的 emoji,隨后可以選擇具體樣式并將其發(fā)送給好友。
//引入emoji第三方組件//第三方組件的展示布局 所有表情
即時通訊功能總結
本樣例是基于 OpenHarmony 實現(xiàn)的即時通訊應用,目前已經(jīng)支持文字、圖片、文件、語音、emoji 等訊息的快速發(fā)送與接收。 除此之外還實現(xiàn)了好友的添加與刪除、黑名單、安全登錄、私聊/群聊、個人信息設置(二維碼/頭像等)等功能的全方面支持。 代碼地址:
https://gitee.com/isrc_ohos/instant-message_ohos
-
通訊
+關注
關注
9文章
936瀏覽量
36256 -
開發(fā)板
+關注
關注
25文章
6027瀏覽量
110717 -
鴻蒙
+關注
關注
60文章
2746瀏覽量
45135 -
OpenHarmony
+關注
關注
31文章
3897瀏覽量
20488
原文標題:鴻蒙上實現(xiàn)多人聊天功能
文章出處:【微信號:gh_834c4b3d87fe,微信公眾號:OpenHarmony技術社區(qū)】歡迎添加關注!文章轉載請注明出處。
發(fā)布評論請先 登錄
PHP實現(xiàn)簡單聊天功能
如何實現(xiàn)HarmonyOS Java端的氣泡聊天框?
java實現(xiàn)IM即時通訊聊天功能代碼
小程序如何實現(xiàn)聊天功能?
鴻蒙系統(tǒng)有什么新功能
在鴻蒙上使用Python進行物聯(lián)網(wǎng)編程
鴻蒙版微信聊天UI效果實現(xiàn)!
如何在鴻蒙上實現(xiàn)聊天列表滑動刪除功能
鴻蒙上安裝按鈕實現(xiàn)下載、暫停、取消、顯示等操作
基于openHarmony適配移植的即時聊天功能實現(xiàn)
鴻蒙OS開發(fā)實例:【HarmonyHttpClient】網(wǎng)絡框架

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