basic chat

Web/WebSocket/websocket/frontend/.npmrc

@@ -0,0 +1,3 @@
+save-exact=true
+package-lock=false
+@techniker-me:registry=https://registry-node.techniker.me

Web/WebSocket/websocket/frontend/package.json

@@ -11,5 +11,9 @@
   "devDependencies": {
     "typescript": "~5.8.3",
     "vite": "^7.1.7"
+  },
+  "dependencies": {
+    "@techniker-me/logger": "0.0.15",
+    "@techniker-me/tools": "2025.0.16"
   }
 }

Web/WebSocket/websocket/frontend/src/main.ts

@@ -1,2 +1,88 @@
+import WebSocketConnection from './websockets/WebSocketConnection';
+import {WebSocketConnectionStatus} from './websockets/WebSocketConnectionStatus';
+import './styles.css';
+import {DisposableList} from '@techniker-me/tools';
 
-const websocket = new WebSocket('ws://localhost:3000/ws');
+const disposables = new DisposableList();
+let websocket = new WebSocketConnection('ws://' + window.location.hostname + ':3000/ws');
+
+let username = '';
+
+const appContainer = document.getElementById('app') as HTMLDivElement;
+const chatContainer = document.createElement('div');
+chatContainer.id = 'chat-container';
+
+const websocketStatusContainer = document.createElement('div');
+websocketStatusContainer.id = 'websocket-status-container';
+
+const rttContainer = document.createElement('div');
+rttContainer.id = 'rtt-container';
+rttContainer.innerHTML = `RTT: [<span id="rtt-value">0</span>] milliseconds`;
+
+const messagesElement = document.createElement('div');
+messagesElement.id = 'messages-container';
+
+const messageInput = document.createElement('input');
+messageInput.type = 'text';
+messageInput.disabled = true;
+
+const actionButton = document.createElement('button');
+actionButton.innerText = 'Set your username!';
+
+disposables.add(websocket.on('message', (message: any) => {
+  if (message.pong) {
+    console.log('[WebSocket] Received message', message);
+    // Use server-calculated RTT
+    const rtt = message.pong.rtt || 0;
+    rttContainer.innerHTML = `RTT: [<span id="rtt-value">${rtt.toFixed(2)}</span>] ms`;
+  } else {
+    messagesElement.innerHTML += `<div class="message"> [${new Date(message.sentAt).toLocaleString("en-US", {timeStyle: 'short'})}]${message.message.author}: ${message.message.payload}</div>`;
+  }
+}));  
+disposables.add(websocket);
+
+chatContainer.append(websocketStatusContainer);
+chatContainer.append(rttContainer);
+chatContainer.append(messagesElement);
+chatContainer.append(messageInput);
+chatContainer.append(actionButton);
+
+appContainer.append(chatContainer);
+actionButton.onclick = () => {
+  const usernamePrompt = prompt('Enter your name:');
+  if (!usernamePrompt) {
+    return;
+  }
+  username = usernamePrompt;
+  messageInput.disabled = false;
+  messageInput.placeholder = 'Enter a message...';
+  actionButton.innerText = 'Send message!';
+  actionButton.onclick = sendMessage;
+}
+
+function sendMessage() {
+  console.log('[actionButton] Set username');
+  if (!messageInput.value) { 
+    return;
+  }
+
+  websocket.sendRequest('message', {
+      author: username,
+      recipient: 'chat',
+      payload: messageInput.value
+    }
+  );
+
+  messageInput.value = ''
+}
+
+window.addEventListener('load', () => {
+  console.log('window load');
+  const statusSubscription = websocket.status.subscribe(status => {
+    websocketStatusContainer.innerHTML = `<h4 id="websocket-status">WebSocket Status [${WebSocketConnectionStatus[status]}]</h4>`;
+  });
+
+  disposables.add(statusSubscription);
+
+  window.addEventListener('beforeunload', disposables.dispose.bind(disposables));
+});

Web/WebSocket/websocket/frontend/src/messages/MessageFactory.ts

@@ -0,0 +1,44 @@
+export class Message<T> {
+  private readonly _author: string;
+  private readonly _recipient: string;
+  private readonly _payload: T
+
+  constructor(author, recipient, payload) {
+    this._author = author;
+    this._recipient = recipient;
+    this._payload = payload;
+  }
+
+  get author(): string {
+    return this._author;
+  }
+
+  get recipient(): string {
+    return this._recipient;
+  }
+
+  get payload(): T {
+    return this._payload;
+  }
+}
+
+export type CreateMessageParameters<T> = {
+  author: string;
+  recipient: string;
+  payload: T
+}
+
+export default class MessageFactory {
+  public static createMessage<T>({
+    author,
+    recipient,
+    payload
+  }: CreateMessageParameters<T>): Message<T> {
+
+    return new Message(author, recipient, payload);
+  }
+
+  private constructor() {
+    throw new Error('MessageFactory is a static class that may not be instantiated');
+  }
+}

