Post

Telegram研究:聊天页面数据转换流程

数据转换过程 Postbox.Message → MessageHistoryEntry → ChatHistoryViewTransitionInsertEntry + ChatHistoryViewTransitionUpdateEntry

→ ChatMessageItemImpl (类似UITableView里的datasource)→ ListViewInsertItem + ListViewUpdateItem →ChatMessageBubbleItemNode(类似UITableViewCell)

ChatHistoryListNodeImpl.beginChatHistoryTransitions(...)数据转换为insertItem

preparedChatHistoryViewTransition → ChatHistoryViewTransitionUpdateEntry + ChatHistoryViewTransitionInsertEntry →

mappedChatHistoryViewListTransition → mappedInsertEntries → ChatMessageItemImpl → ListViewInsertItem

mappedChatHistoryViewListTransition → mappedUpdateEntries → ChatMessageItemImpl →ListViewUpdateItem

enqueueHistoryViewTransition → dequeueHistoryViewTransitions() → self.transaction(类似UITableView.reloadData())

ChatMessageItemImpl.nodeConfiguredForParams → ChatMessageBubbleItemNode(类似UITableViewCell)

MessageHistoryView.entries → [MessageHistoryEntry] → entry[message:Postbox.Message+isRead+attributes] → Postbox.Message.text 文本内容

二、配置InsertItem及item ChatHistoryListNode.swift

entry转insertEntry: ChatHistoryViewTransitionInsertEntry(index, entry…)

insertEntry转insertItem: → mappedInsertEntries → item = ChatMessageItemImpl(xxxx) → ListViewInsertItem(index: , item: xxx, directionHint: )

每个item都会对应一个Node

ChatMessageItemImpl → ChatMessageItem → ListViewItem(类似UITableViewCell的数据和配置部分)

ListMessageItem

ChatBotInfoItem

ChatUserInfoItem

三、配置InsertItem.item对应的Node + 调用asyncLayout ChatMessageItemImpl.nodeConfiguredForParams → let node = (viewClassName as! ChatMessageItemView.Type).init(rotated: self.controllerInteraction.chatIsRotated)

ChatMessageBubbleItemNode: ChatMessageItemView → ListViewItemNode (类似UITableView的UI部分)

viewClassName = ChatMessageAnimatedStickerItemNode.self(视频贴纸1、动图贴纸3、骰子1、动画emoji1)

viewClassName = ChatMessageStickerItemNode.self(大emoji、贴纸)

viewClassName = ChatMessageBubbleItemNode.self (默认、一般视频、多媒体、过期)

nodeConfiguredForParams → node = xxx() + node.asyncLayout()

updateNode→ odeValue.asyncLayout()

四、node更新及布局 ChatMessageBubbleItemNode → asyncLayout → ChatMessageBubbleItemNode.beginLayout(约2000行) → ChatMessageBubbleItemNode.applyLayout(约1400行)

internalUpdateLayout → asyncLayout → ….

This post is licensed under CC BY 4.0 by the author.