flask-sock websocket chat implementation

pyproject.toml

@@ -77,6 +77,7 @@ qulacs = "^0.6.11"
 flask-babel = "^4.0.0"
 openpyxl = "^3.1.5"
 flask-socketio = "^5.5.1"
+flask-sock = "^0.7.0"
 
 [tool.poetry.group.dev.dependencies]
 mypy = "^1.4.1"

timApp/events/websocket.service.ts

@@ -1,57 +1,33 @@
 import {Injectable} from "@angular/core";
-// import type {WebSocketSubject} from "rxjs/webSocket";
-// import {webSocket} from "rxjs/webSocket";
-import type {Socket} from "socket.io-client";
-import {io} from "socket.io-client";
+import type {WebSocketSubject} from "rxjs/webSocket";
+import {webSocket} from "rxjs/webSocket";
 
-interface IMessage {
-    type: string;
-    data: string;
-}
+type IMessage = string;
 
 @Injectable({
     providedIn: "root",
 })
 export class WebSocketService {
-    // private socket: WebSocketSubject<string>;
-    private socket: Socket;
+    private socket: WebSocketSubject<IMessage>;
     messages$: IMessage[] = [];
 
     constructor() {
-        //        this.socket = webSocket("ws://localhost/");
-        this.socket = io("http://localhost", {
-            transports: ["websocket"],
-        });
-        this.socket.on("message", (data: IMessage) => {
-            console.log(data);
-            this.messages$.push(data);
+        this.socket = webSocket("http://localhost/ws");
+        this.socket.subscribe({
+            next: (msg) => this.messages$.push(msg), // Called whenever there is a message from the server.
+            error: (err) => console.log(err), // Called if at any point WebSocket API signals some kind of error.
+            complete: () => this.socket.next("disconnect"), // Called when connection is closed (for whatever reason).
         });
     }
 
     // Send a message to the server
     sendMessage(message: IMessage) {
         console.log("Send happened: ", message);
-        this.socket.send(message);
-        // this.messages$.push(message);
-        // this.socket.next(JSON.stringify(message));
+        this.socket.next(message);
     }
 
-    listenSocket() {}
-
-    // Receive messages from the server
-    /*    listenSocket(): void {
-  console.log("Listening...");
-  this.socket.subscribe({
-  next: (msg) => this.messages$.push(msg), // Called whenever there is a message from the server.
-  error: (err) => console.log(err), // Called if at any point WebSocket API signals some kind of error.
-  complete: () => console.log("complete"), // Called when connection is closed (for whatever reason).
-  });
-  console.log("Messages: ", this.messages$);
-  }*/
-
     // Close the WebSocket connection
     closeConnection() {
-        this.socket.off();
-        // this.socket.complete();
+        this.socket.complete();
     }
 }

timApp/static/scripts/tim/plugin/user-profile/user-profile.component.ts

@@ -55,10 +55,7 @@ const UploadedFile = t.intersection([
     }),
 ]);
 
-interface IMessage {
-    type: string;
-    data: string;
-}
+type IMessage = string;
 
 interface IUploadedFile extends t.TypeOf<typeof UploadedFile> {}
 
@@ -167,7 +164,7 @@ interface IUploadedFile extends t.TypeOf<typeof UploadedFile> {}
   <div #chatContainer style="height: 20em; overflow-y: auto;">
     <h3>Messages:</h3>
     <ul>
-        <li *ngFor="let msg of messages$">{{ msg.data }}</li>
+        <li *ngFor="let msg of messages$">{{ msg }}</li>
     </ul>
   </div>
 </div>
@@ -224,23 +221,14 @@ export class UserProfileComponent implements OnInit, OnDestroy {
         this.detailsUrl = `/profile/details/${this.documentId}`;
         this.user = Users.getCurrent();
 
-        // Subscribe to messages from the WebSocket
-        /*       this.messageSubscription = this.webSocketService
-            .getMessages()
-            .subscribe((message: IMessage) => {
-                console.log("Pushing msg: ", JSON.stringify(message));
-                this.messages.push(JSON.stringify(message));
-            });*/
-        // this.webSocketService.listenSocket();
+        // Store messages to variable for asynchronous visualisation in view
         this.messages$ = this.webSocketService.messages$;
     }
 
     sendMessage() {
         const userName = this.user ? this.user.name : "Guest";
-        const message: IMessage = {
-            type: "message",
-            data: `${userName}: ${this.newMessage}`,
-        };
+        const message: IMessage = `${userName}: ${this.newMessage}`;
+
         this.webSocketService.sendMessage(message);
         this.newMessage = "";
     }