vue-websocket

A socket.io plugin for Vue.js.

This package does not support native websockets. At the time, we recommend using vue-native-websocket or implementing it yourself. For ongoing discussion on this, please visit #2.

Installation

You can either install this package with npm, or manually by downloading the primary plugin file.

npm

$ npm install -S vue-websocket

Manual

Download the production vue-websocket.js file. This link is a mirror of the same file found in the dist directory of this project.

Usage

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

import VueWebsocket from "vue-websocket";
Vue.use(VueWebsocket);

Or to connect to another address:

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

You can also pass options:

Vue.use(VueWebsocket, "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);
                }
 
                /* common socket.io events
                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 is available under the MIT license.

Contact

Copyright © 2018 Icebob