NuxtJS Socket.IO不能在生产中工作

Question

我试图使用套接字。但不幸的是，它只适用于开发。一旦我构建并开始生产，它就不再工作了。我尝试了多种方法来做这件事(在最后解释)，我总是得到相同的输出。这个版本使用了next钩子，是最干净的，在dev上运行得很好。

这是我的服务器端模块(modules/ws.js):

import socketIO from 'socket.io'
export default function () {
this.nuxt.hook('listen', (server, { host, port }) => {
console.log(`ListentHook : Listening on http://${host}:${port}`)
const io = socketIO(server)
io.on('connection', (ws) => {
console.log('Client connected')
ws.on('message', (message) => {
console.log('received: %s', message)
})
ws.emit('message', 'Hello new client')
})
})
}

客户端，我有一个插件(插件/socket.io.js):

import io from 'socket.io-client'
const socket = io('http://localhost:3000')
export default socket

在我的vue上，我导入客户端套接字并监听消息(pages/index.vue):

<script>
import socket from '~/plugins/socket.io.js'
export default {
name: 'Index',
beforeMount () {
socket.on('message', this.printMsg)
},
methods: {
printMsg (msg) {
console.log(msg)
}
}
}
</script>

这是我的next .config.js文件:

...
buildModules: [
'@nuxtjs/eslint-module',
'@nuxtjs/tailwindcss',
'~/modules/ws'
],
...

在开发模式下它工作得很好。当我加载http://localhost:3000时，我得到:

"客户connected"服务器端

"你好，新客户";在客户端

现在，当我构建应用程序时，没有任何工作，我只在客户端控制台中得到一个错误:

http://localhost: 3000/socket . io/? EIO = 4,运输= polling& t = NSauEZA404(未找到)

我真不明白为什么。

我已经做了什么:

测试了官方的next with-sockets示例:https://github.com/nuxt/nuxt.js/tree/dev/examples/with-sockets——比;相同的结果(next独立版本)

查找，并张贴在gitHub问题:https://github.com/nuxt/nuxt.js/issues/6928——比;相同的结果

测试放置。env变量——比;相同的结果(工作环境变量改变了实际的服务器端口)

谢谢你的帮助!如果需要的话，我可以提供更多的代码!

Answer 1

您的模块是运行WS的服务器中间件，因此您必须在nuxt.config.js文件的modules数组中声明它，而不是在buildModules数组中声明它，以便在生产中运行。

正如next文档中所解释的，buildModules仅在开发和构建期间使用。