# Phoenix + LiveView (Elixir/BEAM) Phoenix 基于 Elixir 和 BEAM VM 构建，可使用最少的 JavaScript 提供容错的实时 Web 应用程序。 LiveView 在服务器上保留 UI 状态，同时通过 WebSocket 传输 HTML 差异。 BEAM 提供轻量级进程、监督树、热代码升级和软实时调度。 **关键想法** * OTP 监督使 Web、数据和后台进程保持隔离和可重启。 * 上下文对 Ecto 模式和查询周围的域边界（例如帐户、计费）进行编码。 * LiveView 在服务器上呈现 HTML，使用最少的客户端代码通过 WebSocket 同步 UI 状态。 * PubSub + Presence 支持扇出更新、跟踪和协作功能。 ** ** ## 环境和项目设置 # Erlang + Elixir 通过 asdf （推荐） asdf安装erlang 27.0 asdf 安装 Elixir 1.17.3 asdf 全局 Erlang 27.0 Elixir 1.17.3 # 安装 Phoenix 生成器 mix archive.install hex phx_new # 使用 LiveView + Ecto + esbuild 创建项目混合 phx.new my_app --live cd my_app 混合 deps.get 混合 ecto.create 混合 phx.server 项目布局（重点）： * `lib/my_app/application.ex` — OTP 监督树（Repo、Endpoint、Telemetry、PubSub、Oban 等） * `lib/my_app_web/endpoint.ex` — 端点、插头、插座、LiveView 配置 * `lib/my_app_web/router.ex` — 管道、范围、路由、LiveSessions * `lib/my_app/` — 上下文（域模块）和 Ecto 模式 * `test/support/{conn_case,data_case}.ex` — 测试 Ecto + Phoenix 的助手 ** ** ## BEAM + OTP 要点 **监督树（application.ex）**：保留矮小的、孤立的孩子。 def start(_type, _args) 做孩子们 = [ 我的应用程序.Repo, {Phoenix.PubSub，名称：MyApp.PubSub}， MyAppWeb.Endpoint， {奥本，Application.fetch_env！(:my_app，奥本)}， MyApp.Metrics ] Supervisor.start_link（子级，策略：：one_for_one，名称：MyApp.Supervisor）结束 **GenServer 模式**：包装有状态服务。 defmodule MyApp.Counter 做使用GenServer def start_link(initial \\ 0), do: GenServer.start_link(__MODULE__, 初始, 名称: __MODULE__) defincrement(), do: GenServer.call(__MODULE__, :inc) @impl true def handle_call(:inc, _from, state) 做新状态 = 状态 + 1 {：回复，新状态，新状态} 结束结束 **BEAM 原则** * 喜欢许多小流程；流程成本低廉且孤立。 * 通过明确的重启策略来监督一切。 * 使用消息传递（`GenServer.cast`/`send`）来避免共享状态。 * 使用ETS/Cachex进行内存缓存；让他们受到监督。 ** ** ## Phoenix 解剖和路由 **管道和范围 (router.ex)** ：将浏览器/api 问题分开。 defmodule MyAppWeb.Router 做使用 MyAppWeb，：路由器管道：浏览器做插头：接受，[“html”] 插件：fetch_session 插件：fetch_live_flash 插头：protect_from_forgery 插件：put_secure_browser_headers 插件：fetch_current_user 结束管道：api 做插头：接受，[“json”] 结束范围“/”，MyAppWeb 做 pipeline_through ：浏览器直播“/”，HomeLive 资源“/users”，UserController 结束范围“/api”，MyAppWeb 做管道通过：api 资源“/users”，Api.UserController，除了：[:new, :edit] 结束结束 **插件**：可组合的请求中间件。保持插头纯净、短小；横切时更喜欢使用管道插头而不是控制器插头。 ** ** ## 上下文和 Ecto **架构+变更集** defmodule MyApp.Accounts.User 做使用Ecto.Schema 导入 Ecto.Changeset 模式“用户”做字段：电子邮件，：字符串字段：散列密码，：字符串字段：confirmed_at，：naive_datetime 时间戳() 结束 def Registration_changeset(用户, attrs) 做用户 |> 演员（属性，[：电子邮件，：密码]） |> validate_required([:电子邮件, :密码]) |> validate_format(:电子邮件, ~r/@/) |> validate_length(:密码，最小值：12) |> unique_constraint(:电子邮件) |> put_password_hash() 结束 defp put_password_hash(%{有效?: true} = 变更集), 执行： put_change(changeset, :hashed_password, Argon2.hash_pwd_salt(get_change(changeset, :password))) defp put_password_hash(changeset), 执行：changeset 结束 **上下文API** defmodule MyApp.Accounts 做导入 Ecto.Query，警告： false 别名 MyApp.{Repo, Accounts.User} def list_users，执行：Repo.all(User) def get_user!(id), do: Repo.get!(User, id) def register_user(attrs) 做 %用户{} |> User.registration_changeset(attrs) |> Repo.insert() 结束结束 **与 Ecto.Multi 的交易** 别名 Ecto.Multi def register_and_welcome(attrs) 做多.new() |> Multi.insert(:user, User.registration_changeset(%User{}, attrs)) |> Multi.run(:welcome_email, fn _repo, %{用户: 用户} -> MyApp.Mailer.deliver_welcome（用户） {：好的，：已发送} 结束） |> Repo.transaction() 结束 ** ** ## 实时查看模式 **LiveView 模块（服务器上有状态的 UI）** defmodule MyAppWeb.CounterLive 做使用 MyAppWeb，：live_view def mount(_params, _session, socket) 做 {：好的，分配（套接字，计数：0）} 结束 def handle_event("inc", _params, socket) 做 {:noreply, update(socket, :count, &(&1 + 1))} 结束 def 渲染（分配）做〜H“”“

