首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在Nuxt 3中启动websocket服务器(socketIO或其他)?不像在Nuxt 2中工作一样

如何在Nuxt 3中启动websocket服务器(socketIO或其他)?不像在Nuxt 2中工作一样
EN

Stack Overflow用户
提问于 2022-06-07 16:16:44
回答 3查看 1.1K关注 0票数 2

我正在尝试将代码从Nuxt 2转换为Nuxt 3,在Nuxt 3中创建websocket服务器时遇到了问题。

在Nuxt 2中,使用以下代码可以很好地工作:

代码语言:javascript
运行
复制
// 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")
        })
    })
}
代码语言:javascript
运行
复制
// Nuxt 2: plugins/socket.client.js
import io from 'socket.io-client'
const socket = io('http://localhost:3000')

export default ({}, inject) => {
    inject('socket', socket)
}
代码语言:javascript
运行
复制
<!-- 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代码如下所示:

代码语言:javascript
运行
复制
// 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")
        })
    })
}
代码语言:javascript
运行
复制
// 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
        }
    }
})
代码语言:javascript
运行
复制
<!-- 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

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-06-08 14:33:19

我想出来了!

深入研究Nuxt 3代码,结果发现它们有一个listen钩子,它提供了我设置服务器所需的server参数。然而,这个信息确实很难找到。

我还设法简化了脚本。

以下是更新的modules/socket.js

代码语言:javascript
运行
复制
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")
        })
    })
}

其他一切都可以保持不变

票数 2
EN

Stack Overflow用户

发布于 2022-07-04 16:23:35

我用的是跟创建文件“模块/wsserver.ts”相同的方法

代码语言:javascript
运行
复制
import { WebSocketServer } from "ws"

export default (_: any, nuxt: any) => {
  nuxt.hook("listen", (server: any) => {
    const wss = new WebSocketServer({ server })

    nuxt.hook("close", () => wss.close())

    wss.on("connection", function connection(ws) {
        ws.on("message", function message(data) {
            console.log("received: %s", data)
        })

        ws.send("something")
    })
})

}

然后在nuxt.config注册

代码语言:javascript
运行
复制
 modules: ["./modules/wsserver"],
票数 0
EN

Stack Overflow用户

发布于 2022-07-21 16:21:46

基于@ahbork的响应和Nuxt 3文档的添加,我在Vue 3+ Nuxt 3+类型记录中得到了以下内容:

代码语言:javascript
运行
复制
import { Server } from 'socket.io'
import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    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`)
        })
      })
    })
  },
})
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72534527

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档