我正在尝试将代码从Nuxt 2转换为Nuxt 3,在Nuxt 3中创建websocket服务器时遇到了问题。
在Nuxt 2中,使用以下代码可以很好地工作:
// Nuxt 2: modules/socket.js
import http from 'http'
import socketIO from 'socket.io'
export default function () {
this.nuxt.hook('render:before', () => {
const server = http.createServer(this.nuxt.renderer.app)
const io = socketIO(server)
this.nuxt.server.listen = (port, host) => new Promise(resolve => server.listen(port || 3000, host || 'localhost', resolve))
this.nuxt.hook('close', () => new Promise(server.close))
io.on('connection', (socket) => {
console.log("CONNECTED")
})
})
}
// Nuxt 2: plugins/socket.client.js
import io from 'socket.io-client'
const socket = io('http://localhost:3000')
export default ({}, inject) => {
inject('socket', socket)
}
<!-- Nuxt 2: pages/index.vue -->
<template>
<div>
<p>Check socket status in Vue devtools...</p>
</div>
</template>
<script>
export default {
computed: {
socket() {
return this.$socket ? this.$socket : {};
}
}
}
</script>
但是,在Nuxt 3中,我不能访问this.nuxt.renderer.app
文件中的modules/socket.js
文件(对于http.createServer(...)
),而且我也不知道如何在Nuxt3模块的其他地方访问正确的renderer.app
。我的Nuxt 3代码如下所示:
// Nuxt 3: modules/socket.js
import http from 'http'
import socketIO from 'socket.io'
export default (_, nuxt) => {
// Note that I use the 'ready' hook here - render:before is apparently not included in Nuxt3.
nuxt.hook('ready', renderer => {
// nuxt.renderer is undefined, so I've tried with renderer.app instead, with no luck.
const server = http.createServer(renderer.app)
const io = socketIO(server)
nuxt.server.listen = (port, host) => new Promise(resolve => server.listen(port || 3000, host || 'localhost', resolve))
nuxt.hook('close', () => new Promise(server.close))
io.on('connection', () => {
console.log("CONNECTION")
})
})
}
// Nuxt 3: plugins/socket.client.js
import io from 'socket.io-client'
export default defineNuxtPlugin(() => {
const socket = io('http://localhost:3000')
return {
provide: {
socket: socket
}
}
})
<!-- Nuxt 3: app.vue -->
<template>
<div>
<p>Check socket status in Vue devtools...</p>
</div>
</template>
<script setup>
const { $socket } = useNuxtApp()
</script>
我会为您创建一个代码框链接,但每次尝试,它都会在添加任何代码之前中断。我认为它还不能正确地与Nuxt3一起工作。是否有人在Nuxt 3模块中成功地建立了websocket服务器?或者有人能看到我错过了什么?
我对任何工作解决方案都感兴趣,它不一定非得是socket.io
。
发布于 2022-06-08 14:33:19
我想出来了!
深入研究Nuxt 3代码,结果发现它们有一个listen
钩子,它提供了我设置服务器所需的server
参数。然而,这个信息确实很难找到。
我还设法简化了脚本。
以下是更新的modules/socket.js
import { Server } from 'socket.io'
export default (_, nuxt) => {
nuxt.hook('listen', server => {
const io = new Server(server)
nuxt.hook('close', () => io.close())
io.on('connection', () => {
console.log("CONNECTION")
})
})
}
其他一切都可以保持不变
https://stackoverflow.com/questions/72534527
复制相似问题