Question

我正在开发一个应用程序，其中用户可以从youtube视频网址创建自定义播放列表，这些播放列表显示在首页上。当用户单击播放列表时，它将重定向到显示该特定播放列表中的视频的页面。

技术堆栈：Laravel 5.8，Vue，MySql，Pusher

到目前为止，我已经尝试过：

主页组件（PublicPlaylist.vue）收听频道：live-playlist-playing事件中的mounted()

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;
                })

每当其他用户进入播放列表页面时，例如www.example.com/playlist/1其组件 SinglePlaylist.vue 调用api来获取详细信息：

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);
                    // }
                });
        }

API方法broadcasts之上的事件，由通道live-playlist-playing监听，如下所示：

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

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

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

我希望我已尝试披露尽可能多的细节，但您可以自由要求提供更多信息；回到问题，上面的代码在这种情况下可以正常工作，需要考虑一些步骤。

假设用户 A 位于主页和
现在用户 B 访问单个播放列表页面
A 将了解另一个用户正在访问播放列表。

但是如果用户 B 首先出现怎么办？

用户 B 访问单个播放列表页面
用户 A 出现在主页上

C

A 不会获得有关播放列表的任何信息。

Answer 1

使用Presence Channels似乎可以使您受益：

这使得建立聊天室和“谁在线”变得非常容易为您的应用程序键入功能。想想聊天室，文档上的合作者，查看同一网页的人，比赛中的竞争对手。

您将需要授权连接，然后才能订阅状态频道。每当有人加入或离开该频道时，在线状态频道都会广播member_removed或member_added事件，您可以使用该事件来识别用户何时在页面上，而不考虑用户以什么顺序加入页面。

如何在首页上显示特定页面/路由vue组件上活动的实时用户？

1 个答案: