在實現即時通訊軟件或聊天軟件時,渲染文字表情、圖文混排是一項非常繁瑣的工作,再加上還要支持GIF動圖、引用消息、撤回消息、名片等不同樣式的消息渲染時,就更加麻煩了。
好在我們可以使用 ESFramework 提供的 IChatRender 組件,使用它我們就能輕鬆實現類似於微信聊天消息的渲染效果。IChatRender 支持 Windows、Linux(包括國產OS)。在Windows平臺上提供了基於 WinForm 和基於 WPF 的實現,在Linux上則是基於Avalonia 實現的。
廢話不多說,先上張渲染Demo的效果圖(該Demo源碼可於文末下載):
一. 支持的聊天消息類型
IChatRender 支持渲染的聊天消息類型包括:
(1)文本表情混排。
(2)圖片,GIF 動圖。
(3)文件傳輸進度及控制。
(4)個人名片、羣名片。
(5)引用消息。
(6)語音消息。
(7)語音通話。
(8)視頻通話。
(9)撤回消息、刪除消息。
二. IChatRender 接口定義
IChatRender 接口的定義具體如下所示:
/// <summary> /// 渲染名片 /// </summary> /// <param name="msgID">聊天記錄ID</param> /// <param name="userID">發送者</param> /// <param name="cardUserID">名片上的個人ID</param> /// <param name="index">插入聊天記錄的位置,默認是放到最後面</param> void AddChatItemCard(string msgID ,string userID, string cardUserID ,int? index = null); /// <summary> /// 渲染文件 /// </summary> /// <param name="fileName">文件名稱</param> /// <param name="fileSize">文件大小</param> /// <param name="state">文件狀態</param> void AddChatItemFile(string msgID, string userID, string fileName, ulong fileSize, FileTransState state, int? index = null); /// <summary> /// 渲染圖片 /// </summary> /// <param name="image">圖像</param> /// <param name="imgSize">圖像大小</param> /// <param name="observerable">默認傳null</param> void AddChatItemImage(string msgID, string userID, object image, Size imgSize ,IProgressObserverable observerable = null, int? index = null); /// <summary> /// 渲染文本表情 /// </summary> /// <param name="text">內容,在渲染文本的內容中用 [000]來代表第一個表情,[001]即是二個表情,以此類推</param> /// <param name="referenced">引用內容可以是文本、圖片、文件或名片</param> /// <param name="textColor">文字顏色</param> void AddChatItemText(string msgID, string userID, string text, ReferencedChatMessage referenced = null, Color? textColor = null, int? index = null); /// <summary> /// 渲染悄悄話,默認顯示內容—>> 悄悄話 /// </summary> void AddChatItemSnap(string msgID, string userID, int? index = null); /// <summary> /// 渲染語音消息 /// </summary> /// <param name="audioMessageSecs">語音時長</param> /// <param name="audioMessage">語音短信</param> void AddChatItemAudio(string msgID, string userID, int audioMessageSecs, object audioMessage, int? index = null); /// <summary> /// 渲染多媒體通話類型 /// </summary> /// <param name="duration">通話時長</param> /// <param name="isAudioCommunicate">通話類型(語音/視頻)</param> void AddChatItemMedia(string msgID, string userID, string duration, bool isAudioCommunicate, int? index = null); /// <summary> /// 渲染系統消息 /// </summary> /// <param name="msg">系統消息內容</param> void AddChatItemSystemMessage(string msg, int? index = null); /// <summary> /// 渲染消息的發送時間 /// </summary> /// <param name="dt">發送時間</param> void AddChatItemTime(DateTime dt, int? index = null); /// <summary> /// 自己撤回消息 /// </summary> void RecallChatMessage(string msgID); /// <summary> /// 其他用戶撤回消息 /// </summary> /// <param name="operatorName">操作者</param> void RecallChatMessage(string msgID ,string operatorName); /// <summary> /// 刪除對應的記錄 /// </summary> void RemoveChatMessage(string msgID);
三. 創建 IChatRender 實例
可以通過調用ESFramework.Extensions.ChatRendering.ChatRenderFactory 的靜態方法 CreateChatRender 創建一個 IChatRender 實例。
/// <param name="provider">提供必要的信息給聊天渲染器</param> /// <param name="ctrl">要在其表面渲染的UI控件</param> /// <param name="myID">自己的ID</param> /// <param name="destID">對方ID、或羣ID</param> /// <param name="isGroup">羣聊/單聊</param> /// <returns></returns> public static IChatRender CreateChatRender(ISysRender sysRender,IRenderDataProvider provider, IChatControl ctrl, string myID, string destID, bool isGroup);
第一個參數 sysRender 用於完成特定平臺上的基礎渲染繪製實現,比如 Winform 版的實現,WPF版的實現,以及Avalonia版的實現。
ISysRender 接口的定義如下所示:
在文末可下載的源碼中,AvaloniaRender 類就實現了 ISysRender 接口。由於代碼量較大,這裏就不貼出來了,大家可自行參看。
第二個參數 IRenderDataProvider 用於在 IChatRender 渲染時,能從該接口獲取必要的信息(如用戶的頭像、名稱、表情圖片等)。
第三個參數 則是要在其表面進行渲染的UI控件。
四. 擴展自定義消息渲染
如果需要渲染自定義的消息,可以調用 IChatRender 的 AddChatItemCustomized 方法插入要渲染的自定義消息。
/// <summary> /// 插入要渲染的自定義消息。 /// </summary> void AddChatItemCustomized(IChatItem item, int? index = null);
自定義的消息可以從 BaseChatItem 繼承,然後override複寫其幾個方法就可以了。具體可以參見文末demo源碼中的自定義消息渲染的實現。
五. Demo 源碼下載
ChatRenderDemo 源碼鏈接 1: Linux 端(Avalonia) 源碼
ChatRenderDemo 源碼鏈接 2: Windows 端 + Linux 端 源碼
源碼解決方案中包括三個項目:
(1)ChatRenderDemo.WPF: 該Demo的Windows端(基於WPF)。
(2)ChatRenderDemo.WinForm: 該Demo的Windows端(基於WinForm)。
(3)ChatRenderDemo.Linux: 該Demo的Linux客戶端(基於.NetCore),支持在統信UOS、銀河麒麟等國產OS上運行。
注:Linux 端內置的是x86/x64非託管so庫,若需要其它架構的so,可以評論區留下email,到時我會發給大家。