wip v2

src/main.ts

@@ -33,6 +33,7 @@ Restruucture the app around the data. App/WS split is messy. Clean it up.
 // import * as ForceGraph3D from "3d-force-graph";
 import { openDatabase, getData, addData, addDataArray, clearData, deleteData, mergeDataArray, getAllData, checkPostIds, getAllIds, getPostsByIds } from "db";
 
+// import {PeerConnection} from "webRTC";
 
 // declare let WebTorrent: any;
 
@@ -279,6 +280,88 @@ interface PeerMessage {
   message: any;
 }
 
+// class Signaler {
+//   websocket: WebSocket | null = null;
+
+//   websocketPingInterval: number = 0;
+
+
+
+//   connect() {
+//   if (this.websocket?.readyState === WebSocket.OPEN) {
+//     return;
+//   }
+
+//   window.clearInterval(this.websocketPingInterval);
+//   if (this.websocket) { this.websocket.close() };
+
+//   try {
+//     this.websocket = new WebSocket(`wss://${window.location.hostname}:${window.location.port}/ws`);
+//   } catch (error: any) {
+//     console.log(error.message);
+//     return;
+//   }
+
+//   this.websocket.onopen = async (event) => {
+//     log("ws:connected");
+//     await this.sendHello();
+
+//     // If we're running as a headless peer, send a hello message every N seconds to refresh the posts we have.
+//     let helloRefreshIntervalPeriod = 120;
+//     if (app.isHeadless) {
+//       console.log("wsConnection: Setting hello refresh interval to ", helloRefreshIntervalPeriod)
+//       this.helloRefreshInterval = window.setInterval(() => {
+//         console.log("wsConnection: Hello refresh.")
+
+//         if (!navigator.onLine) {
+//           return;
+//         }
+//         this.sendHello();
+//       }, helloRefreshIntervalPeriod * 1000);
+//     }
+
+//     this.websocketPingInterval = window.setInterval(() => {
+//       if (!navigator.onLine) {
+//         return;
+//       }
+//       this.send({ type: "ping", peer_id: this.peerID, peer_name: app.peername, user_id: app.userID, user_name: app.username });
+//     }, 10_000)
+//   };
+
+//   this.websocket.onclose = (event) => {
+//     log("ws:disconnected");
+//     // this.retry *= 2;
+//     log(`Retrying in ${this.retry} seconds`);
+//     window.setTimeout(() => { this.connect(); }, this.retry * 1000);
+//   };
+
+//   this.websocket.onmessage = (event) => {
+//     // log('ws:<-' + event.data.slice(0, 240));
+//     let data = JSON.parse(event.data);
+
+//     let { type } = data;
+
+//     let handler = this.messageHandlers.get(type);
+//     if (!handler) {
+//       console.warn(`Got a message we can't handle:`, type);
+//       return;
+//     }
+
+//     handler(data);
+
+//   };
+
+//   this.websocket.onerror = (event) => {
+//     log('ws:error: ' + event);
+//   };
+// }
+// }
+
+// disconnect() {
+//   this.websocket?.close();
+// }
+// }
+
 class wsConnection {
   websocket: WebSocket | null = null;
   userID = "";
@@ -304,12 +387,19 @@ class wsConnection {
     this.messageHandlers.set('pong', this.pongHandler);
     this.messageHandlers.set('peer_message', this.peerMessageHandler.bind(this));
 
+
+    // 
     this.peerMessageHandlers.set('get_post_ids_for_user', this.getPostIdsForUserHandler.bind(this));
     this.peerMessageHandlers.set('get_post_ids_for_user_response', this.getPostIdsForUserResponseHandler.bind(this));
 
     this.peerMessageHandlers.set('get_posts_for_user', this.getPostsForUserHandler.bind(this));
     this.peerMessageHandlers.set('get_posts_for_user_response', this.getPostsForUserReponseHandler.bind(this));
 
+    this.peerMessageHandlers.set('send_webrtc_offer', this.sendWebRTCOfferHandler.bind(this));
+    this.peerMessageHandlers.set('send_webrtc_offer_response', this.getPostIdsForUserResponseHandler.bind(this));
+
+
+
     window.addEventListener('beforeunload', () => this.disconnect());
 
     this.connect();
@@ -340,6 +430,10 @@ class wsConnection {
   pongHandler(data: any) {
   }
 
+  async sendWebRTCOfferHandler(data:any) {
+    
+  }
+
   async getPostIdsForUserResponseHandler(data: any) {
     // log(`getPostsForUserResponse: ${data}`)
 
@@ -1020,6 +1114,8 @@ class App {
     this.render();
   }
 
+
+  // What happens with multiple tabs/connections from the same peer ID? I don't think this works, we also need a session ID for each connection
   getPeerID() {
     let id = localStorage.getItem("peer_id");
 
@@ -1540,7 +1636,36 @@ class App {
   }
 
   async main() {
+    let urlParams = (new URL(window.location.href)).searchParams;
+    if (urlParams.has('log')) {
+      this.showInfo();
+    }
 
+  let peer:RTCPeerConnection|null = null;
+//  if (window.RTCPeerConnection) {
+    peer = new RTCPeerConnection({
+      iceServers: [
+        { urls: "stun:ddln.app"},
+        { urls: "turn:ddln.app", username:"a", credential:"b"},
+        { urls: "stun:stun.l.google.com" }, // keeping this for now as my STUN server is not return ipv6
+      //  { urls: "stun:stun1.l.google.com" },
+      //  { urls: "stun:stun2.l.google.com" },
+      //  { urls: "stun:stun3.l.google.com" },
+      //  { urls: "stun:stun4.l.google.com" },
+      ]
+      });
+
+      peer.createDataChannel('boop');
+
+      peer.onicecandidate = ({ candidate }) => {log(`WRTC:${candidate?.address} ${candidate?.protocol} ${candidate?.type} ${(candidate as any)?.url}`)};
+      peer.onnegotiationneeded = (event) => {console.log("on negotiation needed: ", event)}
+
+      peer.createOffer().then((description)=>{
+        peer.setLocalDescription(description)
+        log("RTC: " + description.sdp + description.type);
+      });
+
+ //   }
 
     // await this.exportPostsForUser('b38b623c-c3fa-4351-9cab-50233c99fa4e');
 
@@ -1579,11 +1704,6 @@ class App {
     document.getElementById('connectURL')!.innerHTML = `<a href="${this.connectURL}">connect</a>`;
 
 
-    let urlParams = (new URL(window.location.href)).searchParams;
-    if (urlParams.has('log')) {
-      this.showInfo();
-    }
-
     if (urlParams.has('headless')) {
       this.isHeadless = true;
     }