websocket-async-vue-nic v0.0.1

Async WebSocket for Vue

Send data to server using WebSocket and then wait for the response from the server to resume the function. The function returns a Promise with the data from server. It wasn't tested yet!

Main purpose I've created this: JS:

const response = await this.$websocket.sendAsync( { some:  'data'  } );
console.log( "Response:",  response.msg );

On server(PHP):

$data = json_decode( $msg );
//Do something with the data and send back along with '_id'
$from->send( json_encode( [
	'_id'  =>  $data['_id'],
	'msg'  =>  'Send response back to the function'
] ) );

Install

npm install vue-async-websocket --save

Usage

Register Vue Plugin:

import WebSocketVue from 'vue-async-websocket';

//Pass url as second argument, third argument is an optional options object
Vue.use( WebSocketVue, 'ws://localhost:8090', {} );

//Pass valid WebSocket object as second parameter
const webSocket = new WebSocket( 'ws://localhost:8090' );
Vue.use( WebSocketVue, webSocket );

Options

You can pass an object with options to the Vue.use().

const defOptions = {
	'debug': false,
	
	'protocols': '',
	'load-on-start': false,
	
	'max-timeout': 5000,
	'reconnect': true,
	'max-reconnect-count': 4,
	'reconnect-delay': 2000,
	
	'create-id-func': null,
	
	'response-id': '_id',
	'response-type': '_type'
};
Vue.use( WebSocketVue, 'ws://localhost:8090', defOptions );

Sending data

sendAsync( data, args = {} ) Sending data using sendAsync. It returns a Promise, so you can use .then() if you want. Server has to send a message back with '_id' property. Set 'response-id' option if you want to change '_id' to something else.

try{
	const response = await this.$websocket.sendAsync( { some: 'data' } );
	console.log( "Response:", response );
}catch( error ){
	console.error( error );
}

You can pass arguments object as the second parameter.

const defaultArgs = {
	'parse-json':  true,
	'timeout':  true,
	'max-timeout':  -1,
	'hooks':  {
		'bad-websocket':  null,
		'timed-out':  null,
	},
	'callback':  {
		'send-data-only':  true,
	}
};
const response = await this.$websocket.sendAsync( { some: 'data' }, defaultArgs );

send( data, callback = null, args = {} ) If you don't want to use async function, you can use send() and pass a callback function. You don't need to pass the callback, so it will only send the data to server. The args object is the same as in asyncSend.

this.$websocket.send( { some: 'data' } );
//Or with callback
this.$websocket.send( { some:  'data' }, ( data ) => {
	console.log( "Response: ", data );
} );

Listeners

Quick Example PHP code:

$client->send( json_encode( [
	'_type' => 'some-type',
	'msg' => 'Send message with type "some-type" to client'
] ) );

JS code:

//Call only for specific type
this.$websocket.addEventListener( 'some-type', ( data ) => {
	console.log( "Got message of type 'some-type': ", data );
} );
//Always call on message
this.$websocket.addEventListener( 'any', ( data ) => {
	console.log( "Got a message: ", data );
} );
//You can also use empty string '', it will work as 'any'

Run a function whenever a message comes from the server. The message has to have '_type' parameter set. If not, only functions with type 'any' will be called. You can change '_type' to something else by setting options'response-type' when installing the Vue plugin(Vue.use).

WebSocket messages - onopen, onclose, onerror

this.$websocket.addEventListener( 'onopen', ( data ) => {
	console.log( "Connection opened!", data );
} );

removeEventListener When adding a listener, the function returns an id. You can use it, to remove the listener.

const id = this.$websocket.addEventListener( 'some-type', ( data ) => {
	console.log( "Got message of type 'some-type': ", data );
	this.$websocket.removeEventListener( id );
} );

TODO

Testing, Using Vuex, Examples