vue2-socketcluster v1.1.4

Vue2 Socketcluster

Why ??

1) This package wraps the client requests inside promises. 2) No need to assign socket to the root. It's available everywhere!

Installation

npm install vue2-socketcluster --save

Usage

import Vue2Socketcluster from 'vue2-socketcluster'

Vue.use(Vue2Socketcluster,{
	hostname:"app.example.com",
	secure:true,
	propName:"socket" // Defaults to socket - so if you want vm.$soc you would change this to "soc"
})



new Vue({
	el:"#app",
	data() {
		return {
			authToken:null
		}
	},
	methods:{
		error(err) {
			// Do something with the error.. I suggest adding alertify
		}
	},
	mounted() {
		let vm = this

		vm.$socket.on('connect',status => {

			if (status.isAuthenticated) {
				vm.authToken = vm.$socket.getAuthToken()
				vm.$router.push({ path:'/' })
			} else {
				vm.$router.push({ path:'/auth/login' })
			}

		})

	}
})



---------------------------


// Example - some component

export default {
	name:'test',
	data() {
		return {
			users:[]
		}
	},
	mounted() {
		let vm = this


		// Traditional
		vm.$socket.emit('somemessage',{ someprop:'someval' },(err,data) => {
			if (err) return vm.$root.error(err)

			// Do something with data
		})


		// Promises
		async function run() {
			let results = {}

			results.first_result = await vm.$socket
				.emit('somemessage',{ someprop:'someval' })
				.catch(err => { throw new Error(err) })

			results.second_result = await vm.$socket
				.emit('somemessage2',{ someprop:'someval' })
				.catch(err => { throw new Error(err) })

			return results
		}

		run()
			.then(data => {

			})
			.catch(err => {

				})

	}
}

Test

cd test
npm i
npm run dev

Open up the browser and you will see "Connected" and the status var outputed... assuming you have an instance of socketcluster running on localhost:3000.