alexbaetz

alexbaetz

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!

Most Liked

Exadra37

Exadra37

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.

kokolegorille

kokolegorille

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.

cpgo

cpgo

A bit off topic but

Looks really nice. Will try on my personal projects.

Last Post!

Exadra37

Exadra37

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.

Where Next?

Popular in Questions Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New

Other popular topics Top

vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 40042 209
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New

We're in Beta

About us Mission Statement