Socket io 延迟一个事件

Posted 2023-02-16

【中文标题】Socket io 延迟一个事件

【英文标题】：Socket io delay one event

【发布时间】：2021-10-01 09:12:55

【问题描述】：

我已经将 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>
    </> 
  );
;

【问题讨论】：

而不是show_event.unshift 和show_event.pop 尝试使用setShow_event([ "name": name, "age": age , show_event[0]])

非常感谢，我会努力的，我对 React 和 NodeJS 很陌生。

【参考方案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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。