快捷導(dǎo)航

C#實(shí)現(xiàn)聊天消息渲染與圖文混排詳解

更新時(shí)間：2023年02月06日 15:48:44 作者：zhuweisky

在實(shí)現(xiàn)聊天軟件時(shí)，渲染文字表情圖文混排是一項(xiàng)非常繁瑣的工作，再加上還要支持GIF動(dòng)圖、引用消息、撤回消息、名片等不同樣式的消息渲染時(shí)，就更加麻煩了。本文就來(lái)和大家分享一下具體實(shí)現(xiàn)方法，希望對(duì)大家有所幫助

好在我們可以使用 ESFramework 提供的 IChatRender 組件，使用它我們就能輕松實(shí)現(xiàn)類(lèi)似于微信聊天消息的渲染效果。IChatRender 支持 Windows、Linux（包括國(guó)產(chǎn)OS）。在Windows平臺(tái)上提供了基于 WinForm 和基于 WPF 的實(shí)現(xiàn)，在Linux上則是基于.NET Core 實(shí)現(xiàn)的。

廢話(huà)不多說(shuō)，先上張渲染Demo的效果圖（該Demo源碼可于文末下載）：

效果還不錯(cuò)吧！下面我們就簡(jiǎn)單介紹下如何使用 IChatRender 實(shí)現(xiàn)上圖所展示的渲染效果，大家下載源碼對(duì)照著看，會(huì)更容易理解。

一.支持的聊天消息類(lèi)型

IChatRender 支持渲染的聊天消息類(lèi)型包括：

（1）文本表情混排。

（2）圖片，GIF 動(dòng)圖。

（3）文件傳輸進(jìn)度及控制。

（4）個(gè)人名片、群名片。

（5）引用消息。

（6）語(yǔ)音消息。

（7）語(yǔ)音通話(huà)。

（8）視頻通話(huà)。

（9）撤回消息、刪除消息。

二.IChatRender 接口定義

IChatRender 接口的定義具體如下所示：

/// <summary>
        /// 渲染名片 
        /// </summary>
        /// <param name="msgID">聊天記錄ID</param>
        /// <param name="userID">發(fā)送者</param>
        /// <param name="cardUserID">名片上的個(gè)人ID</param>
        /// <param name="index">插入聊天記錄的位置，默認(rèn)是放到最后面</param>
        void AddChatItemCard(string msgID ,string userID, string cardUserID ,int? index = null);

        /// <summary>
        /// 渲染文件 
        /// </summary> 
        /// <param name="fileName">文件名稱(chēng)</param>
        /// <param name="fileSize">文件大小</param>
        /// <param name="state">文件狀態(tài)</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">默認(rèn)傳null</param> 
        void AddChatItemImage(string msgID, string userID, object image, Size imgSize ,IProgressObserverable observerable = null, int? index = null);

        /// <summary>
        /// 渲染文本表情
        /// </summary> 
        /// <param name="text">內(nèi)容，在渲染文本的內(nèi)容中用 [000]來(lái)代表第一個(gè)表情，[001]即是二個(gè)表情，以此類(lèi)推</param>
        /// <param name="referenced">引用內(nèi)容可以是文本、圖片、文件或名片</param>
        /// <param name="textColor">文字顏色</param> 
        void AddChatItemText(string msgID, string userID, string text, ReferencedChatMessage referenced = null, Color? textColor = null, int? index = null);

        /// <summary>
        /// 渲染悄悄話(huà)，默認(rèn)顯示內(nèi)容—>> 悄悄話(huà)
        /// </summary> 
        void AddChatItemSnap(string msgID, string userID, int? index = null);

        /// <summary>
        /// 渲染語(yǔ)音消息
        /// </summary> 
        /// <param name="audioMessageSecs">語(yǔ)音時(shí)長(zhǎng)</param>
        /// <param name="audioMessage">語(yǔ)音短信</param> 
        void AddChatItemAudio(string msgID, string userID, int audioMessageSecs, object audioMessage, int? index = null);

        /// <summary>
        /// 渲染多媒體通話(huà)類(lèi)型
        /// </summary> 
        /// <param name="duration">通話(huà)時(shí)長(zhǎng)</param>
        /// <param name="isAudioCommunicate">通話(huà)類(lèi)型(語(yǔ)音/視頻)</param> 
        void AddChatItemMedia(string msgID, string userID, string duration, bool isAudioCommunicate, int? index = null); 

        /// <summary>
        /// 渲染系統(tǒng)消息
        /// </summary>
        /// <param name="msg">系統(tǒng)消息內(nèi)容</param> 
        void AddChatItemSystemMessage(string msg, int? index = null);

        /// <summary>
        /// 渲染消息的發(fā)送時(shí)間
        /// </summary>
        /// <param name="dt">發(fā)送時(shí)間</param> 
        void AddChatItemTime(DateTime dt, int? index = null);   

        /// <summary>
        /// 自己撤回消息 
        /// </summary> 
        void RecallChatMessage(string msgID);

        /// <summary>
        /// 其他用戶(hù)撤回消息 
        /// </summary> 
        /// <param name="operatorName">操作者</param>
        void RecallChatMessage(string msgID ,string operatorName);

        /// <summary>
        /// 刪除對(duì)應(yīng)的記錄
        /// </summary> 
        void RemoveChatMessage(string msgID);

三. 創(chuàng)建 IChatRender 實(shí)例

可以通過(guò)調(diào)用ESFramework.Extensions.ChatRendering.ChatRenderFactory 的靜態(tài)方法 CreateChatRender 創(chuàng)建一個(gè) IChatRender 實(shí)例。

/// <param name="provider">提供必要的信息給聊天渲染器</param>
        /// <param name="ctrl">要在其表面渲染的UI控件</param>
        /// <param name="myID">自己的ID</param>
        /// <param name="destID">對(duì)方ID、或群ID</param>
        /// <param name="isGroup">群聊/單聊</param>
        /// <returns></returns>
        public static IChatRender CreateChatRender(IRenderDataProvider provider, IChatControl ctrl, string myID, string destID, bool isGroup);

第一個(gè)參數(shù) IRenderDataProvider 用于在 IChatRender 渲染時(shí)，能從該接口獲取必要的信息（如用戶(hù)的頭像、名稱(chēng)、表情圖片等）。

第二個(gè)參數(shù) 則是要在其表面進(jìn)行渲染的UI控件。