Realtime communication between Phoenix LiveView and Flutter

Yes You can, if You look at your endpoint.ex, You should see 2 already defined…

  socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]

  socket "/socket", KokoWeb.UserSocket,
    websocket: true,
    longpoll: false

But You need a flutter client to connect to Phoenix channels.

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:

https://github.com/approov/quickstart-elixir-phoenix-channels-token-check/blob/f00094cbacc559912c624068e6466c741e3bccad/src/approov-protected-server/token-check/echo/lib/echo_web/channels/echo_channel.ex#L6-L28

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

https://github.com/approov/quickstart-elixir-phoenix-channels-token-check/blob/f00094cbacc559912c624068e6466c741e3bccad/src/approov-protected-server/token-check/echo/lib/echo_web/channels/user_socket.ex#L6-L19

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

https://github.com/approov/quickstart-flutter-elixir-phoenix-channels/blob/63a15d941a18c20a85f53d700ec5fd96eb848800/src/echo-chamber-app/lib/phoenix_channel.dart#L12-L62

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.

A bit off topic but

Looks really nice. Will try on my personal projects.

Thank you all for your fast replies and help!

I now have a much clearer idea on how to get things running.

One last question about this topic:
Would you open a connection to the other socket directly from app.js as it is done for the livesocket or would you prefer a seperate js file?

Have a nice weekend

I think you missed the point I explained to keep the web and the mobile app in sync.

You don’t need to open another socket connection from the web app in order to keep mobile and web in sync.

What you need to do is to have a Phoenix Channel for the mobile app to connect too and then have the LiveView sending notifications to this Phoenix Channel to tell that something changed in the web side, and you can also send notifications from the Phoenix Channel to the LiveView to inform it that something have changed in the mobile side.

Just to be clear, all this notifications between LiveView and the Phoenix Channel is done in the backend side.