CODEWITHSUNDEEP
socket.iosveltesveltekit
darrend
darrend

Reputation: 815

Svelte/Sveltekit and socket.io-client not working in dev (works in preview)

I'm trying to make socket.io-client work in a svelte front end app to talk to an existing API server that already uses socket.io. After a number of challenges, I managed to make this work but I can only get this to work with sveltekit's preview and not in dev mode. Wondered if someone with some knowledge of those could explain why or suggest what I need to do to get it connecting in dev?

basic code as follows, currently within a file $lib/db.js where I define a few stores that are pulled into the layout for general use..

import { io } from "socket.io-client";
import { browser } from '$app/env';


const initSocket = async () => {
    console.log('creating socket...');
    let socket = io('http://192.168.1.5:4000', { 'connect timeout': 5000 });

    socket.on("connect", () => {
        // always works in preview...
        console.log('socket created with ID:', socket.id); 
    });

    socket.on("connect_error", (error) => {
        // permanently fired in dev...
        console.error('Failed to connect', error);
    });

    socket.on("error", (error) => {
        console.error('Error on socket', error);
    });

    socket.on("foo", data => {
        // works in preview when server emits a message of type 'foo'..
        console.log("FOO:", data);
    });

};

if (browser) {
    initSocket();
}

// stores setup and exports omitted..

with svelte-kit preview --host I see the socket creation log message with the socket ID and the same can be seen on the api server where it logs the same ID. The socket works and data is received as expected.

with svelte-kit dev --host however, the log message from socket.on("connect").. is never output and I just see an endless stream of error messages in the browser console from the socket.on("connect_error").. call..

Failed to connect Error: xhr poll error
    at XHR.onError (transport.js:31)
    at Request.<anonymous> (polling-xhr.js:93)
    at Request.Emitter.emit (index.js:145)
    at Request.onError (polling-xhr.js:242)
    at polling-xhr.js:205

Importantly, there is no attempt to actually contact the server at all. The server never receives a connection request and wireshark/tcpdump confirm that no packet is ever transmitted to 192.168.1.5:4000

Obviously having to rebuild and re-run preview mode on each code change makes development pretty painful, does anyone have insight as to what the issue is here or suggestions on how to proceed?

Upvotes: 2

Views: 2583

Answers (1)

error-prone
error-prone

Reputation: 56

I've had a similar problem, I solved it by adding this code to svelte.config.js:

const config = {
  kit: {
    vite: {
      resolve: {
        alias: {
          "xmlhttprequest-ssl": "./node_modules/engine.io-client/lib/xmlhttprequest.js",
        },
      },
    },
  },
};

The solution was provided by this comment from the vite issues.

Upvotes: 4

Related Questions