使用 React JS 和 WebSockets 的问题

如何解决使用 React JS 和 WebSockets 的问题

我正在学习这些技术（React JS、Node、WebSockets）并从事一个项目，该项目使用 websockets 在图形上实时显示信息。

我的组件中有一个状态，用于存储具有不同属性的对象数组。

当我向我的服务器发出 POST 请求时，记录会保存在数据库中（用 Postgresql 制作）并通知客户端进行更新

我的问题是当我刷新页面时它停止工作，我需要重新启动服务器才能再次看到图表中的变化。

服务器

io.on('connection',client => {

  app.post("/registros/nuevo",async (req,res) => {
    try {
      let insertar = await pool.query(`INSERT INTO registro 
      (fecha,hora,temperatura,presion,humedad,viento,viento_max,radiacion,precipitacion)
      VALUES 
      ('${req.body.fecha}','${req.body.hora}',${req.body.temperatura},${req.body.presion},${req.body.humedad},${req.body.viento},${req.body.viento_max},${req.body.radiacion},${req.body.precipitacion});`).then(() => { client.emit('new: data','updated') });
      res.json({ message: "Recibido" });
    } catch (err) {
      console.error(err.message);
    }
  });
});

客户

 const [data,setData] = useState([])

 const getData = async () => {
        try {
            const response = await fetch("http://localhost:5000/registros");
            const jsonData = await response.json();
            setData(jsonData);
            setCurrent(jsonData[jsonData.length - 1])
        } catch (err) {
            console.error(err.message)
        }
    };

    useEffect(() => {
       getData()
    },[])

    useEffect(() =>{
            socket.on('new: data',(c) =>{
            console.log(c)
            getData()
        })
    },[]);

我知道我的代码不是最好的，谢谢你的帮助

解决方法

我得到了解决方案，我的错误是将请求放在套接字主体内

app.post("/registros/nuevo",async (req,res) => {
  try {
    let insertar = await pool.query(`INSERT INTO registro
    (fecha,hora,temperatura,presion,humedad,viento,viento_max,radiacion,precipitacion)
    VALUES 
    ('${req.body.fecha}','${req.body.hora}',${req.body.temperatura},${req.body.presion},${req.body.humedad},${req.body.viento},${req.body.viento_max},${req.body.radiacion},${req.body.precipitacion});`)
    io.emit('new: data','Actualizado')
    res.sendStatus(204)
  } catch (err) {
    res.sendStatus(500)
  }
});