When implementing chat software, it is a very cumbersome job to render text, emoticons, and graphics. In addition, it is even more troublesome when it is necessary to support the rendering of different styles of messages such as GIF animations, quote messages, recall messages, and business cards. .
Fortunately, we can use the IChatRender component provided by ESFramework, with which we can easily achieve a rendering effect similar to WeChat chat messages. IChatRender supports Windows, Linux (including domestic OS). WinForm-based and WPF-based implementations are provided on the Windows platform, and .NET Core-based implementations are provided on Linux.
Without further ado, let’s first upload a rendering of the Demo (the source code of the Demo can be downloaded at the end of the article):
Chat message rendering example
The effect is not bad! Below we will briefly introduce how to use IChatRender to achieve the rendering effect shown in the above figure. It will be easier to understand if you download the source code and compare it.
1. Supported chat message types
The chat message types supported by IChatRender include:
(1) Text expressions are mixed.
(2) Pictures, GIF animations.
(3) File transfer progress and control.
(4) Personal business card and group business card.
(5) REFERENCES.
(6) Voice messages.
(7) Voice calls.
(8) VIDEO CALLS.
(9) Withdraw messages and delete messages.
2. IChatRender interface definition
The definition of the IChatRender interface is as follows:
/// <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);3. Create an instance of IChatRender
An instance of IChatRender can be created by calling the static method CreateChatRender of ESFramework.Extensions.ChatRendering.ChatRenderFactory.
/// <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(IRenderDataProvider provider, IChatControl ctrl, string myID, string destID, bool isGroup); The first parameter IRenderDataProvider is used to obtain the necessary information (such as the user's avatar, name, emoticon, etc.) from this interface when rendering in IChatRender.
The second parameter is the UI control to render on its surface.
4. Demo source code download
ChatRenderDemo source code link: Windows side + Linux side source code
The source code solution includes three projects:
(1) ChatRenderDemo.WPF: The Windows side of the Demo (based on WPF).
(2) ChatRenderDemo.WinForm: The Windows side of the Demo (based on WinForm).
(3) ChatRenderDemo.Linux: The Demo's Linux client (based on .NetCore) supports running on domestic OS such as Tongxin UOS and Yinhe Kirin.
Note: The built-in x86/x64 unmanaged so library on the Linux side, if you need so of other architectures, you can leave an email in the comment area, and I will send it to everyone.