Socket io 延迟一个事件

Question

我已经将 socket io 连接到 Webhook，它成功了。它可以获取信息并可以表达但是我遇到了一个问题。当客户端显示所需的值时，响应会延迟。例如，当服务器端检测到事件时，将显示在 console.log();但它不会显示在客户端。但是当服务器端再次检测到该事件时（第二次）将第一次保存的值发送给客户端，如果服务器端再次检测到该事件（第三次）则将第二次事件值发送给客户端-边，这意味着它将延迟事件一次。我该如何解决此事件？

// Server
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io', { 
    transports: ['websocket', 'polling'] 
})(http, {
    cors: {
        origin:'*'
    }
});
const bodyParser = require("body-parser");


PORT = 8080;

io.on('connection', socket => {
app.use(bodyParser.json());
app.post('/api', (req, res) => {
 
    let x = req.body[0];
    let dates = x.created_date; 
    let name = x.name; 
    let watchlist = x.watchlist[Object];

if (watchlist == "Matched"){
  console.log("Date :", dates)
  console.log("Name :", name)
  io.emit('FromAPI', dates, name);
}
else {
  console.log("Unmatch")
}
res.status(200).end("Successfully");
    
});
console.log('Socket connected');
socket.on('disconnect', () => { console.log('Socket disconnected')});
});

http.listen(PORT, () => {
console.log(`Server : http://localhost: ${PORT}`);
});

// Client
import { useEffect, useState } from 'react';
import io from 'socket.io-client';
const socket = io("http://localhost:8080", { transports: ['websocket', 'polling'] });


export default function App() {
   const [date, setDate] = useState('');
   const [name, setName] = useState('');
   const [hook_event, setHook_event] = useState([
     { "date": date, "name": name},
     { "date": date, "name": name}
   ]);
   
  
  useEffect(() => {
    socket.on('FromAPI', (date, name) => {
      setDate(date);
      setName(name);

      hook_event.unshift({"date": date, "name": name});
      hook_event.pop();
    })
  }, [];

  return (
    <>      
       <p>Date : {hook_event[0].date} and {hook_event[0].name}</p>
       <p>Date : {hook_event[1].date} and {hook_event[1].name}</p>
    </> 
  );
};

Answer 1

我想我找到了问题。

    const [countState, setCountState] = useState() 

    useEffect(() => {
    socket.on('FromAPI', (date, name) => {
      setDate(date);
      setName(name);

      hook_event.unshift({"date": date, "name": name});
      hook_event.pop();
      setCountState(hook_event[0])
    })
    }, [setCountState]; // update setCountState

Socket io 延迟一个事件

Socket io delay one event

javascript

websocket

socket.io