CODEWITHSUNDEEP
socket.iosveltesveltekit
Midnight
Midnight

Reputation: 33

socket.emit not executing inside function in sveltekit

I am having problems with SvelteKit and SocketIO. I'm connecting to a NestJS back-end with a default SocketIO gateway and connecting works fine, but executing a socket.emit inside a function fails to trigger entirely. Not sure if this is SocketIO or SvelteKit related, but executing an emit outside of a function works. Here is my code snippet.

<script>
    import io from 'socket.io-client';
    let socket = io('http://localhost:5000');

    socket.on("connect", () => {
        console.log(socket.id);
    });

    socket.on("messages", (arg) => {
        console.log(arg);
    });

    socket.emit("messages", "executes at load", (err) => {
        console.log(err);
    });

    function onSendMessage() {
        console.log('executing function');
        socket.emit("messages", "test", (err) => {
            console.log(err);
        });
    }
</script>

<button on:click={onSendMessage}>
    Send Message
</button>

In this situation ''executes at load'' is printed to the console because it is emitted and the server sends the response back which the socket.on catches. It also prints the ID of the connection through socket.on("connect"). but it never will print ''test'' if i press the button. Pressing the button does console log the ''executing function''. Tested all functionality on Postman as well and the server works. Executing the function manually directly in the script tag without the button onclick results in the same behaviour of the emit not executing. Anyone has an idea?

Upvotes: 0

Views: 388

Answers (1)

Midnight
Midnight

Reputation: 33

After a long time of agony I discovered the problem. I think it has to do with the fact that it was trying to establish an XHR Polling connection on the clientside but not on the SSR side of SvelteKit, and it seems that XHR Polling does not support CORS but websockets do.

All I had to do was specify the transport as ''websocket'' on both the frontend and backend and it works perfectly!

Upvotes: 1

Related Questions