SvelteKit使用STOMP WebSocket提示WebSocket not defined报错如何解决

报错原因 #

SvelteKit默认开启服务端渲染（SSR），代码会先在Node环境执行一次，而Node原生没有浏览器提供的WebSocket全局对象，stompjs初始化时直接读取全局WebSocket就会抛出该错误。

WebSocket本身是浏览器端的长连接协议，绝大多数场景下不需要在服务端执行STOMP相关代码，直接将逻辑限定在客户端运行即可，有两种常用实现方式：

• 方式一：在onMount生命周期中动态导入并初始化，onMount仅会在浏览器端触发

<script lang="ts">
  import { onMount } from 'svelte';
  import type { Client } from 'stompjs';

  let client: Client | null = null;

  onMount(async () => {
    const Stomp = await import('stompjs');
    const url = '你的WebSocket连接地址';
    const headers = {}; // 替换为实际的连接头配置
    client = Stomp.client(url);
    client.connect(headers, () => { 
      console.log('connected'); 
    });
  });
</script>

• 方式二：给脚本块添加context="client"属性，标记整个脚本仅在客户端运行，适合整个组件都是客户端逻辑的场景

<script lang="ts" context="client">
  import * as Stomp from 'stompjs';

  const url = '你的WebSocket连接地址';
  const headers = {}; // 替换为实际的连接头配置
  const client = Stomp.client(url);
  client.connect(headers, () => { 
    console.log('connected'); 
  });
</script>

如果确实有服务端运行STOMP逻辑的需求，可以给Node环境注入WebSocket实现：

1. 安装polyfill依赖：npm install ws
2. 新建src/hooks.server.ts文件（SvelteKit服务端全局钩子，会在服务端逻辑执行前运行），添加如下代码：

import { WebSocket } from 'ws';

// 给Node全局对象挂载WebSocket实现
globalThis.WebSocket = WebSocket as any;

3. 按原有写法直接导入使用stompjs即可，服务端运行时会自动读取全局挂载的WebSocket对象。

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