[scss.layout][setup][vue.auth.wrapper] connection status + [lib.content-controller] connection status management from websocket state

This commit is contained in:
xdrm-brackets 2018-04-04 15:00:41 +02:00
parent d56c056e5b
commit fb02ba5407
4 changed files with 55 additions and 2 deletions

View File

@ -143,6 +143,7 @@ export default class ContentController{
ws_connect(){ ws_connect(){
console.warn(`new ws(/channel/${this.cid})`); console.warn(`new ws(/channel/${this.cid})`);
gs.get.connection = 1;
// 1. Close websocket if exists // 1. Close websocket if exists
if( window.csock instanceof wscd ){ if( window.csock instanceof wscd ){
@ -154,6 +155,12 @@ export default class ContentController{
window.csock = new wscd(`wss://ws.douscord.xdrm.io/channel/${this.cid}`, { token: auth.token }); window.csock = new wscd(`wss://ws.douscord.xdrm.io/channel/${this.cid}`, { token: auth.token });
// 3. Bind events // 3. Bind events
csock.onconnected = () => {
gs.get.connection = 2;
setTimeout( () => {
gs.get.connection = null;
}, 3000);
};
csock.onreceive = gs.get.content.ws_handler.bind({ event: 'receive' }); csock.onreceive = gs.get.content.ws_handler.bind({ event: 'receive' });
csock.onclose = gs.get.content.ws_handler.bind({ event: 'close' }); csock.onclose = gs.get.content.ws_handler.bind({ event: 'close' });
@ -181,8 +188,10 @@ export default class ContentController{
/* (2) CLOSE event -> reconnect in 500ms /* (2) CLOSE event -> reconnect in 500ms
---------------------------------------------------------*/ ---------------------------------------------------------*/
if( this.event === 'close' ) if( this.event === 'close' ){
gs.get.connection = 0;
return setTimeout(gs.get.content.ws_connect.bind(gs.get.content), 500); return setTimeout(gs.get.content.ws_connect.bind(gs.get.content), 500);
}
/* (3) RECEIVE event /* (3) RECEIVE event

View File

@ -40,6 +40,38 @@ body{
} }
body > #WRAPPER > #CONNECTION_STATUS{
display: block;
position: absolute;
top: -2em;
left: 0;
width: 100%;
height: calc( 2em - 2*.3em );
padding: .3em 0;
// background-color: #d83636;
font-size: 1em;
text-align: center;
text-shadow: 1px 1px 0 #555;
z-index: 1000;
transition: top .5s ease-in-out,
background-color .2s ease-in-out;
// offline
&[data-online='0']{ top: 0; background-color: #d83636; }
// connecting
&[data-online='1']{ top: 0; background-color: #d86936; }
// online
&[data-online='2']{ top: 0; background-color: #32ce80; }
}
// LOGIN LAYOUT // LOGIN LAYOUT
body > #WRAPPER.login{ body > #WRAPPER.login{

View File

@ -52,7 +52,10 @@ gs.set('router', new VueRouter({
/* (5) refresh page */ /* (5) refresh page */
gs.set('refresh', () => ( document.location = '' ) ); gs.set('refresh', () => ( document.location = '' ) );
/* (6) Ask for permission API */ /* (6) Connection status */
gs.set('connection', 1); // null -> normal, 0 -> offline, 1 -> connecting, 2 -> online
/* (7) Ask for permission API */
Notification.requestPermission(); Notification.requestPermission();

View File

@ -4,6 +4,15 @@
<div id="WRAPPER"> <div id="WRAPPER">
<!-- Connection status bar -->
<div id='CONNECTION_STATUS' :data-online='gs.connection'>
{{ gs.connection === 0
? `You are offline`
: ( gs.connection === 1
? `Trying to establishing connection...`
: `Connection established` ) }}
</div>
<!-- Side Menu --> <!-- Side Menu -->
<menu-comp></menu-comp> <menu-comp></menu-comp>