vue-websocket-next

A socket.io plugin for Vue.js.

Installation

npm

$ npm install vue-websocket-next

Usage

Register the plugin. By default, it will connect to /:

import VueWebsocket from "vue-websocket";
import IO from 'socket.io-client';

Vue.use(VueWebsocket, IO);

Or to connect to another address:

Vue.use(VueWebsocket, IO, "ws://otherserver:8080");

You can also pass options:

Vue.use(VueWebsocket, IO, "ws://otherserver:8080", {
  reconnection: false
});

To use it in your components:

<script>
  export default {

    methods: {
      add() {
          // Emit the server side
          this.$socket.emit("add", { a: 5, b: 3 });
      },

      get() {
          this.$socket.emit("get", { id: 12 }, (response) => {
          ...
        });
      }
    },

    socket: {
      // Prefix for event names
      // prefix: "/counter/",

      // If you set `namespace`, it will create a new socket connection to the 
      // namespace instead of `/`
      // namespace: "/counter",

      events: {
        // Similar as this.$socket.on("changed", (msg) => { ... });
        // If you set `prefix` to `/counter/`, the event name will 
        // be `/counter/changed`
        //
        changed(msg) {
          console.log("Something changed: " + msg)
        }

        connect() {
          console.log("Websocket connected to " + this.$socket.nsp)
        },

        disconnect() {
          console.log("Websocket disconnected from " + this.$socket.nsp)
        },

        error(err) {
          console.error("Websocket error!", err)
        }
      }
    }
  }
</script>

Develop

Building

This command will build a distributable version in the dist directory:

$ npm run build

Testing

This package uses karma for testing. You can run the tests like so:

$ npm test

Contribution

Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important.

License

vue-websocket-next is available under the MIT license.

This package was originally developed by Icebob. But it is now maintained by CGWire.

About CGWire

CGWire is a company based in France. We help teams of animation studios to collaborate better. We provide tools to more than 50 studios spread all around the world.

On the technical side, we apply software craftmanship principles as much as possible. We love coding and consider that strong quality and good developer experience matter a lot.

Visit cg-wire.com for more information.