如何在Nuxt3中创建并访问Socket.IO服务器

对于从Nuxt 2迁移过来的开发者，Nuxt 3基于Nitro的服务器架构和旧版差异较大，下面直接演示完整的实现步骤：

1. 安装必要依赖 #

首先安装Socket.IO的服务端和客户端包：

npm install socket.io socket.io-client
# TypeScript用户额外安装类型定义
npm install -D @types/socket.io @types/socket.io-client

2. 搭建Socket.IO服务器（Nuxt 3服务端） #

在Nuxt 3的server/plugins目录下创建socket.io.ts（无plugins目录则手动创建），这是Nuxt 3的服务器插件入口：

import { Server } from 'socket.io'

export default defineNitroPlugin((nitroApp) => {
  // 从Nitro的H3应用中获取HTTP服务器实例
  const io = new Server(nitroApp.h3App.server, {
    cors: {
      origin: "http://localhost:3000", // 替换为你的前端实际地址
      methods: ["GET", "POST"]
    }
  })

  // 监听客户端连接事件
  io.on('connection', (socket) => {
    console.log(`用户已连接: ${socket.id}`)

    // 监听客户端发送的自定义事件
    socket.on('client-send', (payload) => {
      console.log(`收到客户端消息: ${payload}`)
      // 向所有连接的客户端广播消息
      io.emit('server-broadcast', `服务器响应: ${payload}`)
    })

    // 监听客户端断开连接
    socket.on('disconnect', () => {
      console.log(`用户已断开: ${socket.id}`)
    })
  })
})

针对Nuxt 2迁移用户的关键差异 #

Nuxt 2中常用serverMiddleware挂载Socket.IO，但Nuxt 3改用Nitro插件体系，必须通过defineNitroPlugin获取服务器实例，不能直接在serverMiddleware中创建Socket.IO服务。

3. 客户端连接与通信（Nuxt 3前端） #

在任意Vue组件中实现Socket.IO客户端逻辑，比如创建components/SocketChat.vue：

<script setup>
import { io } from 'socket.io-client'
import { ref, onUnmounted } from 'vue'

// 连接到Socket.IO服务器
const socket = io('http://localhost:3000')

const inputMsg = ref('')
const messageList = ref<string[]>([])

// 监听服务器广播的消息
socket.on('server-broadcast', (msg) => {
  messageList.value.push(msg)
})

// 发送消息到服务器
const sendMessage = () => {
  if (!inputMsg.value.trim()) return
  socket.emit('client-send', inputMsg.value)
  inputMsg.value = ''
}

// 组件销毁时断开连接，避免内存泄漏
onUnmounted(() => {
  socket.disconnect()
})
</script>

<template>
  <div class="socket-chat">
    <input 
      v-model="inputMsg" 
      placeholder="输入消息发送"
      @keyup.enter="sendMessage"
    />
    <button @click="sendMessage">发送</button>
    <div class="message-list">
      <h4>消息记录:</h4>
      <div v-for="(msg, idx) in messageList" :key="idx" class="message-item">
        {{ msg }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.socket-chat {
  max-width: 400px;
  margin: 20px auto;
}
.message-item {
  margin: 8px 0;
  padding: 6px;
  background: #f5f5f5;
  border-radius: 4px;
}
</style>

4. 常见注意事项 #

• 跨域配置：生产环境要将cors.origin替换为实际前端域名，不要使用*（存在安全风险）。
• 开发模式热重载：Nuxt 3开发时的热重载会重启服务器，导致Socket.IO连接断开，这是正常现象，生产环境无此问题。
• 版本兼容：确保服务端和客户端的Socket.IO版本一致，避免出现连接失败的情况。

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