如何在NUXT 3中启动WebSocket Server（套接字或其他）？与NUXT 2中的工作不一样

Question

我正在尝试将NUXT 2转换为NUXT 3的代码，并且我遇到了在NUXT 3中创建WebSocket Server的问题。

它在NUXT 2中使用此代码在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中，我无法访问<我无法访问< code> this.nuxt.renderer.app 在模块/socket.js file（用于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。

Answer 1

我弄清楚了！

深入挖掘NUXT 3代码，事实证明，它们具有listan挂钩，该挂钩提供了server参数，我需要设置服务器。但是，这些信息确实很难找到。

我还设法简化了脚本。

这是已更新的模块/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")
        })
    })
}

其他一切都可以保持相同

Answer 2

根据 @ahbork的响应和NUXT 3文档的添加，我在VUE 3 + NUXT 3 + TYSTICT上获得了此内容：

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`)
        })
      })
    })
  },
})

Answer 3

thx anbork我正在使用ws ws w s in /modules/wsserver.ts

import { WebSocketServer } from "ws";
import { defineNuxtModule } from "@nuxt/kit";

export default defineNuxtModule({
  setup(options, nuxt) {
    nuxt.hook("listen", (server) => {
      const wss = new WebSocketServer({ server });
      nuxt.hook("close", () => wss.close());
      wss.on("connection", (ws) => {
        console.log("connection");
        ws.on("message", (data) => console.log("received: %s", data));
        ws.send("someting");
      });
    });
  },
});

和页面文件中创建文件

let ws;
onMounted(() => {
  const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
  ws = new WebSocket(`${wsProtocol}//${window.location.host}`);
  ws.onopen = () => console.log("connected");
  ws.onmessage = ({ data }: any) => {
    console.log("data", data);
  };
});
const sendMessage = () => {
  ws.send("hello");
};