I have a basic project setup with Laravel, Nuxt3, Pusher and laravel-echo. When a user updates a group, I want the changes to happen in real-time for all users of that group.
I've followed the docs and it all works as expected: the client initialises a laravel-echo instance and subscribes to a private channel for each of its groups. To establish the connection, an authentication request is made to the broadcasting/auth endpoint on the Laravel server.
The issue here is that a user could very well have 20+ groups, each of which requires its own private channel and authentication api call to the server. It's already very bloated and I'm planning to add much more channels per user.
groups.value.forEach((group) => {
window.Echo.private(`group.${group.id}`)
.listen(
"GroupUpdated",
({ group: updatedGroup }) => {
groups.value = groups.value.map((group) => {
return group.id === updatedGroup.id ? updatedGroup : group;
});
if (updatedGroup.id === activeGroup.value.id) {
activeGroup.value = updatedGroup;
}
}
)
.listen(
"GroupDeleted",
({ group: deletedGroup }) => {
groups.value = groups.value.filter((group) => {
return group.id !== deletedGroup.id;
});
if (deletedGroup.id === activeGroup.value.id) {
activeGroup.value = groups.value[0];
}
}
);
});
An alternative approach that came to mind was having a single public channel "groups", that would only broadcast the ids of groups that got updated. Then on the client I'd only have to check if the user is part of this group and if so, refetch it from the server.
There's definitely some cons to this approach, like the fact that all users of an updated group would make a server request including a database query at the same time, if a group gets large and the query expensive, this could lead to issues on the server. However, it feels much less hacky than the current setup.
I'm curious to hear your opinions on the matter, and of course any better alternatives to deal with this situation. I could of course share more code on request.