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
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.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance











