{"id":2473,"date":"2025-12-24T11:33:00","date_gmt":"2025-12-24T03:33:00","guid":{"rendered":"https:\/\/womeifei.cn\/?p=2473"},"modified":"2025-12-24T14:55:52","modified_gmt":"2025-12-24T06:55:52","slug":"write-records-06","status":"publish","type":"post","link":"https:\/\/womeifei.cn\/index.php\/2025\/12\/24\/write-records-06\/","title":{"rendered":"Write Records – 06"},"content":{"rendered":"\n

Langgraph\u6846\u67b6<\/h2>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
const processingSteamChunks = useCallback(\n    async (stream: AsyncGenerator<{ data: any; event: string }>) => {\n      \/\/ \u5faa\u73af\u8bfb\u53d6\u6bcf\u4e00\u5757\u6570\u636e\uff08SDK\u5df2\u7ecf\u5e2e\u4f60\u5207\u5206\u597d\u4e86\uff09\n      for await (const { data, event } of stream) {\n        \n        \/\/ === \u5206\u9891\u9053\u5904\u7406\u903b\u8f91 ===\n\n        \/\/ \u9891\u9053 A: metadata (\u83b7\u53d6 Run ID)\n        if (event === \"metadata\") {\n           setRunId(data?.run_id as string);\n        }\n\n        \/\/ \u9891\u9053 B: values (\u6700\u6838\u5fc3\u7684\u5bf9\u8bdd\u6570\u636e)\n        if (event === \"values\") {\n           \/\/ 1. \u5904\u7406\u4e2d\u65ad\u903b\u8f91 (__interrupt__)\n           if (\"__interrupt__\" in data) {\n               \/\/ ... \u66f4\u65b0 setChatBlocks ...\n           }\n\n           \/\/ 2. \u5904\u7406\u6b63\u5e38\u5bf9\u8bdd\u6d88\u606f\n           const messages = (data as { messages?: Message[] })?.messages as Message[];\n           messages.forEach((message) => {\n               \/\/ \u26a0\ufe0f \u6ce8\u610f\u8fd9\u91cc\uff1agetObject4Data \u5c31\u662f\u4e3a\u4e86\u89e3\u51b3\u6211\u4e4b\u524d\u8bf4\u7684\u201c\u53cc\u91cd\u5e8f\u5217\u5316\u201d\u5751\n               const content = getObject4Data(message.content); \n               \n               \/\/ ... \u66f4\u65b0 setStreamContent, setStartTime ...\n               \n               \/\/ \u66f4\u65b0 UI \u4e0a\u7684 Blocks (\u6298\u53e0\u6846\u3001Markdown \u7b49)\n               sessionData.blocks.forEach((block) => {\n                   setChatBlocks((prev) => { ... })\n               });\n           });\n        }\n\n        \/\/ \u9891\u9053 C: custom (\u81ea\u5b9a\u4e49\u4e8b\u4ef6)\n        if (event === \"custom\") {\n           \/\/ ... \u66f4\u65b0 setChatBlocks ...\n        }\n      }\n    },\n    [...]\n);<\/code><\/pre>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\u6b65\u9aa4\u603b\u7ed3(\u4ece\u70b9\u51fb\u6309\u94ae\u5f00\u59cb\u5230UI\u5c55\u793a\u51fa\u6765)<\/h2>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\u6570\u636e\u7684\u4e00\u751f<\/h2>\n\n\n\n
\u6b65\u9aa4<\/strong><\/td>\u8d1f\u8d23\u89d2\u8272<\/strong><\/td>\u6838\u5fc3\u52a8\u4f5c<\/strong><\/td>\u4f60\u7684\u4ee3\u7801\u4f4d\u7f6e<\/strong><\/td><\/tr><\/thead>
1<\/strong><\/td>User<\/td>\u70b9\u51fb\u53d1\u9001<\/td>UI Button<\/td><\/tr>
2<\/strong><\/td>ThreadContext<\/td>\u7ec4\u88c5 JSON\uff0c\u53d1\u8d77 POST<\/td>handleSubmit<\/code><\/td><\/tr>
3<\/strong><\/td>Proxy<\/td>\u8f6c\u53d1\u8bf7\u6c42\u5230\u8fdc\u7a0b<\/td>vite.config.js<\/code><\/td><\/tr>
4<\/strong><\/td>Backend<\/td>\u601d\u8003\u3001\u751f\u6210 Event<\/td>(Python Code)<\/td><\/tr>
5<\/strong><\/td>ThreadContext<\/td>\u89e3\u6790\u6d41\uff0c\u63d0\u53d6 Block<\/strong><\/td>processingSteamChunks<\/code><\/td><\/tr>
6<\/strong><\/td>ChatContext<\/td>\u5b58\u50a8 Block \u5230\u6570\u7ec4<\/strong><\/td>setChatBlocks<\/code><\/td><\/tr>
7<\/strong><\/td>ChatItem<\/td>\u6570\u7ec4\u8f6c\u6811\uff0c\u7ec4\u4ef6\u6620\u5c04<\/strong><\/td>childrenByParentId<\/code><\/td><\/tr>
8<\/strong><\/td>Browser<\/td>\u6eda\u52a8\u5230\u5e95\u90e8<\/td>scrollToBottom<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Langgraph\u548cLangChain<\/h2>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\u6982\u5ff5<\/strong><\/td>LangChain (\u65e7)<\/strong><\/td>LangGraph (\u65b0)<\/strong><\/td>\u524d\u7aef\u5bf9\u5e94\u7684\u6982\u5ff5<\/strong><\/td><\/tr><\/thead>
\u6838\u5fc3\u7ed3\u6784<\/strong><\/td>Chain (\u94fe)<\/td>Graph (\u56fe)<\/td>\u7ebf\u6027\u4ee3\u7801 vs \u72b6\u6001\u673a (XState)<\/td><\/tr>
\u6570\u636e\u6d41<\/strong><\/td>\u53c2\u6570\u900f\u4f20 (Props drilling)<\/td>State Schema (\u5171\u4eab\u72b6\u6001)<\/strong><\/td>React Context \/ Redux<\/td><\/tr>
\u8bb0\u5fc6\u673a\u5236<\/strong><\/td>\u7b80\u5355\u7684 Memory List<\/td>Thread \/ Checkpoint<\/strong><\/td>Redux Persist \/ \u6570\u636e\u5e93<\/td><\/tr>
\u8fd0\u884c\u6a21\u5f0f<\/strong><\/td>\u4e00\u53e3\u6c14\u8dd1\u5b8c<\/td>Step by Step (\u53ef\u4e2d\u65ad)<\/strong><\/td>Generator \u51fd\u6570 \/\u65ad\u70b9\u8c03\u8bd5<\/td><\/tr>
\u9002\u7528\u573a\u666f<\/strong><\/td>\u7b80\u5355\u95ee\u7b54\u3001\u7ffb\u8bd1<\/td>\u590d\u6742 Agent\u3001\u591a\u8f6e\u4ea4\u4e92<\/strong><\/td>\u7b80\u5355\u7684\u5c55\u793a\u9875 vs \u590d\u6742\u7684\u7ba1\u7406\u7cfb\u7edf<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Langgraph\u8fd0\u884c\u903b\u8f91<\/h2>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"
Langgraph\u6846\u67b6 \u6b65\u9aa4\u603b\u7ed3(\u4ece\u70b9\u51fb\u6309\u94ae\u5f00\u59cb\u5230UI\u5c55\u793a\u51fa\u6765) \u6570\u636e\u7684\u4e00\u751f \u6b65\u9aa4 \u8d1f\u8d23\u89d2\u8272 \u6838\u5fc3\u52a8\u4f5c \u4f60\u7684\u4ee3 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2473","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/2473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/comments?post=2473"}],"version-history":[{"count":4,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/2473\/revisions"}],"predecessor-version":[{"id":2511,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/2473\/revisions\/2511"}],"wp:attachment":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/media?parent=2473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/categories?post=2473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/tags?post=2473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}