Nuxt 3集成SockJS over Stomp模块的配置与报错解决

一、加载SockJS/Stomp模块的nuxt.config.ts配置 #

sockjs-client和@stomp/stompjs是仅浏览器环境运行的库，在Nuxt3中需配置避免服务端渲染阶段加载，同时确保Vite正确转译。修改nuxt.config.ts如下：

export default defineNuxtConfig({
  ssr: true, // 若应用不需要SSR，可直接设为false，无需额外配置
  vite: {
    // 让Vite正确处理库的SSR兼容性
    ssr: {
      noExternal: ['sockjs-client', '@stomp/stompjs']
    }
  }
})

二、解决"Uncaught ReferenceError: global is not defined"报错 #

该报错因sockjs-client依赖Node.js的global对象，但浏览器环境不存在此对象，需在Vite中注入全局变量模拟。完善nuxt.config.ts：

export default defineNuxtConfig({
  ssr: true,
  vite: {
    ssr: {
      noExternal: ['sockjs-client', '@stomp/stompjs']
    },
    define: {
      // 为浏览器环境模拟Node.js的global对象
      'global': 'window'
    }
  }
})

额外优化：确保代码仅在客户端执行 #

1. 组件代码调整：将WebSocket连接逻辑放在onMounted钩子中，确保仅在客户端挂载后执行：

<script lang="ts" setup>
import { useRouter, ref, onMounted } from "#imports";
import SockJS from "sockjs-client";
import { Stomp } from "@stomp/stompjs";

let consoleText = ref<string>("");

interface ConsoleMessage {
  messageContent: string,
  user: string,
}

const props = defineProps<{
  originURL:string,
  publicURL:string,
  privateURL:string
}>();

let stompClient: any = null;
function connect() {
  const socket = new SockJS(props.originURL);
  stompClient = Stomp.over(socket);
  stompClient.connect({}, function () {
    stompClient.subscribe(props.publicURL, function (message: { body: string; }) {
      showMessage(JSON.parse(message.body));
    });
    stompClient.subscribe(props.privateURL, function (message: { body: string; }) {
      showMessage(JSON.parse(message.body));
    });
  });
}

function showMessage(message: ConsoleMessage) {
  consoleText.value = "\n" + message.messageContent + "\n";
}

// 仅在客户端挂载后执行连接
onMounted(() => {
  connect();
});
</script>

2. 插件代码调整：仅在客户端环境加载SockJS并提供实例：

import { defineNuxtPlugin } from "nuxt/app";
import { CompatClient, Stomp } from "@stomp/stompjs";
import { Message } from "~/composables/display";

export default defineNuxtPlugin((nuxtApp) => {
  // 仅在客户端初始化SockJS
  if (process.client) {
    const SockJS = require('sockjs-client').default;
    
    nuxtApp.provide('sock', () => new NuxtSockJs(SockJS))
  }
})

declare module '#app' {
  interface NuxtApp {
    $sock? (): NuxtSockJs
  }
}

export class NuxtSockJs {
  stompInstance: CompatClient | null;
  private SockJS: any;

  constructor(SockJS: any) {
    this.stompInstance = null;
    this.SockJS = SockJS;
  }

  connect(originURL:string,
          subscribeURLs:Array<string>,
          displayMessage: (message: Message) => any): void {
    const socket = new this.SockJS(originURL);
    let stompClient: CompatClient = Stomp.over(socket);
    stompClient.connect({}, function () {
      for(const subscribeURL of subscribeURLs) {
        stompClient.subscribe(subscribeURL, function (message: { body: string; }) {
          displayMessage(JSON.parse(message.body));
        });
      }
    });
    this.stompInstance = stompClient;
  }

  sendMessage(sendURL: string, message: Message):void {
    this.stompInstance?.send(sendURL, {}, JSON.stringify(message));
  }
}

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