Post

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

数据转换过程 Postbox.MessageMessageHistoryEntryChatHistoryViewTransitionInsertEntry + ChatHistoryViewTransitionUpdateEntry

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

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

preparedChatHistoryViewTransitionChatHistoryViewTransitionUpdateEntry + ChatHistoryViewTransitionInsertEntry

mappedChatHistoryViewListTransitionmappedInsertEntriesChatMessageItemImplListViewInsertItem

mappedChatHistoryViewListTransitionmappedUpdateEntriesChatMessageItemImplListViewUpdateItem

enqueueHistoryViewTransitiondequeueHistoryViewTransitions()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

ChatMessageItemImplChatMessageItemListViewItem(类似UITableViewCell的数据和配置部分)

ListMessageItem

ChatBotInfoItem

ChatUserInfoItem

三、配置InsertItem.item对应的Node + 调用asyncLayout ChatMessageItemImpl.nodeConfiguredForParamslet 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.