在反应中使用 socket.on 的正确方法答案

【问题标题】：Correct way to use socket.on in react在反应中使用 socket.on 的正确方法
【发布时间】：2020-06-19 11:25:23
【问题描述】：

我正在开发一个用于抓取的小项目。我在使用套接字时遇到问题。我在循环中从服务器发出一些事件。

for(i=0;i<blogs.length;i++){

        socket.emit('crawling',blogs[i]);

        const startTime = Date.now();
        const post = await crawlPost(blogs[i]);
        const endTime = Date.now();

        socket.emit('crawled',blogs[i]);
        socket.emit('timeTaken',{
            time: endTime-startTime,
            blog : blogs[i],
        });
    }

我想在 react 组件中一一监听这些事件，但我无法这样做，我为监听事件编写的代码。

const App = () => {
    const [crawlingBlog, setCrawlingBlog] = useState([]);
    const ENDPOINT = 'localhost:4000';
    socket = io(ENDPOINT);

    useEffect(() => {

      socket.on('crawling' , (blog) => {
        setCrawlingBlog(crawlingBlog.concat(blog))
      })

    },[])
}

【问题讨论】：

标签： node.js reactjs express socket.io web-crawler

【解决方案1】：

你是这样把你的套接字包裹在服务器上的吗？

module.exports = connectSockets

function connectSockets(io) {
    io.on('connection', socket => {

        for(i=0;i<blogs.length;i++){

        socket.emit('crawling',blogs[i]);

        const startTime = Date.now();
        const post = await crawlPost(blogs[i]);
        const endTime = Date.now();

        socket.emit('crawled',blogs[i]);
        socket.emit('timeTaken',{
            time: endTime-startTime,
            blog : blogs[i],
        });
    }


    })
}

【讨论】：