Implemented basic y-js - simplepeer layer for manual connections

README.md

@@ -31,6 +31,11 @@ CRDT-based p2p Drawing Application
 ### Open in browser
 
 Using a modern browser that supports WebRTC, like a recent version of Chrome or Firefox, open several windows of [http://localhost:12345](http://localhost:12345).
+Open the developer console to find out your client's ID. To connect to another peer, call the following function from the console with their ID:
+
+```
+>> window.connectToPeer("peer-id")
+```
 
 ## License
 

src/app.js

@@ -19,4 +19,8 @@ Y({
   }
 }).then(y => {
   y.share.textfield.bind(document.getElementById("textfield"))
+
+  global.connectToPeer = function(uid) {
+    y.connector.connectToPeer(uid)
+  }
 })

src/y-webrtc/index.js

@@ -16,32 +16,101 @@ function extend(Y) {
       super(y, options)
       this.webrtcOptions = options
 
-      this.connect()
+      this.initialiseConnection()
     }
 
-    connect() {
+    initialiseConnection() {
       var peer = new Peer({
         host: this.webrtcOptions.host,
         port: this.webrtcOptions.port,
         path: this.webrtcOptions.path
       })
 
+      this.peer = peer
+      var self = this
+      this.peers = new Map()
+
       peer.on("open", function(id) {
         console.log("My peer ID is: " + id)
+
+        self.setUserId(id)
+      })
+
+      peer.on("connection", function(dataConnection) {
+        self.initialiseChannel(dataConnection)
+      })
+    }
+
+    connectToPeer(uid) {
+      this.initialiseChannel(this.peer.connect(uid))
+    }
+
+    initialiseChannel(dataConnection) {
+      var self = this
+
+      dataConnection.on("open", function() {
+        console.log("Connected to peer " + dataConnection.peer)
+
+        self.peers.set(dataConnection.peer, dataConnection)
+        self.userJoined(dataConnection.peer, "master")
+      })
+
+      dataConnection.on("data", function(data) {
+        console.log("Message from peer " + dataConnection.peer + ":", data)
+
+        self.receiveMessage(dataConnection.peer, data)
+      })
+
+      dataConnection.on("close", function() {
+        console.log("Disconnected from peer " + dataConnection.peer)
+
+        self.peers.delete(dataConnection.peer)
+        self.userLeft(dataConnection.peer)
       })
     }
 
     disconnect() {
+      this.peer.destroy()
+      this.peers = new Map()
+
       super.disconnect()
     }
 
     reconnect() {
+      this.initialiseConnection()
+
       super.reconnect()
     }
 
-    send(/*uid, message*/) {}
+    send(uid, message) {
+      console.log("Sending message", message, "to " + uid)
+
+      var self = this
+
+      var send = function() {
+        // check if the clients still exists
+        var peer = self.peers.get(uid)
+
+        if (peer) {
+          try {
+            peer.send(message)
+          } catch (error) {
+            setTimeout(send, 500)
+          }
+        }
+      }
+
+      // try to send the message
+      send()
+    }
+
+    broadcast(message) {
+      console.log("Broadcasting message", message)
 
-    broadcast(/*message*/) {}
+      for (const uid of this.peers.keys()) {
+        this.send(uid, message)
+      }
+    }
 
     isDisconnected() {
       return false