Conecté socket io a Webhook y funcionó. Puede obtener información y expresarse. Pero tengo un problema. Cuando el valor deseado se muestra en el lado del cliente, la respuesta se retrasa. Por ejemplo, cuando el lado del servidor detecta un evento, se mostrará en console.log(); Pero no se mostrará en el lado del cliente. Pero cuando el lado del servidor detecta el evento nuevamente (segunda vez), el valor guardado la primera vez se envía al lado del cliente, y si el servidor detecta el evento nuevamente (tercera vez), el valor del segundo evento se envía al cliente. lado, lo que significa que retrasará el evento una vez. ¿Cómo puedo solucionar este incidente?
// 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> </> ); };Creo que encontré el problema.
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