add proper peerjs rtc

NathanFouere · NathanFouere · commit 78413159be22 · 2026-02-21T11:50:59.000+01:00
diff --git a/README.md b/README.md
@@ -6,6 +6,10 @@ The goal of this project is to port a microservices-based application (a social
 
 The application being ported is the **Social Network** application from the [DeathStarBench](https://github.com/delimitrou/DeathStarBench) benchmark suite.
 
+## Possible Improvements
+
+This project is a POC, and many aspects could be improved. By using a single-page application, we could do away with legacy AJAX and unwanted refreshes. Integrating a proper dependency injection framework would facilitate development. Typing the project with TypeScript would make it more reliable. However, it serves as proof that this kind of project can be migrated. Testing the same approach with a larger-scale C++ project involving more business logic could be a next step.
+
 ## Server Deployment
 
 To deploy the backend infrastructure, run the Ansible playbooks provided:
diff --git a/convertedClient/di.js b/convertedClient/di.js
@@ -16,6 +16,8 @@ import {
 } from "./script/utils.js";
 import { sharedRoomName, personnalRoomName } from "./script/consts";
 import PeerjsService from "./script/peerjs-service.js";
+import PeerJsReceiverService from "./script/peer-js-receiver-service.js";
+import PeerJsSenderService from "./script/peer-js-sender-service.js";
 
 var module = await Module();
 
@@ -78,11 +80,25 @@ const annuaireService = new AnnuaireService(sharedDoc.clientID, provider);
 
 const loggedUser = sessionStorageUserService.getNullableLoggedUser();
 let peerjsService = null;
+let peerJsReceiverService = null;
+let peerJsSenderService = null;
+let synchronizeDbService = null;
 if (loggedUser) {
-  peerjsService = new PeerjsService(Number(loggedUser.userid));
+  peerJsReceiverService = new PeerJsReceiverService(postStorageHandler);
+  peerjsService = new PeerjsService(
+    Number(loggedUser.userid),
+    peerJsReceiverService,
+  );
+  synchronizeDbService = new SynchronizeDbService(
+    peerjsService,
+    postStorageHandler,
+  );
+  peerJsSenderService = new PeerJsSenderService(
+    synchronizeDbService,
+    peerjsService,
+  );
   module.peerjsService = peerjsService;
 }
-const synchronizeDbService = new SynchronizeDbService(peerjsService);
 let shardingService = new ShardingService(
   sharedDoc,
   persistence,
@@ -91,6 +107,7 @@ let shardingService = new ShardingService(
   module,
   sessionStorageUserService,
   peerjsService,
+  peerJsSenderService,
 );
 
 const di = {
diff --git a/convertedClient/script/consts.js b/convertedClient/script/consts.js
@@ -3,11 +3,13 @@ const sharedDocName = "shared-doc";
 const sharedRoomName = "shared-room";
 const personnalDocName = "personal-shared-doc";
 const personnalRoomName = "personal-shared-room";
+const dbSyncTypeMsg = "db-sync";
 
 export {
   signalingServerIp,
   sharedDocName,
   sharedRoomName,
   personnalRoomName,
   personnalDocName,
+  dbSyncTypeMsg,
 };
diff --git a/convertedClient/script/main-js.js b/convertedClient/script/main-js.js
@@ -1,4 +1,5 @@
 import di from "../di.js";
+import { dbSyncTypeMsg } from "./consts.js";
 
 const loggedUser = di.sessionStorageUserService.getLoggedUser();
 function followHandler(event) {
@@ -55,17 +56,14 @@ async function fillLoggedUser() {
 
     const synchroniseBtn = clone.querySelector(".synchronize-db-user-btn");
     if (synchroniseBtn) {
-      synchroniseBtn.addEventListener("click", (e) => {
+      synchroniseBtn.addEventListener("click", async (e) => {
         e.stopPropagation();
         console.log("Synchronizing with user", user.username);
-        di.module.createPeerJsConnection(loggedUser.userid, user.userId);
-        const postsDb = di.postStorageHandler.GetAllPostsJsonFormat();
-        console.log("Sending " + postsDb + " posts to user " + user.username);
-        // TODO => hack ici, il faudrait réellement rendre synchrone l'appel
-        setTimeout(() => {
-          console.log("Sending message to peerjs connection");
-          di.synchronizeDbService.sendDb(postsDb);
-        }, 2000);
+        await di.module.createPeerJsConnection(
+          loggedUser.userid,
+          user.userId,
+          dbSyncTypeMsg,
+        );
       });
     }
 
diff --git a/convertedClient/script/peer-js-receiver-service.js b/convertedClient/script/peer-js-receiver-service.js
@@ -0,0 +1,23 @@
+import { dbSyncTypeMsg } from "./consts";
+export default class PeerJsReceiverService {
+  constructor(postStorageHandler) {
+    this.postStorageHandler = postStorageHandler;
+  }
+
+  handleMessage(data) {
+    console.log("PeerJsReceiverService received data : ", data);
+    console.log("Data type is : ", data.type);
+    switch (data.type) {
+      case dbSyncTypeMsg:
+        this.receiveRemoteDb(data.content);
+        break;
+      default:
+        console.error("type : ", data.type, " not handled");
+    }
+  }
+
+  receiveRemoteDb(content) {
+    this.postStorageHandler.StoreRemotePosts(content);
+    window.location.reload();
+  }
+}
diff --git a/convertedClient/script/peer-js-sender-service.js b/convertedClient/script/peer-js-sender-service.js
@@ -0,0 +1,25 @@
+import { dbSyncTypeMsg } from "./consts";
+export default class PeerJsSenderService {
+  constructor(synchronizeDbService, peerjsService) {
+    this.synchronizeDbService = synchronizeDbService;
+    this.peerjsService = peerjsService;
+  }
+
+  sendMessage(type) {
+    console.log("PeerJsSenderService sends type ", type);
+    switch (type) {
+      case dbSyncTypeMsg:
+        this.sendPostDb();
+        // TODO => ici devrait faire un tri sur ce qu'on souhaite réellement fermer
+        this.peerjsService.activePeerJsConnections = {};
+        this.peerjsService.closeConnection();
+        break;
+      default:
+        console.error("type : ", data.type, " not handled");
+    }
+  }
+
+  sendPostDb() {
+    this.synchronizeDbService.sendPostDb();
+  }
+}
diff --git a/convertedClient/script/peerjs-service.js b/convertedClient/script/peerjs-service.js
@@ -1,9 +1,11 @@
 import { Peer } from "peerjs";
 
 export default class PeerjsService {
-  constructor(peerId) {
+  constructor(peerId, peerjsReceiverService) {
     this.peer = new Peer(peerId);
+    this.peerjsReceiverService = peerjsReceiverService;
     this.conn = null;
+    this.activePeerJsConnections = {};
 
     this.peer.on("connection", (conn) => {
       console.log("connection from:", conn.peer);
@@ -43,10 +45,7 @@ export default class PeerjsService {
     });
     this.conn.on("data", (data) => {
       console.log("Received message:", data);
-      // TODO => si on pousse la logique ici, on pourrait tryer sur le type dans un autre service
-      if (data.type != undefined) {
-        alert(data.content);
-      }
+      this.peerjsReceiverService.handleMessage(data);
     });
   }
 
diff --git a/convertedClient/script/sharding-service.js b/convertedClient/script/sharding-service.js
@@ -1,5 +1,5 @@
 import di from "../di.js";
-
+import { createPeerJsConnection } from "./utils.js";
 export default class ShardingService {
   constructor(
     sharedDoc,
@@ -9,6 +9,7 @@ export default class ShardingService {
     module,
     sessionStorageUserService,
     peerjsService,
+    peerJsSenderService,
   ) {
     this.sharedDoc = sharedDoc;
     this.persistence = persistence;
@@ -17,6 +18,7 @@ export default class ShardingService {
     this.module = module;
     this.sessionStorageUserService = sessionStorageUserService;
     this.peerjsService = peerjsService;
+    this.peerJsSenderService = peerJsSenderService;
     console.log("ShardingService initialized");
     this.provider.awareness.on("change", this.handleAwarenessChange);
   }
@@ -79,16 +81,54 @@ export default class ShardingService {
 
       if (clientState?.establish_peer_js_connection != undefined) {
         console.log("received establish_peer_js_connection");
+        if (
+          this.peerjsService.activePeerJsConnections[
+            clientState.establish_peer_js_connection.source_user_id
+          ]
+        ) {
+          console.log(
+            "active peer js connection for ",
+            clientState.establish_peer_js_connection.source_user_id,
+            " already exists",
+          );
+          return;
+        }
         const myUserId = this.sessionStorageUserService.getLoggedUser().userid;
         if (
           clientState.establish_peer_js_connection.targeted_user_id !=
           String(myUserId)
         ) {
           return;
         }
+        this.peerjsService.activePeerJsConnections[
+          clientState.establish_peer_js_connection.source_user_id
+        ] = true;
+        this.peerjsService.activePeerJsConnections[
+          clientState.establish_peer_js_connection.targeted_user_id
+        ] = true;
+        console.log(
+          "new active peer js connections is ",
+          this.peerjsService.activePeerJsConnections,
+        );
         const peerId = clientState.establish_peer_js_connection.source_user_id;
         console.log("Establishing peer js connection with peer id ", peerId);
         this.peerjsService.connectToPeer(peerId);
+        console.log(
+          "send message from sharding service : ",
+          clientState.establish_peer_js_connection.sync_type_msg,
+        );
+        await createPeerJsConnection(
+          clientState.establish_peer_js_connection.targeted_user_id,
+          clientState.establish_peer_js_connection.source_user_id,
+          clientState.establish_peer_js_connection.sync_type_msg,
+        );
+        console.log(
+          "send message from sharding service : ",
+          clientState.establish_peer_js_connection.sync_type_msg,
+        );
+        this.peerJsSenderService.sendMessage(
+          clientState.establish_peer_js_connection.sync_type_msg,
+        );
       }
     }
 
@@ -98,6 +138,18 @@ export default class ShardingService {
 
       if (clientState?.establish_peer_js_connection != undefined) {
         console.log("received establish_peer_js_connection");
+        if (
+          this.peerjsService.activePeerJsConnections[
+            clientState.establish_peer_js_connection.source_user_id
+          ]
+        ) {
+          console.log(
+            "active peer js connection for ",
+            clientState.establish_peer_js_connection.source_user_id,
+            " already exists",
+          );
+          return;
+        }
 
         const myUserId = this.sessionStorageUserService.getLoggedUser().userid;
         if (
@@ -107,8 +159,30 @@ export default class ShardingService {
           return;
         }
         const peerId = clientState.establish_peer_js_connection.source_user_id;
+        this.peerjsService.activePeerJsConnections[
+          clientState.establish_peer_js_connection.source_user_id
+        ] = true;
+        this.peerjsService.activePeerJsConnections[
+          clientState.establish_peer_js_connection.targeted_user_id
+        ] = true;
+        console.log(
+          "new active peer js connections is ",
+          this.peerjsService.activePeerJsConnections,
+        );
         console.log("Establishing peer js connection with peer id ", peerId);
         this.peerjsService.connectToPeer(peerId);
+        await createPeerJsConnection(
+          clientState.establish_peer_js_connection.targeted_user_id,
+          clientState.establish_peer_js_connection.source_user_id,
+          clientState.establish_peer_js_connection.sync_type_msg,
+        );
+        console.log(
+          "send message from sharding service : ",
+          clientState.establish_peer_js_connection.sync_type_msg,
+        );
+        this.peerJsSenderService.sendMessage(
+          clientState.establish_peer_js_connection.sync_type_msg,
+        );
       }
       if (clientState?.user != undefined) {
         this.annuaireService.communicateListOfUsers();
diff --git a/convertedClient/script/synchronize-db-service.js b/convertedClient/script/synchronize-db-service.js
@@ -1,13 +1,15 @@
 export default class SynchronizeDbService {
-  constructor(peerjsService) {
+  constructor(peerjsService, postStorageHandler) {
     this.peerjsService = peerjsService;
+    this.postStorageHandler = postStorageHandler;
   }
 
-  sendDb(db) {
+  sendPostDb() {
+    const postsDb = this.postStorageHandler.GetAllPostsJsonFormat();
+    console.log("sendMessage content", postsDb);
     this.peerjsService.sendMessage({
       type: "db-sync",
-      content: db,
+      content: postsDb,
     });
-    this.peerjsService.closeConnection();
   }
 }
diff --git a/convertedClient/script/utils.js b/convertedClient/script/utils.js
@@ -2,24 +2,62 @@ import * as Y from "yjs";
 import { WebrtcProvider } from "y-webrtc";
 import { IndexeddbPersistence } from "y-indexeddb";
 import di from "../di.js";
-
+import { dbSyncTypeMsg } from "./consts";
 import { signalingServerIp } from "./consts";
 
-function createPeerJsConnection(cur_user_id, target_user_id) {
+async function createPeerJsConnection(
+  cur_user_id,
+  target_user_id,
+  sync_type_msg,
+) {
   console.log(
     "Create peer js connection with cur_user_id ",
     cur_user_id,
     "and target_user_id",
     target_user_id,
   );
   console.log("Peer id for connection is ", cur_user_id);
+
   di.module.mainProvider.awareness.setLocalStateField(
     "establish_peer_js_connection",
     {
       targeted_user_id: target_user_id,
       source_user_id: cur_user_id.toString(),
+      sync_type_msg: sync_type_msg,
     },
   );
+
+  return new Promise((resolve, reject) => {
+    let currentNumberOfCalls = 0;
+    const maxNumberOfCalls = 10;
+
+    const timer = setInterval(() => {
+      const isConnectionEstablished =
+        di.peerjsService.activePeerJsConnections[target_user_id] === true;
+
+      if (isConnectionEstablished) {
+        clearInterval(timer);
+
+        di.module.mainProvider.awareness.setLocalStateField(
+          "establish_peer_js_connection",
+          null,
+        );
+
+        resolve(); //resolve promise
+        return;
+      }
+
+      currentNumberOfCalls++;
+
+      if (currentNumberOfCalls >= maxNumberOfCalls) {
+        clearInterval(timer);
+        const errorMessage =
+          "Number of calls for createPeerJsConnection exceeded";
+        console.error(errorMessage);
+        reject(new Error(errorMessage)); // end promise with error
+      }
+    }, 2000);
+  });
 }
 
 async function sendFriendRequest(
diff --git a/convertedMicroServices/src/PostStorageHandler/PostStorageHandler.cpp b/convertedMicroServices/src/PostStorageHandler/PostStorageHandler.cpp
diff --git a/convertedMicroServices/src/PostStorageHandler/PostStorageHandler.hpp b/convertedMicroServices/src/PostStorageHandler/PostStorageHandler.hpp

Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,15 @@`
`1`	`1`	`export default class SynchronizeDbService {`
`2`		`- constructor(peerjsService) {`
	`2`	`+ constructor(peerjsService, postStorageHandler) {`
`3`	`3`	`this.peerjsService = peerjsService;`
	`4`	`+ this.postStorageHandler = postStorageHandler;`
`4`	`5`	`}`
`5`	`6`
`6`		`- sendDb(db) {`
	`7`	`+ sendPostDb() {`
	`8`	`+ const postsDb = this.postStorageHandler.GetAllPostsJsonFormat();`
	`9`	`+ console.log("sendMessage content", postsDb);`
`7`	`10`	`this.peerjsService.sendMessage({`
`8`	`11`	`type: "db-sync",`
`9`		`- content: db,`
	`12`	`+ content: postsDb,`
`10`	`13`	`});`
`11`		`- this.peerjsService.closeConnection();`
`12`	`14`	`}`
`13`	`15`	`}`