leaky-ships/leaky-ships/lib/hooks/useSocket.ts

58 lines
1.4 KiB
TypeScript

import useGameState from "@lib/hooks/useGameState"
import { socket } from "@lib/socket"
import { useEffect, useState } from "react"
function useSocket() {
const [isConnected, setIsConnected] = useState(socket.connected)
const [hasJoined, setHasJoined] = useState(false)
// const [fooEvents, setFooEvents] = useState([])
const { session, status, setGameProps } = useGameState()
useEffect(() => {
if (status === "loading") return
socket.on("connect", () => {
console.log("connected")
setIsConnected(true)
})
socket.on("connect_error", () => {
console.log("connect_error")
})
socket.on("disconnect", () => {
console.log("disconnect")
setIsConnected(false)
})
socket.on("forbidden", () => {
console.log("forbidden")
})
socket.on("update", (body) => {
console.log("update")
setGameProps(body)
})
return () => {
// for all events
socket.removeAllListeners()
}
}, [status, setGameProps])
useEffect(() => {
if (session?.user.id && !hasJoined) {
socket?.emit("join", session?.user.id, () => {
setHasJoined(true)
})
}
}, [session?.user.id, hasJoined])
useEffect(() => {
if (!isConnected) return
socket?.emit("authenticate", { token: `hello from ${session?.user.email}` })
}, [isConnected, status, session?.user.email])
return { isConnected, hasJoined }
}
export default useSocket