npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nuxt-socket-io

v3.0.13

Published

Socket.io client and server module for Nuxt. Just plug it in and GO

Downloads

16,499

Readme

npm npm GitHub Workflow Status NPM

📖 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 [email protected]. If you absolutely require [email protected] 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<string, string> 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:
npm i nuxt-socket-io
  • Nuxt 2.x:
npm i nuxt-socket-io@2
  1. 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'
    }]
  }
}
  1. 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

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