Connect multiple instances of LiveView dynamically after page load

Questions / Help
,
1

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 :slight_smile:

2

Ok, I’ve found the solution and my mistaken assumptions :wink:. I’m not sure if this is the idiomatic way to do this, but it does work at without problems:

  1. Do not open more then one LiveSocket (should have been obvious). Instead create a global LiveSocket and connect that one:

    const __liveSocket = new LiveSocket("/live/view-editor", Socket, { hooks: hooks });
__liveSocket.connect();

  2. 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):

    connectedCallback() {
    __liveSocket.joinRootViews();
    __liveSocket.detectMainView();
}

    It might be possible to call liveSocket.joinView(...)directly, but I haven’t given that a try.

  3. Once your WebComponent disconnects, destroy the associated view (this will also destroy the process on the server for this view):

    disconnectedCallback() {
    __liveSocket.destroyViewByEl(yourViewElement);
}

And that’s it

2 Likes