使用 socket.io 将新的数组更改应用到 useEffect 并更改流

Question

我目前正在构建一个社交平台，我使用 Mongo Change Streams 来检测任何更改，这些更改将“发出”到单独的套接字，我之前遇到的问题是，一切正常非常好，但现在由于嵌套 cmets 和回复的实现，我的数据库结构发生了变化。因此，我想出了一个解决方法，将三个单独的数组合并为一个数组，其中包含与喜欢和 cmets 关联的嵌套数组信息。所以我想要的是我想从单独的套接字（posts、likes、cmets）中获取数据并合并为一个，因此我已经应用了一个处理程序来检查两者之间的任何变化新旧数据，所以基本上我只是坚持将这三个套接字数据合并到一个数组中，我有点迷失了如何采用这种方法。

更改流

const db = mongoose.connection;
db.once('open', () => {
    //post changes
    console.log(chalk.blueBright("Setting change streams"));
    db.collection('posts').watch()
    .on('change', change => {
        if(change.operationType === 'insert'){
            console.log(chalk.yellowBright('INSERTED'))
            io.emit('posts', change.fullDocument);
            console.log(change.fullDocument)
        }
    });
    db.collection('posts').watch({ fullDocument: 'updateLookup' })
    .on('change', change => {
        if(change.operationType === 'update'){
            console.log(chalk.yellowBright('UPDATED'));
            io.emit('posts', change.fullDocument);
            console.log(change.fullDocument)
        }
    })

    //comments changes
    db.collection('comments').watch({ fullDocument: 'updateLookup' })
    .on('change', change => {
        if(change.operationType === 'insert'){
            console.log(chalk.yellowBright('INSERTED'))
            io.emit('comments', change.fullDocument);
            console.log(change.fullDocument)
        }
    });
    db.collection('comments').watch({ fullDocument: 'updateLookup' })
    .on('change', change => {
        if(change.operationType === 'update'){
            console.log(chalk.yellowBright('UPDATED'));
            io.emit('comments', change.fullDocument);
            console.log(change.fullDocument)
        }
    })
}); 

客户端

useEffect 用于检测任何更改帖子

//Check socket changes
    useEffect(() => {
      //merged posts with comments and likes sockets?
      //this is the solution I've come up on merging three arrays but
      //I'd like to apply this with the three sockets data that are being retrieved or applied
      const newPosts = posts.map(post => ({
        ...post,
        likes: likes.filter(like => post.likes.map(like => like._id).includes(like._id)),
        comments: comments.filter(comment => post.comments.map(comment => comment._id).includes(comment._id)),
      }))

      const handler = (item) => {
        setPosts((oldPosts) => {
          const findItem = oldPosts.find((post) => post._id === item._id);
          if (findItem) {
            return oldPosts.map((post) => (post._id === item._id ? item : post));
          } else {
            return [item, ...oldPosts];
          }
        });   
      };

      //Sockets
      //socket.off("comments", handler);
      //socket.off("likes", handler);

      return () => socket.off("posts", handler);
       //eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

Answer 1

对此有两种解决方案，第一个是将调用套接字的方式更改为socket.onMany(handler)，它添加了一个侦听器，当任何事件发出时都会触发该侦听器。在那里，输出将存储为[["posts",{}],["comment",{}],["likes"],{}]，接下来要做的是使用“.splice(indexOf('posts'))”删除字符串值，然后你需要将三个数组展平为对象，并通过关联的 id 的喜好将它们相互合并：

const newPosts = posts.map(post => ({
    ...post,
    likes: likes.filter(like => post.likes.map(like => like.id).includes(like.id)),
    comments: comments.filter(comment => post.comments.map(comment => comment.id).includes(comment.id)),
}))

第二种方法是修改更改流，调用 Post 模型并使用 populate()，它每次都会根据需要使用填充的数据向数据库调用一个新请求，然后将其发送到您的套接字，因此由于帖子将是父文档，因此只应在帖子套接字中检查更改。

//post changes
    console.log(chalk.blueBright("Setting change streams"));
    db.collection('posts').watch()
    .on('change', change => {
        if(change.operationType === 'insert'){
            PostModel.find({}).lean().populate('comments')
            .then((posts) => io.emit('posts', posts))
        }
    })
    db.collection('posts').watch({ fullDocument: 'updateLookup' })
    .on('change', change => {
        if(change.operationType === 'update'){
            PostModel.find({}).lean().populate('comments')
            .then((posts) => io.emit('posts', posts))
        }
    })