@live-change/peer-connection-frontend 0.8.109 → 0.8.111

package/front/src/components/Peer.js

@@ -55,10 +55,10 @@ const createPeer = async ({
 
   const otherPeers = computed(() => peers.value?.filter(peer => peer.id !== peerId))
   const otherPeersOnline = computed(() => otherPeers.value?.filter(peer => peer.peerState?.online))
-  const isConnectionPossible = computed(() => online.value && (!!turnConfiguration.value))
+  const isConnectionPossible = computed(() => online.value /*&& (!!turnConfiguration.value)*/)
 
   const rtcConfiguration = computed(() => ({
-    iceServers: [ turnConfiguration.value ],
+    iceServers: turnConfiguration.value ? [ turnConfiguration.value ] : [],
     iceTransportPolicy: 'all', // 'all' or 'relay',
     bundlePolicy: 'balanced'
   }))
@@ -132,23 +132,6 @@ const createPeer = async ({
     }
   )
 
-  function sendMessage(message) {
-    console.log("SENDING PEER MESSAGE", message)
-    message.from = peerId
-    message.sent = message.sent || new Date().toISOString()
-    message._commandId = message._commandId || api.uid()
-    const requestTimeout = 10000
-    //console.log("SENDING PEER MESSAGE", message)
-    api.requestWithSettings({ requestTimeout }, ['peerConnection', 'postMessage'], message)
-      .catch(error => {
-        console.log("PEER MESSAGE ERROR", error)
-        if(error === 'timeout' && !finished.value) {
-          console.log("RETRYING")
-          sendMessage(message)
-        }
-      })
-  }
-
   function updateConnections() {
     const peers = isConnectionPossible.value ? otherPeersOnline.value : []
     for(let connectionId = 0; connectionId < connections.value.length; connectionId++) {
@@ -228,7 +211,9 @@ const createPeer = async ({
     ...peerPublic,
     rtcConfiguration,
     clientIp,
-    sendMessage
+    api,
+    finished,
+    peerId
   }
 
   return {

package/front/src/components/PeerConnection.js

@@ -57,6 +57,43 @@ const createPeerConnection = (peer, to) => {
     }
   })
 
+  const sendQueue = []
+  let sendingPromise = null
+  async function sendMessagesQueue() {
+    if(!sendingPromise) sendingPromise = (async () => {
+      while(sendQueue.length && !peer.finished.value) {
+        const messages = sendQueue.slice(0, 23)
+        console.log("SENDING PEER MESSAGES", messages)
+        const requestTimeout = 10000
+        const request = {
+          from: peer.peerId,
+          to,
+          messages,
+          _commandId: messages[0]._commandId || api.uid()
+        }
+        while(true) {
+          try {
+            await api.requestWithSettings({ requestTimeout }, ['peerConnection', 'postMessages'], request)
+            sendQueue.splice(0, messages.length)
+            break
+          } catch(error) {
+            console.error("SENDING PEER MESSAGES ERROR", error)
+          }
+        }
+      }
+      sendingPromise = null
+    })()
+    return sendingPromise
+  }
+
+  function sendMessage(message) {
+    //console.log("SENDING PEER MESSAGE", message)
+    message.sent = message.sent || new Date().toISOString()
+    message._commandId = message._commandId || api.uid()
+    sendQueue.push(message)
+    sendMessagesQueue()
+  }
+
   async function restartConnection() {
     console.log("RESTARTING CONNECTION")
     /*if(false && rtc.value.restartIce) {
@@ -64,38 +101,58 @@ const createPeerConnection = (peer, to) => {
       rtc.value.restartIce()
     } else {*/
     console.log("RESTART OFFER!")
-    const offer = 
-      await rtc.value.createOffer({ ...offerOptions.value, iceRestart: true })
-    if(rtc.value.signalingState !== "stable") {
-      console.log("RTC GOT OUT OF STABLE WHILE CREATING OFFER. IGNORE GENERATED OFFER!")
-      return
-    }
-    await rtc.value.setLocalDescription(offer)
-    peer.sendMessage({ to, type: "sdp", data: offer })
+    createOffer()
   }
   
   watch(clientIp, ip => {
     if(rtc.value) restartConnection()
   })
 
-  async function handleNegotiationNeeded(event) {
-    console.log("NEGOTIATION NEEDED! IN STATE", rtc.value.signalingState)
-    if(!isEnabled.value) return
-    if(state.value === 'negotiating') {
-      console.log("SKIP NESTED NEGOTIATIONS WITH", to)
-      //return
-    }
-    state.value = 'negotiating'
-    // if it's disabled there is no need for offer
-    console.log("UPDATING OFFER")
+  let lastOfferId = 0
+  async function createOffer(){
+    if(state.value === 'rollback') return // if it's rollbacked there is no need for offer
+    const offerId = ++lastOfferId
+    state.value = 'creating-offer'
+    console.log("CREATING OFFER")
     const offer = await rtc.value.createOffer(offerOptions.value || undefined)
     if(rtc.value.signalingState !== "stable") {
       console.log("RTC GOT OUT OF STABLE WHILE CREATING OFFER. IGNORE GENERATED OFFER!")
-      return;
+      return
+    }
+    if(offerId !== lastOfferId) {
+      console.log("OFFER ID CHANGED WHILE CREATING OFFER. IGNORE GENERATED OFFER!")
+      return
     }
     await rtc.value.setLocalDescription(offer)
-    peer.sendMessage({ to, type: "sdp", data: offer })
     console.log("SDP OFFER SET! RTC IN STATE", rtc.value.signalingState)
+    sendMessage({ type: "sdp", data: offer })
+    state.value = 'sent-offer'
+  }
+
+  let lastAnswerId = 0
+  async function createAnswer(){
+    const answerId = ++lastAnswerId
+    state.value = 'creating-answer'
+    console.log("CREATING ANSWER")
+    const answer = await rtc.value.createAnswer(answerOptions.value || undefined)
+    if(rtc.value.signalingState !== "have-remote-offer") {
+      console.log("RTC GOT OUT OF HAVE REMOTE OFFER WHILE CREATING ANSWER. IGNORE GENERATED ANSWER!")
+      return
+    }
+    if(answerId !== lastAnswerId) {
+      console.log("ANSWER ID CHANGED WHILE CREATING ANSWER. IGNORE GENERATED ANSWER!")
+      return
+    }
+    await rtc.value.setLocalDescription(answer)
+    console.log("SDP ANSWER SET! RTC IN STATE", rtc.value.signalingState)
+    sendMessage({ type: "sdp", data: answer })
+    state.value = 'sent-answer'
+  }
+
+  async function handleNegotiationNeeded(event) {
+    console.log("NEGOTIATION NEEDED! IN RTC STATE", rtc.value.signalingState, "STATE", state.value)
+    if(!isEnabled.value) return // if it's disabled there is no need for offer
+    await createOffer()
   }
 
   async function handleSignalingStateChange(event) {
@@ -106,7 +163,7 @@ const createPeerConnection = (peer, to) => {
   async function handleIceCandidate(event) {
     if(state.value === 'closed') return
     //console.log("GOT ICE CANDIDATE", event.candidate && event.candidate.candidate)
-    peer.sendMessage({ to, type: "ice", data: event.candidate })
+    sendMessage({ type: "ice", data: event.candidate })
   }
   function handleTrack(event) {
     if(state.value === 'closed') return
@@ -166,7 +223,14 @@ const createPeerConnection = (peer, to) => {
     }
   }
 
+  let lastReceivedMessageSent = ''
+
   async function handleMessage(message) {
+    if(lastReceivedMessageSent > message.sent) {
+      console.error("MESSAGE OUT OF ORDER", message)
+      throw new Error("Message sent before last received message - message order broken!")
+    }
+    lastReceivedMessageSent = message.sent
     //console.log("PC", to, "HANDLE MESSAGE", message)
     if(state.value === 'created') {
       console.log("ADD MESSAGE TO WAITING QUEUE")
@@ -177,33 +241,29 @@ const createPeerConnection = (peer, to) => {
     //console.log("DO HANDLE MESSAGE")
     switch(message.type) {
       case "sdp": {
-        console.log("RECEIVED SDP", message.data.type, "IN STATE", rtc.value.signalingState)
+        console.log("RECEIVED SDP", message.data.type, "IN RTC STATE", rtc.value.signalingState, "STATE", state.value)
         if(message.data.type === 'offer') {
-          if(rtc.value.signalingState !== "stable") {
-            console.log("SDP CONFLICT, RECEIVED OFFER IN UNSTABLE STATE")
+          if(rtc.value.signalingState !== "stable"
+            || state.value === 'sent-offer' || state.value === 'creating-offer') {
+            console.log("SDP CONFLICT, RECEIVED OFFER WHEN CREATING/GOT OFFER")
             if(isPolite.value) {
               console.log("I AM POLITE SO I WILL ROLLBACK RTC STATE MACHINE")
-              await rtc.value.setLocalDescription({ type: "rollback" })
+              lastOfferId ++ // ignore currently creating offer
+              state.value = 'rollback'
+              if(rtc.value.signalingState !== "stable") {
+                console.log("RTC NOT STABLE! ROLLBACK NEEDED!")
+                await rtc.value.setLocalDescription({ type: "rollback" })
+                console.log("ROLLBACK DONE!")
+              }
               await rtc.value.setRemoteDescription(message.data)
-              console.log("ROLLBACK DONE")
-              const answer =
-                await rtc.value.createAnswer(answerOptions.value || undefined)
-              console.log("GOT RTC ANSWER IN STATE", rtc.value.signalingState)
-              await rtc.value.setLocalDescription(answer)
-              console.log("LOCAL ANSWER DESCRIPTION SET! SENDING ANSWER!")
-              peer.sendMessage({ to, type: "sdp", data: answer })
+              await createAnswer()
             } else {
               console.log("I AM NOT POLITE SO I WILL IGNORE OFFER")
             }
           } else {
             console.log("SDP STATE GOOD!")
             await rtc.value.setRemoteDescription(message.data)
-            const answer =
-              await rtc.value.createAnswer(answerOptions.value || undefined)
-            console.log("GOT RTC ANSWER IN STATE", rtc.value.signalingState)
-            await rtc.value.setLocalDescription(answer)
-            console.log("LOCAL ANSWER DESCRIPTION SET! SENDING ANSWER!")
-            peer.sendMessage({ to, type: "sdp", data: answer })
+            await createAnswer()
           }
         } else {
           console.log("GOT ANSWER FROM REMOTE PEER")
@@ -212,22 +272,26 @@ const createPeerConnection = (peer, to) => {
       } break;
       case "ice": {
         console.log("RECEIVED ICE! IN STATE", rtc.value.signalingState)
+        console.log("ICE TIMESTAMP", message.timestamp, 'SENT', message.sent)
         if(rtc.value.signalingState === "have-local-offer") {
           console.log("IGNORE ICE IN THIS STATE")
           return;
         }
         let ice = message.data
         //if(ice && ice.candidate === "") break;
-        if(ice && ice.candidate !== "") {
+        if(ice && ice.candidate) {
           console.log("ADDING ICE CANDIDATE", ice.candidate)
           await rtc.value.addIceCandidate(new RTCIceCandidate(ice))
-        } else if(window.RTCPeerConnection.prototype.addIceCandidate.length === 0){
-          await rtc.value.addIceCandidate()
+        } else {
+          console.log("ICE CANDIDATE WITHOUT CANDIDATE - ICE CANDIDATES END", ice)
+          if(window.RTCPeerConnection.prototype.addIceCandidate.length === 0){
+            await rtc.value.addIceCandidate()
+          }
         }
         //console.log("REMOTE ICE CANDIDATE ADDED", ice && ice.candidate)
       } break;
       case "ping": {
-        peer.sendMessage({ to, type: "pong", data: message.data})
+        sendMessage({ type: "pong", data: message.data})
       } break;
       case "pong": break; // ignore pong
       default:
@@ -240,6 +304,7 @@ const createPeerConnection = (peer, to) => {
     if(rtc.value) throw new Error("can't connect twice!")
     state.value = 'connecting'
     rtc.value = new RTCPeerConnection(rtcConfiguration.value)
+    window.rtc = rtc.value
     rtcSignalingState.value = rtc.value.signalingState
     iceGatheringState.value = rtc.value.iceGatheringState
     iceConnectionState.value = rtc.value.iceConnectionState

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/peer-connection-frontend",
-  "version": "0.8.109",
+  "version": "0.8.111",
   "scripts": {
     "memDev": "dotenvx run -- node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; dotenvx run -- node server/start.js localDev --enableSessions --initScript ./init.js",
@@ -22,19 +22,19 @@
   },
   "type": "module",
   "dependencies": {
-    "@live-change/cli": "^0.8.109",
-    "@live-change/dao": "^0.8.109",
-    "@live-change/dao-vue3": "^0.8.109",
-    "@live-change/dao-websocket": "^0.8.109",
-    "@live-change/framework": "^0.8.109",
-    "@live-change/password-authentication-service": "^0.8.109",
-    "@live-change/secret-code-service": "^0.8.109",
-    "@live-change/secret-link-service": "^0.8.109",
-    "@live-change/session-service": "^0.8.109",
-    "@live-change/user-frontend": "^0.8.109",
-    "@live-change/user-service": "^0.8.109",
-    "@live-change/vue3-components": "^0.8.109",
-    "@live-change/vue3-ssr": "^0.8.109",
+    "@live-change/cli": "^0.8.111",
+    "@live-change/dao": "^0.8.111",
+    "@live-change/dao-vue3": "^0.8.111",
+    "@live-change/dao-websocket": "^0.8.111",
+    "@live-change/framework": "^0.8.111",
+    "@live-change/password-authentication-service": "^0.8.111",
+    "@live-change/secret-code-service": "^0.8.111",
+    "@live-change/secret-link-service": "^0.8.111",
+    "@live-change/session-service": "^0.8.111",
+    "@live-change/user-frontend": "^0.8.111",
+    "@live-change/user-service": "^0.8.111",
+    "@live-change/vue3-components": "^0.8.111",
+    "@live-change/vue3-ssr": "^0.8.111",
     "@vueuse/core": "^10.11.0",
     "boxicons": "^2.1.4",
     "codeceptjs-assert": "^0.0.5",
@@ -54,7 +54,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.8.109",
+    "@live-change/codeceptjs-helper": "^0.8.111",
     "codeceptjs": "^3.6.5",
     "generate-password": "1.7.1",
     "playwright": "^1.41.2",
@@ -65,5 +65,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "075bf3759fae6c40fb8e44d77d9f12c5c175e098"
+  "gitHead": "9b96afb2fc61ab3d2a5d143924e2c56d411280b4"
 }