天天看點

Qt制作區域網路即時通訊軟體

Qt制作區域網路即時通訊軟體

       利用Qt制作的區域網路即時通信軟體,可實作文本資訊、表情包、圖檔、文檔等的傳輸功能。界面風格模仿的Tim,是以本軟體取名為Timi,tim的mini版本。

  1. 登入界面:使用之前做的登入界面,後續修改。原因是沒找到好的素材(不會美工),有會美工願意提供素材的請聯系。
  2. 文本資訊發送:氣泡效n果,文本信揭秘那息可自動換行,并且文本資訊可選擇/可複制。
  3. 發送圖檔功能:通過udp發送圖檔,增加圖檔浏覽器,輕按兩下圖檔可以檢視詳細資訊。
  4. 截圖功能:可實作類似微信QQ等截圖功能。
  5. 表情包功能:發送表情包,表情包下載下傳于網絡上的QQ表情包。
  6. 檔案發送功能:實作檔案傳輸功能,樣式模仿微信樣式,由選擇檔案可以看到。
  7. 軟鍵盤:調用軟鍵盤,實作中文/英文、數字和符号等輸入功能。
  8. 上線/下線廣播通知:實作上線/下線提示功能。
  9. 收到消息提示功能:接受到消息,在頭像左上角顯示紅色提示資訊。

 1、登入界面

      基本登入界面,登入有托盤提示資訊,如下圖右下角資訊及托盤。

Qt制作區域網路即時通訊軟體

2、主界面 

         主界面樣式模仿Tim,實作無邊框拖拽、放大、縮小、圓角、陰影、最大化、最小化、托盤等基本功能。

         主界面主要由标題欄、左側通信錄、右側的線上/離線欄、資訊顯示視窗、輸入工具欄、資訊輸入視窗等幾部分組成。

Qt制作區域網路即時通訊軟體
Qt制作區域網路即時通訊軟體

 3、文本資訊發送/接受

        之前有通過js+html實作過氣泡聊天效果,樣式确實不錯,不過太占記憶體了,在此進行改良,通過繪制實作,其中遇到過很多坑,比如繪制好後如何實作自動換行,并且中文/英文/數字換行都可以;再比如繪制的資訊如何選擇,發送的資訊可以複制;還有就是發送圖檔時發送的圖檔過大或過小如何顯示;發送檔案應該如何顯示,發送檔案時發送樣式怎麼好看;發送表情包及gif圖檔如何做到動畫播放的效果等等。

         發送文本資訊功能,樣式為氣泡效果,文本資訊可以自動換行,文本資訊可以選擇及複制。

         無論中文/數字/字母/符号都可自動換行,自動換行寫了好幾天。根據視窗大小,聊天資訊自适應大小。

Qt制作區域網路即時通訊軟體
Qt制作區域網路即時通訊軟體

4、發送圖檔功能

       通過選擇圖檔進行發送,并增加了圖檔浏覽器功能,可以檢視圖檔詳細資訊,并且可以列印、下載下傳、放大、縮小、還原、檔案位置等功能。

Qt制作區域網路即時通訊軟體

       同樣也實作了圖檔拖拽或複制到編輯視窗,可以同時發送多個圖檔。

       期間遇到的問題是如何顯示圖檔過大或過小的情況,根據檔案大小進行縮放。圖檔浏覽器也需要此功能,如果發送正常不是特别大的圖檔好顯示,如果特别大就會出現問題,包括檔案進行縮小、放大、還原。

       圖檔放大,超過圖檔浏覽器大小,目前可以通過鍵盤上/下/左/右鍵可以移動,通過滑鼠拖拽實作圖檔移動還未實作,後續會将此功能加上。

Qt制作區域網路即時通訊軟體
Qt制作區域網路即時通訊軟體

5、截圖功能

       正常截圖功能,類似微信的功能(功能不全,後續會添加),包括截圖後圖檔左右旋轉、儲存到本地、取消、和儲存到剪切闆,點選對勾後可以到處進行粘貼。

Qt制作區域網路即時通訊軟體

       微信截圖功能還是比較完善的,包括再繪制、重新選擇區域等效果。這些效果在之前寫的電子白闆畫圖軟體中有介紹,後續會将這寫功能加上。

Qt制作區域網路即時通訊軟體

