clemensm
Hi there
I’m currently working on an application for personal knowlege managment. We’ve recently added a new feature where you can interactively layout your notes, and decided to go with LiveView for it, which has been working very nicely so far.
However we’ve now added an option to have multiple of those note layout views at the same time on your page, and the user can create them dynamically (the page is a SPA, and we’ve wrapped the code for handling the LiveView into a custom WebComponent).
The custom WebComponent looks roughly like this, and is activated by receiving some HTML via JSON from the server which is then appended to the server:
<div>
<notes-view>
<%= live_render .... %>
</notes_view>
</div>
class NoteView extends HTMLElement {
connectedCallback() {
this.__liveSocket = new LiveSocket("/live/view-editor", Socket, { hooks: hooks });
this.__liveSocket.connect();
}
}
So everytime the user adds a <notes-view>, we connect a new LiveSocket. However by doing this, the previously connected LiveView reconnects on the new socket, and becomes basically unusable (it’s mount function is called again, and it becomes confused for phx events send from hooks).
Currently I’m a bit lost as how to solve this, I’ve already tried to only connecte one LiveSocket, but then the later LiveViews do not connect at all… Any pointers how this could be done? Thanks a lot already 
Where Next?
Trending in Questions
Other Trending Topics
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #security
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
**Building the future of software with AI, trust, and human connection.**
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 1- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
clemensm
Ok, I’ve found the solution and my mistaken assumptions
. I’m not sure if this is the idiomatic way to do this, but it does work at without problems:
Do not open more then one LiveSocket (should have been obvious). Instead create a global LiveSocket and connect that one:
When the WebComponent connects, call some functions on the LiveView to join the views manually (This is the part I’m nor sure about. The functions do not really look like they are private, but I guess that could change at anytime):
It might be possible to call
liveSocket.joinView(...)directly, but I haven’t given that a try.Once your WebComponent disconnects, destroy the associated view (this will also destroy the process on the server for this view):
And that’s it