gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 04:23:59 28 4
gpt4 key购买 nike

我正在 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

最佳答案

我找到了问题的解决方案,出于某种原因,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"
}
}

关于javascript - Socket.io websocket 在生产时无法在 Nuxt 3 中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73592619/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com