How to use Socket.IO with NUXT 3?

Question

I'd like to use Socket.IO with my Nuxt 3 app, so that the Nuxt app and the Socket.IO server share the same port and the Socket.IO server automatically starts as soon as the Nuxt app is ready.

I've explored five different solutions, but they all have their downsides:

Solution 1: Using nuxt-socket-io. Here, the readme refers to a workaround to get the module to work with Nuxt 3 and newer Socket.io version, however the workaround leads to a 404 page as the author of the repo disabled the issues altogether and does not seem to maintain the module any more.

tl; dr: Doesn't work, no support.

Solution 2: Using nuxt3-socket.io. This produces this error.

Update (January 2024): This module currently seems to work fine in both development and production and is very easy to use. However, I currently cannot get hot reloading (of the socket.io server) to work with this solution, even though nitro reloads when the files are modified. I hope this issue gets fixed.

This issue suggest a potential compatibility problem, however I was not able to reproduce (this on macOS).

tl; dr: Works good, easy to use, but without hot reloading (of the socket.io server) and might not work on every platform. (This is my currently preferred solution)

Solution 3: Using Nuxt middleware to start a Socket.io server like described here. This approach generally works, but the Socket.io server does not start until the "/ws"-route is requested, so it requires additional client side code.

tldr; Generally works, but Socket.io does not start automatically.

Solution 4: Using a Nuxt plugin with the listen hook like described here. This does exactly what I want, when in development. However, since the listen hook is only called when in development mode and not when in production mode, the Socker.io server does not run when in production.

tl; dr: Works, but only in development.

Solution 5: Having Socket.io on a different port, but using http-proxy, to proxy everything to one port, like described here. This seems to be the best solution so far. However, this approach seems to cause longer load times, especially in development.

tl; dr: Works fine, but seems slow.

Solution 6: As suggested by users swooshi and Agustin Nuñez, a solution using custom nitro entry files (like described here), seems to work well. However, as it basically replaces the nitro entries, this workaround probably has to be adjusted every time the nitro version is changed.

tl; dr: Works fine, needs constant maintenance.

Update: Solution 7: Nitro now natively (and experimentally) includes the possibility to define websocket handlers, which seems to finally be a great solution for those who are fine with using WebSocket instead of SocketIO. The question of how to use Socket.IO, however, remains open.

tl; dr: Perfectly fine solution, but uses WebSocket instead of Socket.IO.

So here comes my question: Is there an easy way to get a Socket.io server to automatically start and listen on the same port as the Nuxt app that I'm missing?

Answer 1

I can confirm that solution 1 and 2 doesn't work. I tried to create a custom module and it worked perfectly in the dev env but wouldn't work during build.

Lastly I tried swooshi's solution (https://github.com/sush1lemon/nuxt-socket.io) and It worked at first try in both dev and prod so you should follow his example.

Answer 2

I don't know if this is a good idea but can try to create your own nitro preset and entry files, just like what i did here https://github.com/sush1lemon/nuxt-socket.io

Demo: https://nuxt-socket.onrender.com/