OpenIsle/frontend_nuxt/composables/useWebSocket.js

import { ref } from 'vue';
import { Client } from '@stomp/stompjs';
import SockJS from 'sockjs-client/dist/sockjs.min.js';
import { useRuntimeConfig } from '#app';

const client = ref(null);
const isConnected = ref(false);

const connect = (token) => {
    if (isConnected.value) {
        return;
    }

    const config = useRuntimeConfig();
    const API_BASE_URL = config.public.apiBaseUrl;
    const socketUrl = `${API_BASE_URL}/ws`;

    const socket = new SockJS(socketUrl);
    const stompClient = new Client({
        webSocketFactory: () => socket,
        connectHeaders: {
            Authorization: `Bearer ${token}`,
        },
        debug: function (str) {
        },
        reconnectDelay: 5000,
        heartbeatIncoming: 4000,
        heartbeatOutgoing: 4000,
    });

    stompClient.onConnect = (frame) => {
        isConnected.value = true;
    };

    stompClient.onStompError = (frame) => {
        console.error('WebSocket STOMP error:', frame);
    };

    stompClient.activate();
    client.value = stompClient;
};

const disconnect = () => {
    if (client.value) {
        isConnected.value = false;
        client.value.deactivate();
        client.value = null;
    }
};

const subscribe = (destination, callback) => {
    
    if (!isConnected.value || !client.value || !client.value.connected) {
        return null;
    }

    try {
        const subscription = client.value.subscribe(destination, (message) => {
            try {
                if (destination.includes('/queue/unread-count')) {
                    callback(message);
                } else {
                    const parsedMessage = JSON.parse(message.body);
                    callback(parsedMessage);
                }
            } catch (error) {
                callback(message);
            }
        });
        
        return subscription;
    } catch (error) {
        return null;
    }
};

export function useWebSocket() {
    return {
        client,
        isConnected,
        connect,
        disconnect,
        subscribe,
    };
}