Web/WebSocket/websocket/frontend/src/styles.css

@@ -0,0 +1,44 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+}
+
+#websocket-status-container {
+  text-align: center;
+  margin: auto;
+}
+
+#rtt-container {
+  text-align: center;
+  margin: auto;
+}
+
+#chat-container {
+  width: 500px;
+  height: 300px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+#messages-container {
+  width: 80%;
+  height: 600px;
+  margin: auto;
+  border: 2px solid black;
+  overflow-y: auto;
+}
+
+#chat-container input, button {
+  width: 79%;
+  margin: auto;
+  margin-top: 0;
+  padding: 0;
+}

Web/WebSocket/websocket/frontend/src/websockets/WebSocketConnection.ts

@@ -0,0 +1,101 @@
+import {Subject, ReadOnlySubject, Disposable, DisposableList, EventPublisher} from '@techniker-me/tools';
+import type {Milliseconds} from '../../types/Units';
+import {WebSocketConnectionStatus} from './WebSocketConnectionStatus';
+
+const pingIntervalDuration: Milliseconds = 2000;
+
+export default class WebSocketConnection  extends EventPublisher {
+  private readonly _connectionDisposables = new DisposableList();
+  private readonly _status: Subject<WebSocketConnectionStatus> = new Subject(WebSocketConnectionStatus.Closed);
+  private readonly _readOnlyStatus: ReadOnlySubject<WebSocketConnectionStatus> = new ReadOnlySubject(this._status);
+  private readonly _socket: WebSocket;
+
+  constructor(url: string) {
+    super();
+    this._socket = new WebSocket(url);
+
+    this.initialize(this._socket);
+  }
+
+  get status(): ReadOnlySubject<WebSocketConnectionStatus> {
+    return this._readOnlyStatus;
+  }
+
+  public on(event: string, handler: (...args: unknown[]) => void): Disposable {
+    return super.subscribe(event, handler);
+  }
+
+  public sendRequest<T>(name: string, payload?: T) {
+    try {
+      const payloadStringified = JSON.stringify({
+        sentAt: Date.now(),
+        [name]: payload
+      });
+
+      this._socket.send(payloadStringified);
+    } catch (error){
+      console.error('[WebSocket] Error sending request [%o]', error);
+    } 
+  }
+
+  public dispose(): void {
+    this._connectionDisposables.dispose();
+    super.dispose();
+  }
+
+  private initialize(socket: WebSocket) {
+    const websocketStart = performance.now();
+    let pingIntervalId;
+
+    pingIntervalId = window.setInterval(() => {
+      this.sendRequest('ping', {sentAt: Date.now()});
+    }, pingIntervalDuration);
+
+    this.setStatus(WebSocketConnectionStatus.Connecting);
+   
+    socket.onerror = error => {
+      this.setStatus(WebSocketConnectionStatus.Error);
+      window.clearInterval(pingIntervalId);
+      console.error('[WebSocket] Error [%o]', error);
+    };
+    socket.onopen = () => {
+      this.setStatus(WebSocketConnectionStatus.Open);
+
+      const websocketEnd = performance.now();
+
+      console.log(`[WebSocket] Connection time [${(websocketEnd - websocketStart)}] milliseconds`);
+    };
+    socket.onclose = () => {
+      this.setStatus(WebSocketConnectionStatus.Closed);
+    };
+    socket.onmessage = (messageEvent) => {
+      try {
+        const messageData = JSON.parse(messageEvent.data);
+        super.publish('message', messageData);
+      } catch (error) {
+        console.log('[WebSocket] Received non-JSON message [%s]', messageEvent.data);
+        console.error('[WebSocket] Error parsing message [%o]', error);
+      }
+    };
+
+    this._connectionDisposables.add(new Disposable(() => {
+      window.clearInterval(pingIntervalId);
+    }));
+    this._connectionDisposables.add(new Disposable(() => {
+      socket.onerror = null;
+      socket.onopen = null;
+      socket.onclose = null;
+      socket.onmessage = null;
+    }));
+    this._connectionDisposables.add(new Disposable(() => {
+      // @ts-expect-error Disposing the subject
+      this._status.value = null;
+    }));
+    this._connectionDisposables.add(new Disposable(socket.close.bind(socket)));
+
+  }
+
+  private setStatus(status: WebSocketConnectionStatus) {
+    this._status.value = status;
+  }
+}

Web/WebSocket/websocket/frontend/src/websockets/WebSocketConnectionStatus.ts

@@ -0,0 +1,8 @@
+export enum WebSocketConnectionStatus {
+    Connecting = 0,
+    Open = 1, 
+    Closing = 2,
+    Closed = 3,
+    Error = 4
+  }
+  

Web/WebSocket/websocket/frontend/tsconfig.json

@@ -18,7 +18,7 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
+    "erasableSyntaxOnly": false,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },

Web/WebSocket/websocket/frontend/types/Units.ts

@@ -0,0 +1,2 @@
+export type Milliseconds = number;
+export type Seconds = number;