Socket.io websocket 在生产时无法在 Nuxt 3 中工作

Question

我正在 Nuxt 3 应用程序中创建一个 socket.io 实现。当我处于开发模式时，websockets 可以工作，但我收到此错误 error message。我正在使用 Nuxt 版本 nuxt v3.0.0-rc.8，这是我的 nuxt.config.ts 文件的样子：

import { defineNuxtConfig } from 'nuxt';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    css: [
        'primevue/resources/themes/saga-blue/theme.css',
        'primevue/resources/primevue.css',
        'primeicons/primeicons.css'
    ],
    build: {
        transpile: [
            'primevue'
        ],
    },
    modules: [
        './modules/socket'
    ]
})

这是我的 modules/sockets.ts 文件的样子：

import { Server } from 'socket.io';
import { defineNuxtModule } from '@nuxt/kit';

export default defineNuxtModule({
  setup(_, nuxt) {
    console.log('Socket Read');
    
    nuxt.hook('listen', (server) => {
      console.log('Socket listen', server.address(), server.eventNames())
      const io = new Server(server)

      nuxt.hook('close', () => io.close())

      io.on('connection', (socket) => {
        console.log('Connection', socket.id)
      })

      io.on('connect', (socket) => {
        socket.emit('message', `welcome ${socket.id}`)
        socket.broadcast.emit('message', `${socket.id} joined`)

        socket.on('message', function message(data: any) {
          console.log('message received: %s', data)
          socket.emit('message', { data })
        })

        socket.on('disconnecting', () => {
          console.log('disconnected', socket.id)
          socket.broadcast.emit('message', `${socket.id} left`)
        })
      })
    });
  },
});

这是我的 plugins/socket.client.ts 文件的样子

import io from 'socket.io-client';

export default defineNuxtPlugin(() => {
    const socket = io('http://localhost:3000');

    return {
        provide: {
            io: socket
        }
    }
});

这是我的 app.vue 文件，它具有套接字发射事件的简单按钮实现

<template>
   <button @click="sendMessage" class="btn btn-primary">Send Message</button>
</template>

<script setup lang="ts">
  const { $io } = useNuxtApp();

  const sendMessage = () => {
    console.log('Click');
    $io.emit("message", "new message sent");
  };
  
</script>

这是我的 package.json 文件

{
"private": true,
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxi dev",
    "generate": "nuxi generate",
    "preview": "nuxi preview",
    "start": "node .output/server/index.mjs"
  },
  "devDependencies": {
    "nuxt": "^3.0.0-rc.8"
  },
  "dependencies": {
    "primeflex": "^3.2.1",
    "primeicons": "^5.0.0",
    "primevue": "^3.16.1",
    "socket.io": "^4.5.2",
    "socket.io-client": "^4.5.2"
  }
}

Here is a replit playground that I set up

Answer 1

我找到了解决问题的方法，出于某种原因，Nuxt 3 在生产启动时没有执行我的 socket.io 模块。我使用 serverHandlers（以前称为 serverMiddleware）创建了自己的解决方案，这就是我所做的。

这是我的 nuxt.config.ts 文件

import { defineNuxtConfig } from 'nuxt';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    css: [
        'primevue/resources/themes/saga-blue/theme.css',
        'primevue/resources/primevue.css',
        'primeicons/primeicons.css'
    ],
    build: {
        transpile: [
            'primevue'
        ],
    },
    serverHandlers: [
        {
            route: '/ws',
            handler: '~/server-middleware/socket'
        }
    ]
}) 

这是我的服务器中间件/socket.ts

import { Server } from 'socket.io';

const io = new Server(3001, {
  cors: {
      origin: '*',
  }
});

io.on('connection', (socket) => {
  console.log('Connection', socket.id)
})

io.on('connect', (socket) => {
  socket.emit('message', `welcome ${socket.id}`)
  socket.broadcast.emit('message', `${socket.id} joined`)

  socket.on('message', function message(data: any) {
    console.log('message received: %s', data)
    socket.emit('message', { data })
  })

  socket.on('disconnecting', () => {
    console.log('disconnected', socket.id)
    socket.broadcast.emit('message', `${socket.id} left`)
  })
});

export default function (req, res, next) {
  res.statusCode = 200
  res.end()
}

这是我的 app.vue

<template>
   <button @click="sendMessage" class="btn btn-primary">Send Message</button>
</template>

<script setup lang="ts">
  const { $io } = useNuxtApp();

  const sendMessage = () => {
    console.log('Click');
    $io.emit("message", "new message sent");
  };
  
</script>

这是我的 package.json

{
"private": true,
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxi dev",
    "generate": "nuxi generate",
    "preview": "nuxi preview",
    "start": "node .output/server/index.mjs"
  },
  "devDependencies": {
    "nuxt": "^3.0.0-rc.8"
  },
  "dependencies": {
    "primeflex": "^3.2.1",
    "primeicons": "^5.0.0",
    "primevue": "^3.16.1",
    "socket.io": "^4.5.2",
    "socket.io-client": "^4.5.2"
  }
}

Answer 2

所以我设法修复了错误。我正在使用 Webseocket 服务器 (ws) 而不是 socket.io。我在 server/middleware/socket.ts 中创建了一个服务器中间件

该中间件利用 Nuxt 服务器创建套接字服务器。

这是git repo