{"_id":"@davestewart/nuxt-sockets","name":"@davestewart/nuxt-sockets","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@davestewart/nuxt-sockets","description":"WebSockets solution for Nuxt","version":"0.1.0","repository":{"type":"git","url":"git+https://github.com/davestewart/nuxt-sockets.git"},"license":"MIT","type":"module","exports":{".":{"types":"./dist/types.d.ts","import":"./dist/module.mjs","require":"./dist/module.cjs"}},"main":"./dist/module.cjs","types":"./dist/types.d.ts","scripts":{"dev":"nuxi dev playground","dev:build":"nuxi build playground","dev:prepare":"nuxt-module-build --stub && nuxi prepare playground","lint":"eslint .","test":"vitest run","test:watch":"vitest watch","build":"nuxt-module-build","release":"npm run lint && npm run test && npm run build && npm publish --access public"},"dependencies":{"@nuxt/kit":"^3.3.3","listhen":"^1.0.4","ws":"^8.13.0"},"devDependencies":{"@nuxt/eslint-config":"^0.1.1","@nuxt/module-builder":"^0.2.1","@nuxt/schema":"^3.3.3","@nuxt/test-utils":"^3.3.3","@types/ws":"^8.5.4","eslint":"^8.37.0","nuxt":"^3.3.3","vitest":"^0.29.8"},"gitHead":"b236e7cad33df85bf4b05b57ef6cdec0f3afef45","bugs":{"url":"https://github.com/davestewart/nuxt-sockets/issues"},"homepage":"https://github.com/davestewart/nuxt-sockets#readme","_id":"@davestewart/nuxt-sockets@0.1.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-xZPTSUbgPp5dvSTtxNIrLjmIwq0y+npjkJAsdksmC9OzfFhJd4d72cRQYsVnaIMNxCA1YGLn2iqsXRLtinm3Vg==","shasum":"05bd09a8f5b065ef63a66064f41783e20fc0368a","tarball":"https://registry.npmjs.org/@davestewart/nuxt-sockets/-/nuxt-sockets-0.1.0.tgz","fileCount":19,"unpackedSize":14586,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBMvpCkYS+6QYBzgbURQ0p3MGOoNP9iwqfKFQ8MolfnYAiEApQ5geaNMH2dz4ZeOqkw8glvD9vXkXdRlN2xgVkqAMeI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNZwIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJNQ//eOIg+6cLbI/7QQdfTQxgrnrgUWOu3r3hTfM3L01hdopwaGN1\r\ncq6qAoMEjnwMRCMKm+6VlfqXADqz5Ltw6NG321GV4DV+wP2zF1Vt9B0bzMSf\r\nWmZ7UUNJMYFK8cfj4D19FNx15b55FtXXDr7wEBk436opiV181jRperICiBkb\r\nc3qDuLfaqS9z2HChrh80hTEBPhF7SbPJjgUFxvXuBl2iEuZDLM7ekvt7ALzS\r\nWwnwrHu0JCGhiqPz1GTWV19U/UF4VJZF3PXoqRl6/yByboJItlmAEsxRwW1u\r\nI0lEjhQqwna8w56AhioF7wD231D7ecQ+vjXSRXv29eoSb6+N0s5h5MMcr2td\r\nw+HesVNZx3c8RmL5p0iPXv2Mym1PiQigwA2hYWiOvwn1Io7D/77gAUh65PYr\r\ncZiZOQDeww0vfvcidBGrkwiMgdAJ4RSCuh7PFjoiulG89TVypX6cnOIRa8sR\r\n2/ZMxZX9PmFkoA75Dy5cSou6oqmYwJZidxFvXBHvKFirtnqJTUYUXNgh6pyO\r\niTXfarbkWF/ZPD8TqON5FoSPpg7J/KySwLzayyhmkgyawneYL+zLjiBbu9kC\r\nq8SeweH90I8iOXT+xGxbP+/43QSU2uTWoSl0wJLBtBfNmD9O4cz/oE0Gj2NR\r\nqKq6a6KlE+j4RpQP+7elB6vDHl96emNg6ZU=\r\n=0rRx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"davestewart","email":"dev@davestewart.co.uk"},"directories":{},"maintainers":[{"name":"davestewart","email":"dev@davestewart.co.uk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/nuxt-sockets_0.1.0_1681234952136_0.011238540581031575"},"_hasShrinkwrap":false}},"time":{"created":"2023-04-11T17:42:32.056Z","0.1.0":"2023-04-11T17:42:32.314Z","modified":"2023-04-11T17:42:32.539Z"},"maintainers":[{"name":"davestewart","email":"dev@davestewart.co.uk"}],"description":"WebSockets solution for Nuxt","homepage":"https://github.com/davestewart/nuxt-sockets#readme","repository":{"type":"git","url":"git+https://github.com/davestewart/nuxt-sockets.git"},"bugs":{"url":"https://github.com/davestewart/nuxt-sockets/issues"},"license":"MIT","readme":"# Nuxt Sockets\n\n> Nuxt wrapper for Vue 3 Perfect Scrollbar\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\n## Overview\n\nNuxt Sockets implements bidirectional sockets communication between Nitro and Nuxt. \n\nIt supports named channels making it ideal for plugin authors.\n\n```ts\n// server\nconst socket = useSocketServer('my-plugin')\nsocket.send('ping!')\n```\n\n```ts\n// client\nconst socket = useSocketClient('my-plugin', ({ channel: string, data: any }) => {\n  console.log(data) // ping!\n})\n```\n\n## Demo\n\nTo view the demo live on StackBlitz:\n\n- https://stackblitz.com/github/davestewart/nuxt-sockets?file=playground%2Fapp.vue\n\nTo run the demo locally:\n\n```\nnpm run dev\n```\n\n## Quick Setup\n\nInstallation:\n\n```bash\nnpm install --save @davestewart/nuxt-sockets\n```\n\nConfiguration:\n\n```js\nexport default defineNuxtConfig({\n  modules: [\n    '@davestewart/nuxt-sockets'\n  ],\n})\n```\n\n## Usage\n\n### Server\n\nHere's how you might set up the server to watch some files, then report them to the frontend:\n\n```ts\n// module.ts\nimport { createStorage } from 'unstorage'\nimport { useSocketServer } from '@davestewart/nuxt-sockets'\n\nexport default function (options, nuxt) {\n  // create the server\n  const socket = useSocketServer('my-plugin')\n  \n  // watch files for changes\n  const storage = createStorage(dirname)\n  storage.watch(function (event, key) => {            \n    socket.send({ event, key })              \n  })\n  \n  // handle incoming messages\n  socket.onMessage(({ data }) => {\n    console.log('message:', data)\n  })\n}\n```\n\n### Client\n\nThe 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.\n\n```ts\nexport default defineNuxtPlugin(async () => {\n  if (process.client) {\n    // receive a message\n    const socket = await useSocketClient('my-plugin', ({ data }) => {\n      console.log('file changed', data)\n    })\n    \n    // send a message\n    window.addEventListener('click', () => {\n      socket.send('user clicked')\n    })\n  }\n})\n```\n\n### Alternative setups\n\nYou can create a Socket instance in several ways:\n\n```ts\n// generic server (not recommended)\nconst socket = useSocketServer()\n\n// named server\nconst socket = useSocketServer('some-name')\n\n// named server and default handler\nconst socket = useSocketServer('some-name', ({ channel, data }) => {\n  console.log({ channel, data })\n})\n\n// named server and filter handler\nconst socket = useSocketServer('some-name').addHandler<Bar>('foo', ({ data }) => {\n  console.log(data.baz)\n})\n```\n\nThe library also has some generic typing, so you can hint the return data type:\n\n```ts\n// example types\ntype Foo = { foo: string }\ntype Bar = { bar: string }\ntype Baz = { baz: string }\n\n// hint the composable\nconst socket = useSocketServer<Foo>('plugin', ({ data }) => {\n  console.log(data.foo)\n})\n\n// hint the handler\nconst socket = useSocketServer<SomeClass>('plugin', ({ data }) => {\n  console.log(data.bar)\n})\n\n\n// hint the handler\nconst socket = useSocketServer<SomeClass>('plugin').addHandler<Bar>('foo', ({ data }) => {\n  console.log(data.baz)\n})\n```\n\n### Filtering\n\nThe module supports basic filtering, but this may be taken out in the next version.\n\n## Development\n\nTo develop the module:\n\n```bash\n# develop the module using the demo\nnpm run dev\n\n# build and release (make sure to update version and changelog first)\nnpm run release\n```\n\n<!-- Badges -->\n[npm-version-src]: https://img.shields.io/npm/v/@davestewart/nuxt-sockets/latest.svg?style=flat&colorA=18181B&colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/@davestewart/nuxt-sockets\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/@davestewart/nuxt-sockets.svg?style=flat&colorA=18181B&colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/@davestewart/nuxt-sockets\n\n[license-src]: https://img.shields.io/npm/l/@davestewart/nuxt-sockets.svg?style=flat&colorA=18181B&colorB=28CF8D\n[license-href]: https://npmjs.com/package/@davestewart/nuxt-sockets\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","readmeFilename":"README.md"}