Socket.io client and server module for Nuxt

nuxt-socket-io

Socket.io client and server module for Nuxt

Features

• Configuration of multiple IO sockets
• Configuration of per-socket namespaces
• Automatic IO Server Registration
• Socket IO Status
• Automatic Error Handling
• Debug logging, enabled with localStorage item ‘debug’ set to ‘nuxt-socket-io’
• Automatic Teardown, enabled by default
• $nuxtSocket vuex module and socket persistence in vuex
• Support for dynamic APIs using the KISS API format
• Support for the IO config in the new Nuxt runtime config (for Nuxt versions >= 2.13)

Setup

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

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

2. Add nuxt-socket-io to the modules section of nuxt.config.js

{
  modules: [
    'nuxt-socket-io',
  ],
  io: {
    // module options
    sockets: [{
      name: 'main',
      url: 'http://localhost:3000'
    }]
  }
}

3. Use it in your components:

{
  mounted() {
    this.socket = this.$nuxtSocket({
      channel: '/index'
    })
    /* Listen for events: */
    this.socket
    .on('someEvent', (msg, cb) => {
      /* Handle event */
    })
  },
  methods: {
    method1() {
      /* Emit events */
      this.socket.emit('method1', {
        hello: 'world' 
      }, (resp) => {
        /* Handle response, if any */
      })
    }
  }
}

Documentation

But WAIT! There’s so much more you can do!! Check out the documentation:

https://nuxt-socket-io.netlify.app/

There you will see:

• More details about the features, configuration and usage
• Demos and examples, and link to a codesandbox so you can try things out as you follow along!
• All the old docs that you originally saw here were moved there and better organized. Things should be much easier to follow now!

Resources

• Follow me and the series on medium.com
• Socket.io Client docs here
• Socket.io Server docs here

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using yarn dev or npm run dev

Download Details:

Author: richardeschloss

Demo: https://nuxt-socket-io.netlify.app/

Source Code: https://github.com/richardeschloss/nuxt-socket-io

#vue #vuejs #javascript #nuxtjs #nuxt