Realtime communication between Phoenix LiveView and Flutter

My approach would be to create a Phoenix channel in the backend for the mobile app, and then send notifications to this channel from wherever in your code you need to sync web with mobile.

defmodule Tasks.Todos.Api.Broadcast.Sender do

  require Logger

  def broadcast_change({:ok, data} = result, %Tasks.Todos.Types.Event{} = event) do

    Logger.warn("broadcast_change/4 Broadcast a result for: %{event: #{event.type}, action: #{event.action}, origin: #{event.origin}}")

    Enum.each(
      event.broadcast_topics,
     # You may want to adjust the broadcast as per your needs
      fn topic -> Phoenix.PubSub.broadcast_from(Tasks.PubSub, self(), topic, {event, data}) end
    )

    result
  end

  def broadcast_change(error, %Tasks.Todos.Types.Event{} = _event), do: error

end

The event type:

defmodule Tasks.Todos.Types.Event do

  use Domo

  typedstruct do
    field :type, :todo | :backlog
    field :target, :todo | :backlog | :all
    field :action, :add | :update | :move | :duplicate | :delete
    field :origin, atom()
    field :broadcast_topics, list(), default: []
    field :context, map(), default: %{}
  end

end

Then you can send notifications from anywhere in your code:

  result    
  |> Tasks.Todos.Api.Broadcast.Sender.broadcast_change(event) # event: Tasks.Todos.Types.Event.new!

That you need to then handle in your Channel. An example of a possible channel in your backend would look like this:

To create the socket for it you just need to add some code like:

From your mobile app you can then connect and join to the channel, like:

This Phoenix channel can also send notifications to the LiveView process in order to update the web with changes from the mobile app.

NOTE: All the code examples reference different projects, ones are demos at work, others are my personall ones, thus you need to adapt them to your needs, but it should give you a starting point.

6 Likes