Is it possible to use Socket.io with NuxtJs?

Question

I want to use socket.io in my Nuxtjs. Is it possible?

I tried this tutorial but I am getting the following error:

These dependencies were not found:

* fs in ./node_modules/socket.io/lib/index.js
* uws in ./node_modules/engine.io/lib/server.js

Answer 1

The better way to play with Nuxt.js + Socket.io is to follow this official example from core-team: https://github.com/nuxt/nuxt.js/tree/dev/examples/with-sockets

Answer 2

Updated answer with linked example on GitHub

I would suggest to use the nuxt-socket-io module. It is really easy to set up and has a nice documentation.

I built this litte demo example and I will list the steps that I took to build it (this is even a bit more thorough than the Setup section of the npm package):

1. Add nuxt-socket-io dependency to your project:

   yarn add nuxt-socket-io # or npm install nuxt-socket-io

2. (If you already have a socket.io server you can skip this part)

   Add following line to your nuxt.config.js file: serverMiddleware: [ "~/serverMiddleware/socket-io-server.js" ] (Please do not mix up serverMiddleware with middleware, this are two different things)

   Then, create the file ./serverMiddleware/socket-io-server.js where you can implement your socket.io server.

   // This file is executed once when the server is started
   
   // Setup a socket.io server on port 3001 that has CORS disabled
   // (do not set this to port 3000 as port 3000 is where
   // the nuxt dev server serves your nuxt application)
   const io = require("socket.io")(3001, {
     cors: {
       // No CORS at all
       origin: '*',
     }
   });
   
   var i = 0;
   // Broadcast "tick" event every second
   // Or do whatever you want with io ;)
   setInterval(() => {
     i++;
     io.emit("tick", i);
   }, 1000);
   
   // Since we are a serverMiddleware, we have to return a handler,
   // even if this it does nothing
   export default function (req, res, next) {
     next()
   }
   

3. (If you already have Vuex set up, you can skip this)

   Add following empty Vuex store, i.e., create the file ./store/index.js, since the module needs Vuex set up.

   export const state = () => ({})
   

4. Add nuxt-socket-io to the modules section of nuxt.config.js, this will enable socket-io client:

   {
     modules: [
       'nuxt-socket-io',
     ],
     // socket.io configuration
     io: {
     // we could have multiple sockets that we identify with names
     // one of these sockets may have set "default" to true
       sockets: [{
         default: true, // make this the default socket
         name: 'main', // give it a name that we can later use to choose this socket in the .vue file
         url: 'http://localhost:3001' // URL wherever your socket IO server runs
       }]
     },
   }
   

5. Use it in your components:

   {
     data() {
       return {
         latestTickId: 0,
       };
     },
     mounted() {
       const vm = this;
   
       // use "main" socket defined in nuxt.config.js
       vm.socket = this.$nuxtSocket({
         name: "main" // select "main" socket from nuxt.config.js - we could also skip this because "main" is the default socket
       });
   
       vm.socket.on("tick", (tickId) => {
         vm.latestTickId = tickId;
       });
     },
   }
   

6. Run it with npm run dev and enjoy your tick events :)