React Native socket.io 无法监听"socket.on"

Question

我正在尝试构建一个聊天应用程序并产生实时效果，我正在使用socket.io，我在node/express中开发了我的服务器，它运行得很完美，但问题出在react原生端，因为当使用socket.on时，我无法呈现消息(尽管我以正确的方式进行，但我在useEffect中输入了正确的依赖项(。以下是我的应用程序中的一些代码，我将确认某些部分工作正常，只是在useEffect依赖项列表中出现了问题。

侦听/向目标客户端ID发送消息的服务器端逻辑：

socket.on('sendMessage', ({senderId, receiverId, text}) => {
console.log(text); // getting the output as expected here.
const user = Utility.getUser(users, receiverId);
io.to(user.socketId).emit('getMessage', {
senderId,
text,
});
});

客户端/Rect本机端：

const socket = useRef();
const [arrivalMessage, setArrivalMessage] = useState(null);
useEffect(() => {
// connect to server/api link
socket.current = io('...', {
transports: ['websocket'],
});
}, []);
useEffect(() => {
socket.current.on('getMessage', data => {
console.log('getmessages: ',data);
setArrivalMessage({
// matchId: matchId,
senderId: data.senderId,
text: data.text,
createdAt: Date.now(),
updatedAt: Date.now(),
});
});
// SOMETHING IS WRONG HERE, as this useEffect block is not being executed even though I have mentioned "socket" in my dependency list.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [socket]);
useEffect(() => {
// ensures we don't get any other user's msg
arrivalMessage &&
match.includes(arrivalMessage.senderId) &&
setMessages((prev) => [...prev, arrivalMessage]);
}, [arrivalMessage, match]);

因此，在第二个useEffect中出现了一些错误，因为这个useEffect块没有被执行，尽管我已经提到了"；插座"；在我的依赖项列表中，因此聊天列表不会更新。此外，控制台中没有错误日志，因此增加了调试的难度。。。

如果有人指出我做错了什么，我将不胜感激！

Answer 1

不能将useRef用于套接字实例。。。更改引用不会重新呈现组件的内容，因此不会触发useEffect

以下是如何在挂钩中使用套接字的示例

export function useSocket(
url = process.env.NEXT_PUBLIC_API_URL /* default URL */
) {
const [socket, setSocket] = useState<SocketType>(null)
useEffect(() => {
const io: SocketType = SocketClient(url).connect()
setSocket(io)
return () => {
socket?.disconnect()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return socket
}
export function useSocketEvent(
socket: SocketType,
event: keyof SocketListenEventMap,
callback: (...args: unknown[]) => void
) {
useEffect(() => {
if (!socket) {
return
}
socket.on(event, callback)
return () => {
socket.off(event, callback)
}
}, [callback, event, socket])
return socket
}
export function useMessagesSocket() {
const [arrivalMessage, setArrivalMessage] = useState(null)
const socket = useSocket(/* URL */)
useSocketEvent(socket, 'getMessages', (data) =>
setArrivalMessage({
//...
})
)
}