Realtime communication between Phoenix LiveView and Flutter

Hi all together,

I’m currently working on a project to make realtime communication between my web-application (written in Phoenix Liveview) and my mobile-application (written in Flutter) work. However I struggle to set up a new channel since the channels for the liveview socket is set up in the packages files.

Does anybody know if I can just setup another socket (like in a project without the --live tag) for the necessary channel (and maybe more in the future) or does it lead to conflicts between the sockets/channels?

I also know that typically PubSub is used to enable realtime communication within a Liveview-App.
However I’m not sure if it’s possible to subscribe to a topic from a Flutter-App since the existing libraries I found so far only support a connection to a phoenix channel.

Thank you all in advance!

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.

3 Likes

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.

4 Likes

A bit off topic but

Looks really nice. Will try on my personal projects.

1 Like

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.