计数：<%= @count %>

”“” 结束结束 **HEEx 提示** * 更喜欢“assign_new/3”，以便在每个连接的会话中仅延迟计算一次昂贵的数据。 * 对大型列表使用“stream/3”以最小化差异负载。 * 处理 URL 驱动状态的 `handle_params/3` 中的参数；避免将套接字状态存储在参数中。 **实时组件** defmodule MyAppWeb.NavComponent 做使用 MyAppWeb, :live_component def 渲染（分配）做〜H“”“ <导航> <%= 对于项目 <- @items do %> <.link navigation={item.href}><%= item.label %> <％结束％> ”“” 结束结束 **PubSub 驱动的 LiveView** @impl true def mount(_params, _session, socket) 做如果已连接？（套接字），执行：Phoenix.PubSub.subscribe(MyApp.PubSub, "orders") {：好的，分配（套接字，订单：[]）} 结束 @impl true def handle_info({:order_created, order}, socket) 做 {:noreply, update(socket, :orders, fn 订单 -> [订单 | 订单] end)} 结束 ** ** ## PubSub、频道和状态 **广播上下文的变化** def create_order(attrs) 做与 {:ok, order} <- %Order{} |> Order.changeset(attrs) |> Repo.insert() 一起做 Phoenix.PubSub.broadcast(MyApp.PubSub, "订单", {:order_created, 订单}) {：好的，订购} 结束结束 **在线/打字指示器的存在** defmodule MyAppWeb.RoomChannel 做使用凤凰频道别名 Phoenix.Presence def join("房间:" <> room_id, _payload, socket) 做发送（自我（），：after_join） {：好的，分配（套接字，：room_id，room_id）} 结束 def handle_info(:after_join, socket) 做 Presence.track(socket, socket.assigns.user_id, %{online_at: System.system_time(:second)}) 推送（套接字，“存在状态”，存在.列表（套接字）） {:norply, 套接字} 结束结束 **安全性**：在`join/3`中授权主题，验证params/session中的用户令牌，并限制有效负载大小。 ** ** ## 测试 Phoenix + LiveView 将“mix test”与生成的帮助程序一起使用。 # 测试/支持/conn_case.ex 使用 MyAppWeb.ConnCase，async: true 测试“渲染主页”，%{conn: conn} 执行康恩 = 获取（康恩，“/”）断言 html_response(conn, 200) =~ “欢迎” 结束 # 直播测试使用 MyAppWeb.ConnCase，async: true 导入 Phoenix.LiveViewTest 测试“计数器增量”，%{conn: conn} 执行 {:ok, view, _html} = live(conn, "/counter") 视图 |> 元素（“按钮”，“增量”）|> render_click（）断言渲染（视图）=〜“计数：1” 结束 **DataCase** ：提供沙盒数据库连接；将测试包装在事务中以隔离数据。 **Fixtures** ：使用“ExMachina”或“test/support/fixtures”下的简单帮助模块构建工厂。 ** ** ## 性能、操作和部署 * **遥测** ：Phoenix 公开事件（`[:phoenix, :endpoint, ...]`）。通过`:telemetry_poller`、`OpentelemetryPhoenix`和`OpentelemetryEcto`导出。 * **Assets** ： `mix asset.deploy` 运行 npm install、esbuild、tailwind（如果配置）和摘要。 * **发布**：`MIX_ENV=产品混合版本`。在`config/runtime.exs`中配置运行时环境。从 `PHX_SERVER=true _build/prod/rel/my_app/bin/my_app start` 开始。 * **集群** ：添加 `libcluster` 和 DNS/epmd 策略以实现水平扩展；使用分布式 PubSub/Presence。 * **缓存** ：使用 ETS/Cachex 作为热路径；更喜欢短 TTL 并在写入时失效。 * **后台作业** ：Oban 用于重试/退避；在应用程序树中对其进行监督。 * **热路径检查** ：启用 `:telemetry` 指标，检查 LiveView 差异大小，避免大型分配；更喜欢溪流。 ** ** ## 常见陷阱 * 在“connected?/1”检查后忘记将 LiveView 订阅到 PubSub — 初始渲染时将错过事件。 * 在 LiveView 渲染中做繁重的工作；移动到上下文并预计算分配。 * 不使用 `Ecto.Multi` 进行多步写入；失败会留下部分状态。 * 阻塞具有长 NIF 或繁重 CPU 工作的 BEAM 调度程序；卸载到港口/奥本作业。 * 在没有监督或限制的情况下过度使用全球碳排放交易体系；泄漏内存。 ** ** ## 参考命令 * `mix phx.routes` — 列出路线和 LiveView 路径。 * `mix phx.gen.live Accounts User users email:string returned_at:naive_datetime` — 生成 LiveView CRUD（随后检查上下文边界）。 * `mix format && mix credo --strict` — 格式化和 linting。 * `mix test --seed 0 --max-failures 1` — 确定性失败；与“mix test.watch”配对。当域逻辑保留在上下文中、LiveView 保持精简且 BEAM 监督每个组件的弹性时，Phoenix + LiveView 会表现出色。

凤凰城直播

包含技能