Phoenix LiveView, WebSockets, PubSub and Message Broadcasting

Phoenix Forum Questions / Help
, , , ,
1

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:

Two users/clients connected to ChatSocket

I can also send messages to the WebSocket:

Screenshot from 2023-11-05 10-17-32

Sending messages to the ChatSocket

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.

2

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.

1 Like
3

Thank you for the response.

I’m not interested in using Phoenix.Channels at the moment. I’ll just keep moving forward using Phoenix.Socket.Transport instead of restructuring my app, it works fine as I have it. All I need to do is broadcast to other members.

I appreciate the two resources you’ve provided, I’ll look into the PubSub example you’ve provided.

4

Maybe I don’t understand what you’re trying to do but why don’t you subscribe to the appropriate pubsub topic directly in your LiveView process instead?

5

I got it working with Phoenix.Channels, there was a misunderstanding on my part on WebSockets and Pub/Sub.

Here check this out: Live Chatroom Messaging

6

But why do you use Channels / a websocket connection on top of using LiveView which is already that?

In your LiveView(s) you could do

AppWeb.Endpoint.subscribe(room_id)
AppWeb.Endpoint.broadcast!(room_id, "Hello", nil)
8