我正在嘗試構建一個聊天應用程式并產生實時效果，我正在使用socket.io，我在 node/express 中開發了我的服務器并且它運行良好，但問題出在 react-native 方面，因為我無法渲染使用時的訊息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,
});
});
客戶端/React Native 端：
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因為即使我在我的依賴項串列中提到了“socket”，這個 useEffect 塊也沒有被執行，因此聊天串列沒有更新。此外，控制臺中沒有錯誤日志，因此它增加了除錯的難度......
如果有人指出我做錯了什么，我將不勝感激！
uj5u.com熱心網友回復：
您不能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({
//...
})
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/387192.html