Svelte/SvelteKit开发模式下socket.io-client无法连接 预览模式正常

该问题是你使用的早期测试版SvelteKit的dev模式特性与socket.io-client的兼容性问题导致的，核心触发点有两个：

• SvelteKit next-169 内置的Vite 2.x开发服务器默认会对第三方依赖做预构建优化，socket.io-client@4.2.0 的ESM包结构不符合当时Vite的预构建规则，导致客户端初始化时内部的网络请求逻辑被破坏，没有触发实际的网络请求，这也是你抓不到发往4000端口数据包的原因。
• 早期SvelteKit dev模式默认的请求拦截逻辑会拦截非同源的socket.io初始xhr轮询请求，请求未发出就被本地dev服务器拦截。

按顺序尝试以下方案即可：

1. 首先在svelte.config.js中把socket.io-client加入预构建排除列表，避免Vite破坏包结构，配置如下：

// svelte.config.js
export default {
  kit: {
    // 其他原有配置保留
    vite: {
      optimizeDeps: {
        exclude: ['socket.io-client']
      }
    }
  }
}

配置修改完成后删除 node_modules/.vite 缓存文件夹，重启dev服务器验证是否恢复正常。

2. 如果第一步无效，修改socket初始化参数，显式指定传输协议优先级，优先走websocket跳过容易被拦截的xhr轮询：

// $lib/db.js
let socket = io('http://192.168.1.5:4000', { 
  'connect timeout': 5000,
  transports: ['websocket', 'polling']
});

3. 如果前两步都无效，给Vite配置socket.io代理，让请求走dev服务器同源路径避免被拦截，修改svelte.config.js的vite配置：

vite: {
  server: {
    proxy: {
      '/socket.io': {
        target: 'http://192.168.1.5:4000',
        ws: true,
        changeOrigin: true
      }
    }
  },
  optimizeDeps: {
    exclude: ['socket.io-client']
  }
}

对应修改socket初始化代码，使用相对路径连接：

let socket = io('/', { 
  'connect timeout': 5000,
  transports: ['websocket', 'polling']
});

内容的提问来源于stack exchange，提问作者darrend