这是一篇关于作者构建的工具 OmniMessage 的发布文章,旨在解决客户端 - 服务器状态同步问题。
- 语言与框架:OmniMessage 用 Gleam 编写,它可编译为 Erlang 和 JavaScript,是 Lustre 的扩展。Gleam 是一种具有 C 风格语法的函数式语言,其网站称它为博客应用 Nestful 提供动力,作者正逐步用 Gleam 重写 Nestful。
- Lustre 介绍:Lustre 是 Model-View-Update 框架,可在服务器(如 LiveView)和客户端(如 Elm)运行。通过一个计数器示例展示了 Lustre 的基本用法,包括定义模型、消息和更新函数,以及创建用户界面。视图函数是纯函数,便于 hydration(水合作用),确保应用的确定性。
- 构建聊天应用:以构建一个简单的聊天应用为例,展示了在 Lustre 中管理状态的好处。包括定义聊天消息模型、消息类型(如用户更新草稿、发送聊天消息等)、更新函数和视图函数。通过使用
effect
处理副作用,如发送消息后的清理操作和滚动到最新消息。还介绍了如何使用use
和element.keyed
等特性来简化代码。 - 客户端 - 服务器通信:在客户端处理聊天消息的基础上,添加了与服务器的通信。使用
lustre_http
库发送 HTTP POST 请求到服务器的/chat-message
路径,并处理服务器的响应。当服务器收到消息时,会更新客户端的聊天消息状态。为了提高效率,将聊天消息状态改为字典存储。在init
函数中添加了获取初始聊天消息的功能。 - 引入 OmniMessage:OmniMessage 是一个库,用于解决将聊天消息功能移到服务器时的问题。它由客户端的 Lustre 扩展和服务器端的实用程序组成,可以使一部分消息在客户端和服务器端同时调度,实现更流畅的 RPC。通过设置 OmniMessage,原始的 Lustre 应用可以重用之前编写的客户端消息,服务器会在收到消息时回复并覆盖客户端的“发送中”聊天消息。
- 服务器示例:展示了在 Gleam 服务器中使用 OmniMessage 的示例,包括简单的消息处理函数和在 HTTP 服务器及 WebSocket 中的使用方式。还介绍了如何使用 Lustre 服务器组件来处理更复杂的应用。
- OmniMessage 的愿景:OmniMessage 仍在发展中,其愿景是成为 Zen 状态管理 trifecta 的最后一块拼图,即解决客户端状态(由 MVU 解决)、服务器状态(由服务器组件/LiveView 方法解决)和混合状态(由 OmniState 解决)。当单个 party 是真相来源时,OmniMessage 效果最佳,可避免复杂的状态合并。
- 资源与链接:完整的工作代码可在 OmniMessage 仓库获取,包括服务器和客户端的相关文档链接。同时推荐查看 Nestful 应用,它用 Gleam 编写且有独特的时间管理方式。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。