From ace717d6e47f600578ef4850bc92a1e5243bcf81 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Wed, 29 Nov 2017 20:36:30 +0100 Subject: [PATCH] add:view.lib.ws-client.js (WebSocket Client in javascript.es6) --- view/lib/ws-client-es6.js | 201 ++++++++++++++++++++++++++++++++++++++ view/main.js | 2 + 2 files changed, 203 insertions(+) create mode 100644 view/lib/ws-client-es6.js diff --git a/view/lib/ws-client-es6.js b/view/lib/ws-client-es6.js new file mode 100644 index 0000000..5d95fe0 --- /dev/null +++ b/view/lib/ws-client-es6.js @@ -0,0 +1,201 @@ +/* classe client WebSocket */ +class WSClient{ + + /* (1) Constructor + * + * @server_url The url of the desired server + * @channel_uri The url of the desired channel + * + ---------------------------------------------------------*/ + constructor(server_url, channel_uri){ + + /* (1) Store & create data + ---------------------------------------------------------*/ + /* (1) Store the arguments */ + this.server_url = server_url; + this.channel_uri = channel_uri; + + /* (2) Initialise event data */ + this.is_opened = false; // Set to TRUE when connection opened + this.pending = null; // Next message to send through connection + this.handler = []; // On reveice handlers + + /* (3) Create the websocket connection */ + this.ws = new WebSocket(this.server_url+'/'+channel_uri); + + + /* (2) Bind events + ---------------------------------------------------------*/ + /* (1) OPEN: when connection is established */ + this.ws.onopen = this._onopen.bind(this); + + /* (2) MESSAGE: when message received */ + this.ws.onmessage = this._onmessage.bind(this); + + /* (3) ERROR: when websocket error */ + this.ws.onerror = this._onerror.bind(this); + + /* (4) CLOSE: when websocket closes */ + this.ws.onclose = this._onclose.bind(this); + + } + + + /* (2) Binds a handle to the onReceive event (global only) + * + * @callback Callback function(message, error) + * + ---------------------------------------------------------*/ + listen(callback){ + + /* (1) Check @callback type (default value) */ + if( !(callback instanceof Function) ) + throw new Error('WSClient.bind(callback) expected argument *callback* to be a function'); + + /* (2) Store callback */ + this.on_receive = callback; + + return this; + + } + + + /* (3) Sends a message through the socket + * + * @message The data to send + * The data to send (will be serialized) + * + ---------------------------------------------------------*/ + send(message){ + + /* (1) Manage arguments + ---------------------------------------------------------*/ + /* (2) Check @message type */ + if( typeof message != 'string' && typeof message != 'object' ){ + this.on_receive(null, 'wrong message type'); + return this; + } + + /* (2) Stringify JSON if object */ + if( typeof message == 'object' ) + message = JSON.stringify(message); + + + /* (2) Send process + ---------------------------------------------------------*/ + /* (1) If not opened -> store message (will send when onopen()) */ + if( !this.is_opened ) + this.pending = message; + + /* (2) If already opened -> send now */ + else + this.ws.send(message); + + return this; + + } + + + /* (4) PRIVATE: Open handler + * + ---------------------------------------------------------*/ + _onopen(){ + + /* (1) Set @is_opened status variable */ + this.is_opened = true; + + /* (2) If message pending */ + if( this.pending != null ){ + + this.ws.send(this.pending); // send message + this.pending = null; // reset message (optional) + + } + + } + + + /* (5) PRIVATE: Receive handler + * + ---------------------------------------------------------*/ + _onmessage(msg_event){ + + /* (1) If not trusted -> error */ + if( !msg_event.isTrusted ){ + this.on_receive(null, 'not trusted'); + return; + } + + /* (2) If wrong origin -> error */ + if( msg_event.origin != this.server_url ){ + this.on_receive(null, 'unknown origin'); + return; + } + + /* (3) If all right -> success */ + this.on_receive(msg_event.data, null); + + } + + + /* (6) PRIVATE: Error handler + * + ---------------------------------------------------------*/ + _onerror(){ + + /* (1) Remove other handlers (only 1 error) */ + this.ws.onmessage = null; + this.ws.onclose = null; + + /* (2) Send error */ + this.on_receive(null, 'websocket error'); + + } + + + /* (7) PRIVATE: Close handler + * + ---------------------------------------------------------*/ + _onclose(){ + + /* (1) Remove onmessage (not to catch messages) */ + this.ws.onmessage = null; + + /* (2) Send end */ + this.on_receive(null, 'websocket closed'); + + } + +} + + + + +class WSClientBuilder{ + + /* (1) Constructor + * + * @server_url The url of the desired server + * + ---------------------------------------------------------*/ + constructor(server_url){ + /* (1) Store the server url */ + this.server_url = server_url; + } + + + /* (2) Builds a WSClient with desired channel + * + * @channel_uri The uri of the desired channel + * + ---------------------------------------------------------*/ + channel(channel_uri=''){ + return new WSClient(this.server_url, channel_uri); + } + +} + + + + +export{ WSClient, WSClientBuilder } \ No newline at end of file diff --git a/view/main.js b/view/main.js index ee0ec81..dc0d917 100755 --- a/view/main.js +++ b/view/main.js @@ -5,6 +5,7 @@ import Vue from 'vue' /* (2) Internal libs */ import {API} from './lib/api-es6' +import {WSClient,WSClientBuilder} from './lib/ws-client-es6' /* (3) Vues */ import main_vue from './vue/main.vue' @@ -17,6 +18,7 @@ window.api = new API("http://ndli1718/api/v/1.0/"); /* (2) wsclient */ //todo: init websocket client +window.wsc = new WSClientBuilder("wss://websocket.xdrm.io"); /* (3) Render view */