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 );

| Parameter | Value | | :-------------: |---------------| | debug | Boolean. Whether to display additional logs in console or not. | | protocols | String/Array. Protocols for the WebSocket. | | load-on-start | Boolean. Whether to automatically open connection, or manually. | | max-timeout | Integer. How long to wait for response in ms. Can be overwritten by args in send function. | | reconnect | Boolean. Whether to reconnect automatically when connection is closed or not. | | max-reconnect-count | Integer. How many times to reconnect. | | reconnect-delay | Integer. Time in ms to wait between each reconnect. | | create-id-func | Callable. If you want to create different function for creating ID for callbacks, you can use this option. It takes an array of keys as an argument, and return a string. | | response-id | String. If you want in your server code to use different name than '_id' you can specify it here. | | response-type | String. If you want in your server code to use different name than '_type' you can specify it here. |

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 );

| Parameter | Value | | :-------------: |---------------| | parse-json | Boolean. Whether to parse data to JSON or not. | | timeout | Boolean. If false, will wait forever for the response. | | max-timeout | Integer. How long to wait for response in ms. If value is lower than 0, 'max-timeout' option will be used. | | hooks['bad-websocket'] | Callable. Function that will be called when socket is null, or readyState != 1. This value is wrapped in hooks object. | | hooks['timed-out'] | Callable. Function that will be called when response didn't come. This value is wrapped in hooks object. | | callback['send-data-only'] | Boolean. Whether to send only event.data as response, or the whole MessageEvent. This value is wrapped in callback object. |

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