From 1f03e7bc160a63d4d57c21bf9ec60e2cd46a382a Mon Sep 17 00:00:00 2001 From: curly Date: Tue, 28 Feb 2023 10:29:26 -0700 Subject: extremely basic ws listening --- src/index.html | 46 ++++++++++++++++++++++++++++++---------- src/main.css | 43 ++++++++++++++++++++++++++++++++++++-- src/main.ts | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 138 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/index.html b/src/index.html index ffcbea9..2b44e74 100644 --- a/src/index.html +++ b/src/index.html @@ -6,16 +6,40 @@ - - New Messages -

- - - - +

+ + + Only one channel atm + + + username: + +

+ + New Messages +

+ + + + +

+ +

diff --git a/src/main.css b/src/main.css index 98c2511..1ce0122 100644 --- a/src/main.css +++ b/src/main.css @@ -67,7 +67,7 @@ margin: 2px; } -#navbar { +.navbar { border-bottom: 2px solid black; width: 100%; display: inline-block; @@ -95,7 +95,7 @@ body { display: flex; - flex-direction: column; + flex-direction: row; max-height: 100vh; } @@ -140,4 +140,43 @@ body { } .reply_highlight { background-color: lightblue; +} + +#channel { + display: flex; + flex-direction: column; + max-height: 100vh; + flex-grow: 1; + flex-basis: 90vw; +} +#rightpane { + flex-basis: 20vw; + display: none; + flex-direction: column; + max-width: 20vw; + border-left: 2px solid black; +} + +.center { + text-align: center; +} + +#leftpane { + display: flex; + flex-direction: column; + flex-basis: 20vw; + flex-grow: 0; + border-right: 2px solid black; +} +#channelsbox { + flex-basis: 90vh; +} +#usersettings { + flex-basis: 15vh; + border-top: 2px solid black; +} + +input#username { + max-width: 50%; + border-bottom: 1px dotted black; } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index e0f768d..c6ec627 100644 --- a/src/main.ts +++ b/src/main.ts @@ -22,6 +22,7 @@ const messages = new Map(); const users = new Map(); let sent = false; const host = location.protocol + "//" + location.host; +let socket: WebSocket; function xhttp_request(location: string): Promise { @@ -462,16 +463,73 @@ function getelementbyid(s: string): any { } } +function togglerightpane(): void { + let window = getelementbyid("rightpane"); + if (window.style.display != "flex") { + window.style.display = "flex" + } else { + window.style.display = "" + } +} +function toggleleftpane(): void { + let window = getelementbyid("leftpane"); + if (window.style.display != "none") { + window.style.display = "none" + } else { + window.style.display = "" + } +} + +function sleep(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +async function ws_connect(t: number): Promise { + await sleep(t * 1000); + + return new WebSocket('ws://localhost:8001') +} + +function ws_setup(t: number = 0) { + ws_connect(t).then((sock) => { + socket = sock; + + socket.addEventListener('message', (event) => { + // let newest = JSON.parse(event.data) + get_newest_messages(); + }); + + socket.addEventListener('close', (event) => { + console.log('Connection closed'); + + if (t + 5 > 15) { + alert("Server timed out. Refresh page to try again"); + } else { + console.log('Retrying in: ', t + 5); + ws_setup(t + 5); + } + + }); + + socket.addEventListener('open', (event) => { + get_newest_messages(); + }); + }) + + +} + function load(): void { xhttp_request("").then((server_info) => { getelementbyid("info").innerHTML += server_info.version + ", " + server_info.name + ", users: " + server_info.users; - // Get ready for websockets implementation in rocket_test 0.3 - if (server_info.version[2] < 3 ) { - const interval = setInterval(get_newest_messages, 1000); + // Version 0.3.x implements websockets + if (server_info.version[2] < 3 || server_info.version[0] > 1) { + const interval = setInterval(get_newest_messages, 2000); } else { - // Initiate websocket "polling" + ws_setup(); } }) + } -- cgit v1.2.3