如何在SvelteKit中为Vite注册Socket.IO并访问底层服务器

完全可以实现该需求，SvelteKit 没有直接暴露内置服务器入口是因为它适配多部署环境的特性，搭配 Node.js 适配器即可实现和 Sapper 类似的自定义服务挂载逻辑，彻底解决端口独立、跨域问题，具体操作步骤如下：

前置配置 #

1. 安装依赖 #

• 安装 Node.js 适配器和 Socket.IO 相关包：

npm install @sveltejs/adapter-node socket.io socket.io-client express

• 修改 svelte.config.js 切换为 Node.js 适配器：

import adapter from '@sveltejs/adapter-node';

export default {
  kit: {
    adapter: adapter()
  }
};

生产环境配置 #

在项目根目录新建自定义服务启动文件 server.js，同时挂载 SvelteKit 处理逻辑和 Socket.IO，二者共用同一服务端口：

import { createServer } from 'http';
import { Server } from 'socket.io';
import express from 'express';
import { handler } from './build/handler.js'; // SvelteKit 构建后自动生成的请求处理函数

const app = express();
const httpServer = createServer(app);

// 挂载Socket.IO，和SvelteKit共用服务端口，无跨域问题
const io = new Server(httpServer);

// Socket.IO 业务逻辑处理
io.on('connection', (socket) => {
  console.log('客户端连接成功：', socket.id);
  // 自定义事件监听
  socket.on('sendMsg', (data) => {
    io.emit('pushMsg', data);
  });
});

// 挂载SvelteKit路由处理逻辑
app.use(handler);

// 统一端口监听
httpServer.listen(3000, () => {
  console.log('服务运行地址：http://localhost:3000');
});

生产环境启动流程：

1. 执行 npm run build 构建 SvelteKit 项目
2. 执行 node server.js 启动自定义服务即可

开发环境配置 #

开发环境默认使用 Vite 内置服务，需要编写 Vite 插件注入 Socket.IO 逻辑，无需启动额外服务：

1. 根目录新建 vite-plugin-socketio.js 插件文件：

import { Server } from 'socket.io';

export default function vitePluginSocketIO() {
  return {
    name: 'vite-plugin-socketio',
    configureServer(server) {
      if (!server.httpServer) return;
      const io = new Server(server.httpServer);
      // 可直接引入抽离的公共Socket.IO逻辑，避免和生产环境写重复代码
      io.on('connection', (socket) => {
        console.log('开发环境客户端连接：', socket.id);
        socket.on('sendMsg', (data) => {
          io.emit('pushMsg', data);
        });
      });
    }
  };
}

2. 修改 vite.config.js 引入插件：

import { sveltekit } from '@sveltejs/kit/vite';
import vitePluginSocketIO from './vite-plugin-socketio.js';

export default {
  plugins: [sveltekit(), vitePluginSocketIO()]
};

开发环境直接执行 npm run dev 即可，Socket.IO 会自动挂载到 Vite 服务上。

客户端连接代码 #

在 Svelte 组件中直接连接即可，无需额外指定端口：

<script>
import { io } from 'socket.io-client';
// 自动适配当前域名，开发生产环境通用
const socket = io();

socket.on('connect', () => {
  console.log('客户端连接成功');
});
socket.on('pushMsg', (data) => {
  console.log('收到服务端消息：', data);
});
</script>

特殊场景说明 #

如果你使用的是非 Node.js 部署环境（如 Cloudflare Pages、Vercel 等无服务器平台），本身不支持长连接挂载，可单独部署 Socket.IO 服务端，客户端直接连接独立服务端地址并配置跨域规则即可。

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