78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
|
|
import {
|
|
connectWebSocket,
|
|
disconnectWebSocket,
|
|
sendEvent,
|
|
sendEventAndWait,
|
|
onEvent,
|
|
isWebSocketConnected,
|
|
setDefaultHandler,
|
|
} from "@/services/ws";
|
|
import { useIngame } from "@/composables/useIngame";
|
|
|
|
function defaultEventHandler<T = any>(data: (data: T) => void) {
|
|
setDefaultHandler(data);
|
|
}
|
|
|
|
export function useWebSocket() {
|
|
const isConnected = ref(isWebSocketConnected());
|
|
const lastMessage = ref<any>(null);
|
|
const lastError = ref<string | null>(null);
|
|
|
|
// Get ingame store to sync connection state
|
|
const ig = useIngame();
|
|
|
|
// Watch the ingame store's connection state and keep this composable in sync
|
|
watch(() => ig.isWsConnected, (connected) => {
|
|
isConnected.value = connected;
|
|
});
|
|
|
|
// Also update this composable's state when connecting/disconnecting
|
|
const updateConnectionState = (connected: boolean) => {
|
|
isConnected.value = connected;
|
|
};
|
|
|
|
async function safeConnect(url?: string) {
|
|
return connectWebSocket(url)
|
|
.then(() => {
|
|
updateConnectionState(true);
|
|
})
|
|
.catch((err) => {
|
|
updateConnectionState(false);
|
|
lastError.value = err?.message ?? "Unknown WS error";
|
|
throw err;
|
|
});
|
|
}
|
|
|
|
function useEvent<T = any>(event: string, handler: (data: T) => void) {
|
|
const wrapped = (data: T) => {
|
|
lastMessage.value = { event, data };
|
|
handler(data);
|
|
};
|
|
|
|
onMounted(() => {
|
|
console.log("Registering event handler for " + event);
|
|
onEvent(event, wrapped);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
console.log("Unregistering event handler for " + event);
|
|
onEvent(event, () => {});
|
|
});
|
|
}
|
|
|
|
return {
|
|
isConnected,
|
|
lastMessage,
|
|
lastError,
|
|
|
|
connect: safeConnect,
|
|
disconnect: disconnectWebSocket,
|
|
send: sendEvent,
|
|
sendAndWait: sendEventAndWait,
|
|
|
|
useEvent,
|
|
defaultEventHandler
|
|
};
|
|
}
|