42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { type Signal, useComputed, useSignal } from '@preact/signals'
|
|
import { useEffect } from 'preact/hooks'
|
|
import { IS_BROWSER } from '$fresh/runtime.ts'
|
|
|
|
export default function IsOnline(
|
|
{ online, offline }: { online?: string; offline: string },
|
|
) {
|
|
if (!IS_BROWSER) {
|
|
return <span class={'island__is_online'}>{offline}</span>
|
|
}
|
|
|
|
const status = useSignal(false)
|
|
const displayed = useComputed(() => {
|
|
if (status.value && online) {
|
|
return <span>{online}</span>
|
|
}
|
|
if (status.value) {
|
|
return <span style={{ display: 'none' }}></span>
|
|
}
|
|
return <span class={'island__is_online'}>{offline}</span>
|
|
})
|
|
useEffect(() => openSocket(status, { id: undefined }), [])
|
|
|
|
return <>{displayed}</>
|
|
}
|
|
|
|
function openSocket(status: Signal<boolean>, ref: { id: number | undefined }) {
|
|
const socket = new WebSocket(
|
|
`wss://${location.host}/api/serviceworker/is-online`,
|
|
)
|
|
socket.addEventListener('open', () => {
|
|
status.value = true
|
|
clearInterval(ref.id)
|
|
})
|
|
socket.addEventListener('close', () => {
|
|
status.value = false
|
|
// Try reconnect every 5s
|
|
const id = setInterval(() => openSocket(status, ref), 5_000)
|
|
ref.id = id
|
|
})
|
|
}
|