В моем приложении я генерирую событие сокета всякий раз, когда пользователь получает новое сообщение, и я пытаюсь отобразить реакцию внешнего интерфейса с помощью socket.io-client.
Мой код реакции выглядит следующим образом
import React, { useState, useEffect, useContext, useRef } from "react"
import io from "socket.io-client"
import StateContext from "../../../StateContext"
const Received = () => {
const appState = useContext(StateContext)
const [inbox, setInbox] = useState([])
const ENDPOINT = "http://localhost:3008"
let socket = useRef()
const fetchInbox = () => {
axios.post("/messages")
.then((res) => {
console.log(res.data)
setInbox(res.data)
})
.catch((err) => {
console.log(err)
})
}
useEffect(() => {
fetchInbox()
}, [])
useEffect(() => {
console.log("connection created")
socket.current = io(ENDPOINT, {
withCredentials: true
});
socket.current.on("connect", () => {
console.log(socket.current.id)
socket.current.emit('join', { email: appState.email })
})
socket.current.once("new message", (msg) => {
console.log(msg)
setInbox(oldMsgs => [...oldMsgs, msg])
})
socket.current.on("disconnect", () => {
console.log("disconnected")
})
return () => socket.current.disconnect();
}, [ENDPOINT])
и мой код на стороне сервера. Я передаю экземпляр сокета из файла app.js в файл message.js и генерирую событие сокета. В файле messages.js
const emit_messages = (user_ids, new_message) => {
try {
user_ids.map((userid) => {
io.sockets.in(userid).emit("new message", new_message)
})
}
catch (err) {
console.log(err)
}
}
Мой реагирующий код рендерится несколько раз, даже если я объявил зависимости в хуке useEfect. Моя проблема аналогична той, что указана в этом вопросе о стеке.
socket.current.once
срабатывает только по одному запросу. Для последующих запросов он не запускается.
Может ли кто-нибудь помочь мне решить эту проблему?
и как правильно использовать socket.io в реакции и почему компонент рендерится много раз
Любая помощь приветствуется. Спасибо ...