The connection still exists in the server after WebsocketProvider is disconnected

1

Hi, I used WebsocketProvider in Vue3 frontend and when the page is unmounted, I destroyed WebSocketProvider and yDoc.
The last user left the room but when I try clicking connect button, previous content is restored again and fire “Synced” event.
What is the reason, doesn’t server delete the room which users all left?
Because of this, the initial content is added whenever provider joins because I initialize the content with some sentences when it is the first user. But the server doesn’t recognize it’s the first user.

This is reference code:

const rtc_provider = ref();

const ydoc = new Y.Doc();
const ytext = ydoc.getText('quill');

const room_name = get_writing_room_name(writing_id as string);

rtc_provider.value = new WebsocketProvider(
    config.HB_SOCKET_URL,
    room_name,
    ydoc
);

const provider = rtc_provider.value;
const awareness = provider.awareness;

provider.on('status', async () => {
    if (enabled.value) { // When the author joins at first, it initializes the content
        set_initial_content(article_content);
    }

    const is_creator_exist = () => {
        const roles: string[] = [];
        const states = awareness.getStates();
        states.forEach((value: Record<string,any>) => {
            roles.push(_.get(value.user, 'role'));
        });
        return roles.includes(WritingRole.creator);
    };

    awareness.setLocalStateField('user', {
        name: $user.user?.name,
        color: get_color_from_string($user.user.name),
        role: props.readonly ? WritingRole.observer : WritingRole.creator,
    });

    awareness.on('change', () => {
        if (props.readonly
            && ! is_creator_exist()
            && $route.name === RouteNames.EDIT_VIKI) {
            $notify.info($tk.stop_editing);
            $router.push({
                name: RouteNames.VIKI,
                params: {
                    v: writing_id,
                },
            });
        }
    });
});

provider.on('sync', () => {
    $notify.success($tk.synced_successfully);
});

new QuillBinding(ytext, quill, awareness);

onBeforeUnmount(() => {
    quill = null;

    if (ydoc) {
        ydoc.destroy();
    }
})

I only destroyed ydoc when the page is unmounted because I heard ydoc also destroys related binding and provider in the community article.
I used this code as the server.

2

You have been testing with a single user. And you could absolutely discard content after every session. You need to adapt y-websocket server for that. But what would happen when two users connect at the same time? A: The content would get duplicated when you “initialize the content”.

Hence, I recommend keeping the Yjs state around.

Content should only be initialized once and the Yjs document should be the source of truth. I recommend persisting the Yjs document in your database (alongside the text-representation) so that you don’t have to discard the history and the relevant metadata.