如何从javascript正确地与liveview通信

Question

在启动Javascript事件后，我正在尝试用Javascript更新Liveview。Liveview必须显示一个<div>元素，其中包含一些从Javascript发送的值。

我的问题是：我应该如何将这些值从Javascript传递到Liveview？

我可能还需要Liveview在Javascript中发送的值。再次：我应该如何将这些值从Liveview传递到Javascript？

有一个用Javascript创建的Livesocket可以让liveview工作，但我看不到从那里获取或设置赋值的方法。从Liveview向Liveview传递值的唯一方法似乎是在某个时刻通过DOM。例如：

<div id="lv-data" phx-hook="JavascriptHook"></div>

let hooks = {};
hooks.JavascriptHook = {
mounted(){
this.el.addEventListener("jsEvent", (e) => 
this.pushEvent("jsEventToPhx", e.data, (reply, ref) => 
console.log("not sure what to do here")));
this.handleEvent("phxEventToJS", (payload) => console.log("data received: " + payload));
}
}

为了纯粹的数据交换，必须使用带有伪<div>的DOM，这感觉很奇怪。。。

Answer 1

您的LiveView模块是否实现为处理从前端发送的jsEventToPhx事件？您必须有一个父级LiveView或LiveViewComponent来实现此消息的handle_event/3回调。参见：

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#c:handle_event/3

例如(在LiveView模块中(：

def handle_event("jsEventToPhx", params, socket) do
# Here the `params` variable is what you are sending form the
# client-side, so it will be `%{foo: "bar"}` if you
# follow the next example.
{:reply, %{hello: "world"}, socket}
end 

然后在你的钩子里，你只需要使用this.pushEvent:

let hooks = {};
hooks.JavascriptHook = {
mounted(){
this.pushEvent("jsEventToPhx", {foo: "bar"}, (reply, ref) => 
// this will print `{hello: "world"}` 
console.log(reply)
);
}
}

当您希望将数据发送到LiveView并选择性地立即接收响应时，就是这种方法。

如果您想从LiveView向客户端发送一些内容，那么流程略有不同。在LiveView中，当从任何handle_event回调返回套接字时，都可以使用push_event，例如：

{:noreply, push_event(socket, "phxEventToJS", %{abc: "xyz"})}

在你的Hook中，你订阅了活动：

mounted(){
this.pushEvent("jsEventToPhx", {foo: "bar"}, (reply, ref) => 
// this will print `{hello: "world"}` 
console.log(reply);
}
this.handleEvent("phxEventToJS", (payload) => {
// this will print `{abc: "xyz"}`
console.log(payload);
}
}

在此处检查客户端-服务器通信部分可能很有用。