From bf61a4ad12b892a977e67db8e054424043bf0a86 Mon Sep 17 00:00:00 2001
From: Brieuc Dubois <git@bhasher.com>
Date: Sat, 16 Mar 2024 23:26:36 +0100
Subject: [PATCH] frontend: realtime disconnection warning
---
.../lib/components/sessions/chatbox.svelte | 19 +++++++++++++++++--
frontend/src/lib/types/session.ts | 13 ++++++++-----
2 files changed, 25 insertions(+), 7 deletions(-)
diff --git a/frontend/src/lib/components/sessions/chatbox.svelte b/frontend/src/lib/components/sessions/chatbox.svelte
index 9a9af5e8..e0c05d3f 100644
--- a/frontend/src/lib/components/sessions/chatbox.svelte
+++ b/frontend/src/lib/components/sessions/chatbox.svelte
@@ -17,6 +17,11 @@
messages = newMessages;
});
+ let wsConnected = get(session.wsConnected);
+ session.wsConnected.subscribe((newConnected) => {
+ wsConnected = newConnected;
+ });
+
onMount(async () => {
await session.loadMessages();
session.wsConnect();
@@ -40,12 +45,22 @@
</script>
<div class="flex flex-col md:my-8 min-w-fit w-full max-w-4xl border-2">
- <div class="flex-grow h-48 overflow-auto flex-col-reverse px-4 flex" bind:this={htmlMessages}>
+ <div
+ class="flex-grow h-48 overflow-auto flex-col-reverse px-4 flex mb-2"
+ bind:this={htmlMessages}
+ >
{#each messages.sort((a, b) => b.created_at.getTime() - a.created_at.getTime()) as message (message.id)}
<MessageC {message} />
{/each}
</div>
- <div class="flex flex-row h-20 mt-2">
+ {#if !wsConnected}
+ <div
+ class="bg-orange-400 h-10 text-center text-white font-bold flex justify-center items-center"
+ >
+ Real-time sync lost. You may need to refresh the page to see new messages.
+ </div>
+ {/if}
+ <div class="flex flex-row h-20">
<textarea
class="flex-grow border-2 border-gray-300 rounded-md p-2 resize-none overflow-y-hidden"
placeholder="Send a message..."
diff --git a/frontend/src/lib/types/session.ts b/frontend/src/lib/types/session.ts
index 1bb480d4..5573e5a1 100644
--- a/frontend/src/lib/types/session.ts
+++ b/frontend/src/lib/types/session.ts
@@ -23,7 +23,7 @@ export default class Session {
private _messages: Writable<Message[]>;
private _created_at: Date;
private _ws: WebSocket | null = null;
- private _ws_connected = false;
+ private _ws_connected = writable(false);
private constructor(
id: number,
@@ -64,6 +64,10 @@ export default class Session {
return this._messages;
}
+ get wsConnected(): Writable<boolean> {
+ return this._ws_connected;
+ }
+
usersList(maxLength = 30): string {
const users = this._users.map((user) => user.username).join(', ');
if (users.length < maxLength) {
@@ -142,14 +146,14 @@ export default class Session {
}
public wsConnect() {
- if (this._ws_connected) return;
+ if (get(this._ws_connected)) return;
const token = localStorage.getItem('accessToken');
this._ws = new WebSocket(`${WS_URL}/${token}/${this.id}`);
this._ws.onopen = () => {
- this._ws_connected = true;
+ this._ws_connected.set(true);
console.log('WS connected');
};
@@ -160,7 +164,6 @@ export default class Session {
if (data['action'] === 'create') {
const message = Message.parse(data['data']);
if (message) {
- console.log('Received message:', message);
this._messages.update((messages) => {
if (!messages.find((m) => m.id === message.id)) {
return [...messages, message];
@@ -177,7 +180,7 @@ export default class Session {
this._ws.onclose = () => {
this._ws = null;
- this._ws_connected = false;
+ this._ws_connected.set(false);
console.log('WS closed, reconnecting in 1s');
setTimeout(() => this.wsConnect(), 1000);
};
--
GitLab