Vite项目客户端与服务端通信故障：无法接收服务端消息

问题现象 #

服务端控制台已打印"send"，说明WebSocket连接建立且消息已发送，但客户端浏览器未输出"123"，也无法获取服务端发送的msg数据。

核心原因 #

服务端在connection事件触发时立即发送消息，此时客户端的import.meta.hot.on('my:greetings')监听逻辑尚未完成注册，导致消息被丢失。

修复方案 #

方案1：客户端主动确认后服务端发送消息 #

修改服务端插件的configureServer逻辑，等待客户端发送准备就绪的信号后再发送消息：

// hot-load.ts
configureServer(server: ViteDevServer) {
  // 监听客户端发来的准备信号
  server.ws.on('client:ready', () => {
    server.ws.send('my:greetings', { msg: 'hello' })
    console.log('send')
  })
}

客户端在页面挂载完成后，主动向服务端发送确认信号：

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const msg = ref<string>()
defineOptions({
  name: 'IndexPage',
})

if (import.meta.hot) {
  // 注册自定义消息监听
  import.meta.hot.on('my:greetings', (data) => {
    msg.value = data.msg
    console.log(123)
  })

  // 页面挂载后通知服务端客户端已就绪
  onMounted(() => {
    import.meta.hot.send('client:ready')
  })
}
</script>

方案2：监听Vite内置的WebSocket连接事件 #

客户端通过监听Vite内置的vite:ws:connect事件，确保WebSocket连接完全建立后再注册自定义消息监听：

<script setup lang="ts">
const msg = ref<string>()
defineOptions({
  name: 'IndexPage',
})

if (import.meta.hot) {
  // 等待WebSocket连接建立完成
  import.meta.hot.on('vite:ws:connect', () => {
    import.meta.hot.on('my:greetings', (data) => {
      msg.value = data.msg
      console.log(123)
    })
  })
}
</script>

额外检查 #

确认项目中已正确注册自定义插件：在vite.config.ts中导入并添加myPlugin()到plugins数组中，确保插件生效。

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