Svelte/Sveltekit 和 socket.io-client 在开发中不工作（在预览版中工作）答案

【问题标题】：Svelte/Sveltekit and socket.io-client not working in dev (works in preview)Svelte/Sveltekit 和 socket.io-client 在开发中不工作（在预览版中工作）
【发布时间】：2021-09-27 16:43:32
【问题描述】：

我试图让socket.io-client 在一个纤细的前端应用程序中工作，以与已经使用 socket.io 的现有 API 服务器通信。经过一系列挑战后，我设法完成了这项工作，但我只能使用 sveltekit 的预览版而不是开发模式。想知道是否有一些了解这些知识的人可以解释原因或建议我需要做些什么才能使其在开发中连接？

苗条 3.34.0
sveltekit next-169
socket.io(-client) 4.2.0

基本代码如下，目前在一个文件$lib/db.js 中，我在其中定义了一些商店，这些商店被拉入布局中以供一般使用..

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..

svelte-kit preview --host 我看到带有套接字 ID 的套接字创建日志消息，并且在记录相同 ID 的 api 服务器上可以看到相同的消息。套接字正常工作并按预期接收数据。

但是，使用svelte-kit dev --host，来自socket.on("connect").. 的日志消息永远不会输出，我只是在浏览器控制台中看到来自socket.on("connect_error").. 调用的无穷无尽的错误消息流..

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

重要的是，根本没有尝试实际联系服务器。服务器永远不会收到连接请求，wireshark/tcpdump 确认没有数据包传输到192.168.1.5:4000

显然，每次代码更改都必须重新构建和重新运行预览模式，这让开发非常痛苦，有没有人知道这里的问题是什么或关于如何进行的建议？

【问题讨论】：

标签： socket.io svelte sveltekit

【解决方案1】：

我也遇到过类似的问题，我把这段代码加到svelte.config.js解决了：

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

解决方案由this comment来自vite issues提供。

【讨论】：

这似乎工作..谢谢:)