!GitHub Workflow Status

📖 Release Notes

nuxt-socket-io

Socket.io client and server module for Nuxt

Features

- Configuration of multiple IO sockets
- Configuration of per-socket namespaces (simplified format)
- 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)
- Automatic middleware registration
- ES module
- Experimental support for ioRedis

Important updates

* v3.x has been tested against Nuxt3 stable and socket.io@4.1.1. If you absolutely require socket.io@4.5.3 it's recommended to install it and follow the workaround.
* v2.x may contain breaking changes in it's attempt to get Nuxt3 reaady. npm i nuxt-socket@1 should help revert any breaking changes in your code.
* VuexOpts types and Namespace configuration types changed. Entries with the Record have been deprecated in favor of string-only entries, which are easier to work with.
* Package type is now "module". Entirely ESM.
* Tested against node lts (16.x).
* v1.1.17+ uses socket.io 4.x. You may find the migration here
* v1.1.14+ uses socket.io 3.x. You may find the migration here
* v1.1.13 uses socket.io 2.x.

Setup

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

* Nuxt 3.x:
``bash
npm i nuxt-socket-io
`

* Nuxt 2.x:
`bash
npm i nuxt-socket-io@2
`

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

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

3. Use it in your components:

`js
{
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

$3

- 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`