Phoenix real-time trigger page change

Phoenix Forum Questions / Help
, ,
1

I am building a simple Phoenix app to learn Phoenix. I have a page that displays a crypto currency payment request. On the backend I can see when the user has paid and I want to automatically advance the UI to the payment confirmation page.

Should I be using channels or presence here? Or is there a simpler implementation? (I am not a web dev, so I’m not really sure where I should be going here) My one requirement is that I want the page advance to happen very quickly after the payment is detected.

2

:wave:

I’d use channels.

Let’s suppose your channel name is "payment:1234" where 1234 is the payment id, then once you receive the confirmation, you can

YourApp.Endpoint.broadcast("payment:1234", "state_change", %{new_state: :confirmed})

and on the client you’d react to it by updating the UI somehow

let channel = socket.channel("payment:1234");
// ... etc
channel.on("state_change", p => {
  switch (p.new_state) {
    case "confirmed":
       updateUI("confirmed");
       bread;
    // etc
  }
});
2 Likes
3

This could also be an opportunity to try out live view!

2 Likes