perceval62
Need help linking a phoenix LiveView to a phoenix channel
I’m relatively new to phoenix, so I may not have the vocabulary to express myself clearly.
I ended up maintaining as a junior a phoenix application with different channels that each have subtopics.
Some new requirements came in and I opted to do that inside of a LiveView.
I would like to receive updates from a specific channel inside the LiveView, change the assigns and update some content that way.
defmodule MyApp.RoleBillboardLive do
use Phoenix.LiveView
import MyApp.{UserSocket, Endpoint}
alias MyApp.Endpoint
alias Phoenix.Socket.Broadcast
def render(assigns) do
~H"""
Message from server: <%= @param %>
"""
end
def mount(_params, _, socket) do
topic = "global:test"
MyApp.Endpoint.subscribe(topic)
IO.puts("I am now subscribed to " <> topic)
param = "This is a test,"
{:ok, assign(socket, :param, param)}
end
#def handle_info(_, socket) do
# IO.puts("info")
# {:noreply, assign(socket, assign(socket, :yeet, "yote"))}
#end
@impl true
def handle_info(msg, socket) do
IO.inspect(msg)
{:noreply, assign(socket, :param, msg)}
end
end
When I run this code, the mount function is called, I can see it clearly in the terminal.
(I run the command iex -S mix phx.server)
The page loads as expected with the initial content,
but when i publish a message on the topic, handle_info is never even called
I tried to skim through the docs, and a few forum posts, but none of them seemed to be advising on what I’m trying to do.
Marked As Solved
benwilson512
No the code you sent connects you to a phoenix channel. This also uses websockets, but all it does is provide an API for javascript code to send events into and receive events from the server. LiveView (while implemented on top of channels) is distinct and requires its own JS. You can see an example here: phoenix_live_view_example/assets/js/app.js at master · chrismccord/phoenix_live_view_example · GitHub
If this is an existing phoenix application you’ll need to sort of “retrofit” channels to it which may be relatively challenging for a junior that is new to phoenix. You can find docs for this however here: https://hexdocs.pm/phoenix_live_view/installation.html
Nah don’t! There’s a lot here and you’re new!
Also Liked
kokolegorille
You might have to check for connection
if connected?(socket) do
...
end
benwilson512
That is a great point. @perceval62 you really should do this in your mount/3
def mount(_params, _, socket) do
if connected?(socket) do
topic = "global:test"
MyApp.Endpoint.subscribe(topic)
IO.puts("I am now subscribed to " <> topic)
end
param = "This is a test,"
{:ok, assign(socket, :param, param)}
end
When you first connect to a liveview app you get two calls to mount, one for the static render and one for the live render. I was actually just talking about this in another thread: More convenience functions to deal with assigns inside LiveView - #15 by benwilson512
benwilson512
Hey @perceval62 welcome!
Can you show the code you are using to publish? Also to confirm, you’re doing the publish call in the same iex session that is running the server, not a separate one right?
Finally in here:
@impl true
def handle_info(msg, socket) do
IO.inspect(msg)
{:noreply, assign(socket, :param, msg)}
end
You should change that to assign(socket, :param, inspect(msg)) because otherwise if you get a message that isn’t a string it’s going to crash when it tries to render it.
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









