Почему мой WebSocket на этом компоненте React не получает сообщения, только когда прослушиватели событий добавляются в ловушку useEffect? - PullRequest
Новая
       55

Почему мой WebSocket на этом компоненте React не получает сообщения, только когда прослушиватели событий добавляются в ловушку useEffect?

0 голосов
/ 22 апреля 2020

Это так расстраивает, что мой WebSocket получает данные, когда я помещаю addEventListener вызывает за пределами ловушку useEffect, но когда я помещаю его в ловушку, компонент не получает никаких данных, кроме самого первого сообщение при подключении. Я искал вокруг, и я знаю, что я должен поместить вызовы addEventListener в ловушку, потому что в противном случае, как 8 сокетов, и я получаю несколько одинаковых сообщений с сервера.

В чем может быть проблема, которая блокирует WebSockets от получения данных?

Код: 

const PriceBoard = (props) => {
    const [submissions, setSubmissions] = useState([])
    const socket = new WebSocket(wsURI)

    useEffect(() => {
        fetch(apiURI + `${props.tableName}Prices`)
            .then((response) => {
                return response.json()
            })
            .then((data) => {
                setSubmissions(data)
            })

        socket.onopen = (event) => {
            socket.send(`hi this is ${props.tableName}Board`)
        }

        socket.onmessage = (event) => {
            const jsonConverted = JSON.parse(event.data)
            const messageType = jsonConverted[0]
            const data = jsonConverted[1]

            if (messageType === 'message') {
                console.log(data)
            } else if (messageType === props.tableName) {
                console.log('setting submissions')
                setSubmissions([data, ...submissions])
            }
        }

        return () => {
            socket.close()
        }
    }, [])

    return (
        <ul>
            {submissions.map((submission) => (
                <li key={submission.url}>
                    {submission.title} - {submission.price} -{' '}
                    <a href={submission.url}>URL</a>
                </li>
            ))}
        </ul>
    )
}
...