Nuxt Sockets
Nuxt wrapper for Vue 3 Perfect Scrollbar
Overview
Nuxt Sockets implements bidirectional sockets communication between Nitro and Nuxt.
It supports named channels making it ideal for plugin authors.
// server
const socket = useSocketServer('my-plugin')
socket.send('ping!')
// client
const socket = useSocketClient('my-plugin', ({ channel: string, data: any }) => {
console.log(data) // ping!
})
Demo
To view the demo live on StackBlitz:
To run the demo locally:
npm run dev
Quick Setup
Installation:
npm install --save @davestewart/nuxt-sockets
Configuration:
export default defineNuxtConfig({
modules: [
'@davestewart/nuxt-sockets'
],
})
Usage
Server
Here's how you might set up the server to watch some files, then report them to the frontend:
// module.ts
import { createStorage } from 'unstorage'
import { useSocketServer } from '@davestewart/nuxt-sockets'
export default function (options, nuxt) {
// create the server
const socket = useSocketServer('my-plugin')
// watch files for changes
const storage = createStorage(dirname)
storage.watch(function (event, key) => {
socket.send({ event, key })
})
// handle incoming messages
socket.onMessage(({ data }) => {
console.log('message:', data)
})
}
Client
The client should take the same name as the server, so calls are sent between the two, and they don't clash with any other services using sockets.
export default defineNuxtPlugin(async () => {
if (process.client) {
// receive a message
const socket = await useSocketClient('my-plugin', ({ data }) => {
console.log('file changed', data)
})
// send a message
window.addEventListener('click', () => {
socket.send('user clicked')
})
}
})
Alternative setups
You can create a Socket instance in several ways:
// generic server (not recommended)
const socket = useSocketServer()
// named server
const socket = useSocketServer('some-name')
// named server and default handler
const socket = useSocketServer('some-name', ({ channel, data }) => {
console.log({ channel, data })
})
// named server and filter handler
const socket = useSocketServer('some-name').addHandler<Bar>('foo', ({ data }) => {
console.log(data.baz)
})
The library also has some generic typing, so you can hint the return data type:
// example types
type Foo = { foo: string }
type Bar = { bar: string }
type Baz = { baz: string }
// hint the composable
const socket = useSocketServer<Foo>('plugin', ({ data }) => {
console.log(data.foo)
})
// hint the handler
const socket = useSocketServer<SomeClass>('plugin', ({ data }) => {
console.log(data.bar)
})
// hint the handler
const socket = useSocketServer<SomeClass>('plugin').addHandler<Bar>('foo', ({ data }) => {
console.log(data.baz)
})
Filtering
The module supports basic filtering, but this may be taken out in the next version.
Development
To develop the module:
# develop the module using the demo
npm run dev
# build and release (make sure to update version and changelog first)
npm run release