lundi 20 mai 2019

How to show live users active on a particular page / routed vue-component, on home page?

I am developing an application where users create custom playlists from youtube video urls and those playlist are shown at homepage. When a user click on playlist, it is redirected to a page showing videos in that particular playlist.

Technology stack: Laravel 5.8, Vue, MySql, Pusher

What I have tried so far:

Home Page Component (PublicPlaylist.vue) listens to a channel: live-playlist-playing on mounted() event

this.channel = window.Echo.channel(`live-playlist-playing`);
                this.channel.listen("LivePlaylistPlaying", e => {
                    this.object_array.push(e);
                    var array = this.object_array;
                    var seenNames = {};

                    array = array.filter(function(currentObject) {
                        if (currentObject.playlist_id in seenNames) {
                            return false;
                        } else {
                            seenNames[currentObject.playlist_id] = true;
                            return true;
                        }
                    });
                    this.distinct_object = array;
                })

whenever another user goes to a playlist page e.g. www.example.com/playlist/1 its component SinglePlaylist.vue calls api to fetch details:

mounted(){
            window.axios
                .get(
                    "/api/playlist/"+this.playlist_id,
                    {
                        headers: fetchAuthHeaders()
                    }
                )
                .then(response => {
                    this.playlist = response.data.data;
                })
                .catch(error => {
                    // if (false == isErrorHandled(error, this)) {
                    //     consoleLog(error);
                    // }
                });
        }

Above API method broadcasts an event which is listened by the channel live-playlist-playing, as follows:

public function viewPlaylist($playlistId)
    {
        /**
          some code
         */

        broadcast(new LivePlaylistPlaying(Auth::user()->name, $playlist->playlist_name, $playlistId));

        return response()->api(true, 'Playlist fetched successfully', $playlist);
    }

I hope I have tried to disclose as much as details but you are free to ask for more information; coming back to question, Above code works fine for this case, steps to be taken in consideration.

  1. suppose a user A is on home page and
  2. now user B access the single playlist page
  3. A will get to know a playlist is being accessed by another user.

But what if user B comes first i.e

  1. User B accesses the single playlist page
  2. User A comes on home page
  3. A will not get any information about playlist being played until a user C comes in the picture.


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire