Question

我正在构建一个大约3,000个房间的SPA聊天应用程序。主页将根据活跃参与者的数量对每个房间进行排名。

为此，我正在使用Laravel，Vuejs，Laravel Echo和Socket.io。

我在此处构建了一个简单的应用程序版本以了解我的代码库：https://jsfiddle.net/benjifisher/3cotxu29/

基本上，我正在使用Laravel Echo Server HTTP API端点来检索频道数据。我列出了每个房间的渲染通道数。

我需要建议的是如何根据订阅计数值对房间进行排序。我知道我需要将对象与数组匹配，并可能推送到新数组？

下面是一个片段

new Vue({
  el: "#app",

  data: {
    rooms: [
      { id: 1, name: "Room 1", url: 'room1'},
      { id: 2, name: "Room 2", url: 'room2' },
      { id: 3, name: "Room 3", url: 'room3' },
      { id: 4, name: "Room 4", url: 'room4' },
      { id: 5, name: "Room 5", url: 'room5'},
      { id: 6, name: "Room 6", url: 'room6' },
      { id: 7, name: "Room 7", url: 'room7' },
      { id: 8, name: "Room 8", url: 'room8' }
    ],
    channels: {
            channels: {
        presence_room4: {
            occupied: true,
          subscription_count: 2,
        },
        presence_room5: {
            occupied: true,
          subscription_count: 1,
        }
        }
    }

  },
  computed: { 

  },
  methods: {

  }
})

谢谢。

本

Answer 1

请检查https://jsfiddle.net/Mark_f/vynqmtb2/以获取更新的代码。

我对您的代码进行了更新：

使用观看方法计算房间和通道之间的地图room_channel_array并对其进行排序
使用排序后的room_channel_array

您可以使用lodash之类的第三方库来简化生活。

将对象匹配到数组以在vuejs中排序

1 个答案: