如何在Svelte应用全局使用socket.io？跨组件调用失败排查

问题场景 #

想在整个 Svelte 应用中全局复用 Socket.IO 连接，将 Socket 实例存入 writable store 后，在 App 组件初始化连接，子组件中监听事件却无法正常工作。

现有代码 #

store.js

export const socket = writable(); // 注：原代码遗漏了 `import { writable } from 'svelte/store'`，这是基础错误

可正常运行的写法

App.svelte

import { io } from "socket.io-client";
import { socket } from "./stores.js";

$socket = io();

$socket.on("orders", (orders) => {
    console.log(orders);
});

无法运行的写法

App.svelte

import { io } from "socket.io-client";
import { socket } from "./stores.js";

$socket = io();

Component.svelte

import { socket } from "./stores.js";

$socket.on("orders", (orders) => {
    console.log(orders);
});

问题原因 #

1. Store 初始化时机不匹配：子组件可能在 $socket 被赋值（Socket 连接建立）前就执行了 $socket.on，此时 $socket 为 undefined，调用方法直接报错。
2. 缺乏反应式监听：子组件顶层代码只会执行一次，若初始时 $socket 未就绪，后续 $socket 更新后不会重新绑定事件。

解决方案 #

步骤1：完善 Store 定义 #

补全 Store 的依赖导入，同时封装初始化方法，确保 Socket 实例的创建和管理更规范：
store.js

import { writable } from 'svelte/store';
import { io } from 'socket.io-client';

export const socket = writable(null);

// 封装 Socket 初始化方法
export const initSocket = (serverUrl = '') => {
    const socketInstance = io(serverUrl || window.location.origin);
    socket.set(socketInstance);
    return socketInstance;
};

步骤2：在根组件初始化 Socket #

在 App 组件的挂载生命周期中初始化 Socket，确保全局只建立一次连接：
App.svelte

import { initSocket } from "./stores.js";
import { onMount } from 'svelte';

onMount(() => {
    const socketInstance = initSocket('http://your-server-url'); // 替换为你的服务端地址
    // 页面卸载时断开连接，避免无效连接
    return () => socketInstance.disconnect();
});

步骤3：子组件安全监听事件 #

使用 Svelte 的反应式语句 $: 追踪 $socket 的变化，确保只有当 Socket 实例存在时才绑定事件，同时在组件销毁时移除监听防止内存泄漏：
Component.svelte

import { socket } from "./stores.js";
import { onDestroy } from 'svelte';

let orderHandler;

// 当 $socket 就绪时绑定事件
$: if ($socket) {
    orderHandler = (orders) => console.log(orders);
    $socket.on('orders', orderHandler);
}

// 组件销毁时移除监听
onDestroy(() => {
    if ($socket && orderHandler) {
        $socket.off('orders', orderHandler);
    }
});

简化写法（适合简单场景） #

如果组件不会频繁销毁重建，也可以用以下方式自动处理监听的更新：
Component.svelte

import { socket } from "./stores.js";

// 每次 $socket 更新时，先移除旧监听再绑定新监听
$: if ($socket) {
    $socket.off('orders');
    $socket.on('orders', (orders) => console.log(orders));
}

关键注意事项 #

• 必须在 store.js 中导入 writable，否则 Store 无法正常创建。
• 子组件中必须通过反应式语句监听 $socket 的变化，避免在实例未就绪时调用方法。
• 移除事件监听是必要的，防止内存泄漏和重复触发事件。

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