vue-websocket's Introduction

vue-websocket

Websocket (socket.io) plugin for VueJS. Support namespaces.

Install

NPM

You can install it via NPM.

$ npm install vue-websocket

Manual

Download zip package and unpack and add the vue-websocket.js file to your project from dist folder.

https://github.com/icebob/vue-websocket/archive/master.zip

Usage

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

or connect to other address:

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

You can pass options too:

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

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>

Build

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

npm run build

Test

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.