6、發送/接受表情包

       表情包源自于網絡下載下傳,可以看到發送背景為藍色看到有白色邊框,這不是bug就是素材不好,有好點的gif表情包友善時可以發給我一份。

       發送表情包主要解決的就是表情包選擇框的顯示/隐藏問題、表情包實作動畫效果。

Qt制作區域網路即時通訊軟體
Qt制作區域網路即時通訊軟體

7、發送/接受檔案

       發送檔案樣式模仿的是微信,之前想過類似釘釘、QQ、Tim等,最終覺得微信的還是比較不錯的,同時可以發送多個,樣式和微信一樣,這裡沒錄制具體發送,可以翻看微信的。發現電腦版微信自帶表情包是靜圖,之前都沒發現。

       同時增加了檢視文檔詳細資訊功能,輕按兩下檔案發送聊天資訊,可以顯示文檔詳細資訊,單擊文檔圖示跳轉到文檔具體位置,友善快速定位到檔案位置。

       發送檔案通過tcp實作,自測發送3g的大檔案無壓力,不過同時發送多個大檔案無親測。這裡設計的不是特别好,會着重改進此處功能。還有就是發送檔案進度條顯示問題,擷取發送進度容易,如何一個顯示效果我還沒想好,後續慢慢改進吧。

Qt制作區域網路即時通訊軟體
Qt制作區域網路即時通訊軟體
Qt制作區域網路即時通訊軟體

8、軟鍵盤

       軟體盤的實作如下功能,之前部落格也寫到了,軟鍵盤皮膚可以更改的,同樣字元庫可以選擇google的。軟鍵盤在嵌入式環境用的比較多,win環境下沒什麼卵用吧。

       輸入框工具欄還有其他功能需增加暫時未想好,歡迎大家提供意見,讓功能更加完善。

Qt制作區域網路即時通訊軟體

 9、上線/下線通知

        通訊錄采用QQ樣式 ,展現使用者頭像,使用者名,ip位址。後續增加簽名效果。這裡的頭像都是固定樣式,暫時未實作使用者自定義功能,最近在整理上傳頭像及編輯頭像功能,像QQ那樣進行頭像圖檔裁剪的效果,實作後再更新此功能。

       通信錄這裡暫時隐藏了群聊功能,暫時還未想好群聊應該怎麼展現,群聊樣式該如何,想好後也會将此功能增加上。

        在上下線提示欄能可以看到,上線顔色為藍色并标記為online,下線顔色為灰色并标記為offline。這個顯示效果也是想了好久,主要是因為這裡未采用伺服器,未能實作離線發送,是以要展現出接受方的線上狀态,借鑒的效果不多,可能有在右下加彈出視窗的效果,好像360彈出的廣告一樣,像我這種360都不安裝的人,這效果肯定接受不了。有好點的效果歡迎大家提議,能提供美工素材更是感激不盡。

      上下線沒有錄制兩台電腦實際視訊,最多試過5台電腦上下線效果,實測沒問題。歡迎下載下傳使用,可親測。

Qt制作區域網路即時通訊軟體

10、收到消息提示功能

       實作了收到消息提示的功能,提示方式如下面所示。收到消息後會在頭像的左上角标記紅色圓點。同樣接受不了360似的右下角彈廣告,奈何也沒想到更好的效果。提供素材吧。

      頭像圖檔來自網絡,不好看,奈何不會美工,歡迎提供好看點的頭像。

Qt制作區域網路即時通訊軟體

11、項目建構

        整個項目代碼如下,可以根據命名看到每個子產品的實作,整個項目未使用ui,所有界面效果都是通過代碼painter 繪制實作。後續會将各個子產品具體實作方法分享給大家。

        整個項目代碼于2019年12月份每個不眠的深夜一行一行敲的。 

Qt制作區域網路即時通訊軟體

       下載下傳位址:https://pan.baidu.com/s/1aqHBWd2a9MeTHgWLwnrPAw  密碼:tb5v

       大家可下載下傳使用,順便将使用當中的建議/意見及Bug回報給我,使軟體更加完善。

       主界面有我的聯系方式,或者在此留言也可以。

       有需要或者想做區域網路即時通訊軟體的可以聯系我。

       整個軟體是我自己設計和開發的,能力有限,如存在不妥之處,歡迎大佬們指正。如果覺得不錯的就點個贊吧。

繼續閱讀