julngomz

julngomz

Phoenix LiveView, WebSockets, PubSub and Message Broadcasting

Hello All,

I need some clarifications on using WebSockets and Pub/Sub in/with Phoenix LiveView.

I have the example working where I can create, store, and delete the message and reflect them on the message feed. All I need to do now is reflect them to other users in the chat.

I am currently using Phoenix.Socket.Transport but later down the road I’ll just probably implement that using Cowboy via the behaviour :cowboy_websocket.

I have the ChatSocket implemented and defined in the Endpoint as follows.

In endpoint.ex,

 socket "/chat/:user_id/:room_id/", AppWeb.ChatSocket, websocket: true, longpoll: true

I can do some subscribing and publishing via the user_id and room_id.

On every room change, LiveView updates the websocket URL and the user_id is populated with the current authenticated users id and the selected room id,

ws://localhost:4000/chat/#{@current_user.id}/#{@active_room.id}/websocket

that in turn is passed to a JavaScript Hook (phx-hook={Chat}) via the data-ws-url attribute that implements the WebSocket and other niceties such as scrolling down/up? to the first message, etc.

I have the ChatSocket receiving a heartbeat from clients but now the confusion arises.

I understand the theory behind WebSockets and how they work I can send heartbeats to the ChatSocket as you can see in the following image:

I can also send messages to the WebSocket:

So essentially what I’m doing is the following:

  • A new message is created
  • It is saved in the database
  • the stream is updated and rendered
  • the message is then sent to the websocket
  • (potentially) pub/sub then broadcasts them to subscribed members

Note: All I care about for now is basic message storing and broadcasting there is quite a bit of edge cases I am not handling at the moment.

So the question I have is where do I plop in the Phoenix PubSub?

Since this is a SPA app and I retrieve all user information such as chatrooms along with messages, members, and member profiles. I was thinking about subscribing when I retrieve information and accessing it in the ChatSocket that way I can get new message information and display a badge with the latest message.

Thank you for taking your time with my post. Any help/clarifications is appreciated.

Marked As Solved

codeanpeace

codeanpeace

I’d suggest looking into Phoenix.Channels which uses Phoenix.PubSub under the hood.

At a high level, you’ll want to subscribe to the chatroom topic in mount callback, publish/broadcast the message in handle_event callback for new messages from the client, and finally handling those messages published/broadcasted from other clients in handle_info callback. For a minimal working example, take a look at Step 4 — Subscribe & Consume Messages in Build Real-time Chat With Phoenix and LiveView in Fewer Than 50 Lines of Code.

And if you want to use Phoenix.PubSub directly, here’s a helpful repo that walks through the process in its readme: GitHub - dwyl/phoenix-liveview-chat-example: 💬 Step-by-step tutorial creates a Chat App using Phoenix LiveView including Presence, Authentication and Style with Tailwind CSS · GitHub.

Where Next?

Popular in Questions Top

Tee
can someone please explain to me how Enum.reduce works with maps
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
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
jaysoifer
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)? Would mix ecto.rollback -v 200809061...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
chensan
I have a User schema with a :from_id field set to type :string: defmodule TweetBot.Repo.Migrations.CreateUsers do use Ecto.Migration ...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New

Other popular topics Top

malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" => #BSON.ObjectId<58eb1a7a9ad169198c3dXXXX>, "email" => ...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement