Vue 3/Nuxt 3中WebSocket连接及消息弹窗显示问题排查

一、先排查WebSocket收不到消息的核心问题 #

你的代码已经能建立连接，但收不到消息，大概率是以下几个点没处理到位：

1. URL拼接逻辑错误 #

检查你的WS_URL格式：如果原URL末尾没有?（比如ws://example.com/ws），直接用&拼接参数会导致参数失效，应该根据原URL是否已有查询参数动态选择分隔符：

const separator = socketUrl.includes('?') ? '&' : '?';
// 同时补上你定义了但没用到的clientId/clientSecret（Postman里肯定用了这俩）
const completeSocketURL = `${socketUrl}${separator}client_id=${clientId}&client_secret=${clientSecret}&Authorization=Bearer ${localStorage.getItem("keycloakToken")}`;

2. 缺失订阅动作 #

很多WebSocket服务要求连接成功后主动发送订阅指令才会推送消息，Postman里你可能手动发了订阅请求，但代码里没做。对照Postman的请求格式，在onopen里加订阅逻辑：

socket.onopen = (event) => {
  isConnected.value = true;
  console.log("连接已打开", event);
  // 替换成服务要求的订阅格式，比如指定主题
  socket.send(JSON.stringify({
    action: 'subscribe',
    topic: 'your-target-topic'
  }));
};

3. Token有效性验证 #

确保localStorage.getItem("keycloakToken")返回的是完整、未过期的JWT，和Postman里用的Token完全一致（没有多余空格、格式正确）。

4. 修正事件绑定的函数上下文 #

把普通函数改成箭头函数，避免this指向问题，同时直接打印event.data更直观：

socket.onmessage = (event) => {
  console.log("收到消息:", event.data);
  // 这里触发弹窗逻辑
  showPopup(event.data);
};

二、实现消息弹窗提示 #

1. 自定义弹窗组件（Notification.vue） #

<template>
  <div v-if="isVisible" class="notification-overlay">
    <div class="notification-card">
      <h3>新消息提醒</h3>
      <p>{{ content }}</p>
      <button @click="close">关闭</button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps(['content', 'isVisible']);
const emit = defineEmits(['close']);

const close = () => emit('close');
</script>

<style scoped>
.notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.notification-card {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
</style>

2. 在主组件中集成弹窗 #

<template>
  <div>
    <button @click="connectWebSocket" :disabled="isConnected">
      {{ isConnected ? '已连接' : '连接WebSocket' }}
    </button>
    <Notification 
      :content="popupContent" 
      :isVisible="showPopup"
      @close="showPopup = false"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Notification from './Notification.vue';
const config = useRuntimeConfig();
const socketUrl = config.public.WS_URL;
const clientId = config.public.WS_CLIENT_ID;
const clientSecret = config.public.WS_CLIENT_SECRET;
const webSocket = ref(null);
const isConnected = ref(false);
const showPopup = ref(false);
const popupContent = ref('');

const showPopupHandler = (msg) => {
  popupContent.value = msg;
  showPopup.value = true;
};

const connectWebSocket = () => {
  const separator = socketUrl.includes('?') ? '&' : '?';
  const completeSocketURL = `${socketUrl}${separator}client_id=${clientId}&client_secret=${clientSecret}&Authorization=Bearer ${localStorage.getItem("keycloakToken")}`;

  const socket = new WebSocket(completeSocketURL);

  socket.onopen = (event) => {
    isConnected.value = true;
    console.log("连接已打开", event);
    // 发送订阅请求（按服务要求调整格式）
    socket.send(JSON.stringify({ action: 'subscribe', topic: 'your-topic' }));
  };

  socket.onmessage = (event) => {
    console.log("收到消息:", event.data);
    showPopupHandler(event.data);
  };

  socket.onerror = (event) => {
    console.error("WebSocket错误:", event);
  };

  socket.onclose = (event) => {
    isConnected.value = false;
    console.log("连接已断开", event);
  };

  webSocket.value = socket;
};

// 页面加载自动连接（可选）
onMounted(() => {
  connectWebSocket();
});
</script>

三、额外排查点 #

• 打开浏览器Network面板，查看WebSocket握手请求的响应状态，确认是否有4xx/5xx错误，或跨域限制；
• 如果用wss加密连接，确保证书有效，无浏览器安全警告；
• 检查WebSocket服务端日志，确认是否收到你的订阅请求，以及是否有推送记录。

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