Add support for websockets

[tobiasdiez]

Describe the feature

There are a few instances were support for websocket was wished for, or workarounds were discussed (see references below), but no I couldn't find a proper issue.

I would volunteer to help implementing websocket support, and formulate a proper RFC. But for this I first need a general direction and scope for this feature. @pi0 @danielroe
Questions to be clarified are: Do you want to implement this at h3, or only at the level of nitro? Should the presets handle ws support? How to include vendor-specific implementations like fastify-websocket?

References:

• nuxt/content uses ws here: https://github.com/nuxt/content/blob/8d4a3ca7ede0af12d6cf472816c67a67f5bd4d43/src/module.ts#L662
• https://github.com/nuxt/framework/discussions/3907
• feat: add listen hook in node-server preset #270
• Nitropack dev server breaks all websocket connection #467

Additional information

• Would you be willing to help implement this feature?

[marshallswain]

WebSocket support would be really nice, and more especially useful if it were implemented similar to what we've done with FeathersJS. We've created "transport" plugins that adapt requests from each transport into the same routes/functions on the backend. You also still have access to create custom entries that only work with a specific transport.

Here are examples of the three primary transports that we bundle with FeathersJS Dove:

• The Koa adapter: https://dove.feathersjs.com/api/koa.html
• The Express adapter: https://dove.feathersjs.com/api/express.html
• The Socket.io adapter: https://dove.feathersjs.com/api/socketio.html

There's also a community-built adapter for Fastify, somewhere out there. It seems like a pretty unjs-like approach to implementing multi-transport support. We had to standardize on a socket API that's based around the Feathers Service interface. You can see the client message format for each method (find, get, create, update, patch, remove, and custom methods), here: https://dove.feathersjs.com/api/client/socketio.html#find.

Maybe it's worthwhile to create a @feathersjs/nitro adapter for Feathers.

Anyway, those are my thoughts. Use them as you wish, or not. 😁

[genu]

Is this more feasable now with the release of Nuxt 3 stable?

[bf]

I'd also be interested in this. I want to use socket.io with nuxt3 and I'm struggling to make socket-io server work as nitroApp plugin.

[NoeReverse]

So, is it possible to somehow use Socket.io with Nitro?

[gitFoxCode]

@NoeReverse I use it like this:
server/plugins/socket.io.server.ts

import { Server } from 'socket.io'
export default defineNitroPlugin((nitroApp) => {
    const socketServer = new Server(3001, {
        serveClient: false,
        cors: {
            origin: '*'
        }
    })
    socketServer.on('connection', (socket) => {
        socket.on("message", async (message)=>{
            socketServer.emit("message", {
                    type: "user",
                    author: message.author,
                    content: message.content
            })
         })
     })
})

[SebbeJohansson]

We are using ngrok and have not been able to get a solution for this.

[francisashley]

+1

[septatrix]

The groundwork is currently being done in h3: unjs/h3#544

[grokpot]

I played around with a few configurations of sockets in Nitro last week.
Here's a nice state of the art, current as of now:
https://stackoverflow.com/questions/75970500/how-to-use-socket-io-with-nuxt-3

But there's a bigger discussion to be had - Nitro is mean to "run anywhere".
For those of us using serverless, or Serverless-as-a-Service (e.g. Vercel), I don't think sockets would work even if Nitro contained them, because the functions spin up and spin down.

So, what would sockets look like on Nitro deployed to serverless?

P.S. - my solution?
I ended up using Supabase's realtime service since I was using Supabase anyways.

[septatrix]

So, what would sockets look like on Nitro deployed to serverless?

I guess at first they would simply not be supported on most providers. However, some edge runtimes such as cloudflare workers do support websockets so this could become supported for them in the future.

[pi0]

spoiler

[GaborTorma]

Maybe it's worthwhile to create a @feathersjs/nitro adapter for Feathers.

@marshallswain Do you have a plan to make @feathersjs/nitro adapter?

It would be great. ;)

[pi0]

https://nitro.unjs.io/guide/websocket