From eb83ae48c158ed348794d4de93cce3dafc6c2564 Mon Sep 17 00:00:00 2001
From: Moritz Langenstein <ml5717@ic.ac.uk>
Date: Thu, 10 Oct 2019 10:56:33 +0100
Subject: [PATCH] (ml5717) Added simple UI for connections
---
public/index.html | 12 ++++++++++++
src/app.js | 39 +++++++++++++++++++++++++++++++++++++--
src/y-webrtc/index.js | 4 ++++
3 files changed, 53 insertions(+), 2 deletions(-)
diff --git a/public/index.html b/public/index.html
index 0be8682..514e925 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,18 @@
<meta charset="UTF-8" />
</head>
<body>
+ <div>
+ Your client ID: <input id="user-id" type="text" value="" readonly="" />
+ </div>
+ <div>
+ Enter peer ID: <input id="peer-id" type="text" value="" />
+ <button id="peer-connect">Connect</button>
+ </div>
+ <div>
+ Connected peers:
+ <ul id="connected-peers"></ul>
+ </div>
+
<textarea style="width: 100%; height: 500px" id="textfield"></textarea>
<script src="js/app.js"></script>
diff --git a/src/app.js b/src/app.js
index 9361101..978f335 100644
--- a/src/app.js
+++ b/src/app.js
@@ -20,7 +20,42 @@ Y({
}).then(y => {
y.share.textfield.bind(document.getElementById("textfield"))
- global.connectToPeer = function(uid) {
- y.connector.connectToPeer(uid)
+ const userIDElem = document.getElementById("user-id")
+ const peerIDElem = document.getElementById("peer-id")
+ const peerButton = document.getElementById("peer-connect")
+ const connectedP = document.getElementById("connected-peers")
+
+ userIDElem.value = y.db.userId
+
+ y.connector.onUserEvent(function(event) {
+ switch (event.action) {
+ case "userID":
+ userIDElem.value = event.id
+ break
+ case "userJoined":
+ var peerElem = document.createElement("li")
+ peerElem.innerHTML = event.user
+ connectedP.appendChild(peerElem)
+ break
+ case "userLeft":
+ for (var peer of connectedP.children) {
+ if (peer.innerHTML == event.user) {
+ connectedP.removeChild(peer)
+ }
+ }
+ break
+ }
+ })
+
+ peerButton.onclick = function() {
+ const peerID = peerIDElem.value
+
+ if (peerID == "") {
+ return
+ }
+
+ y.connector.connectToPeer(peerID)
+
+ peerIDElem.value = ""
}
})
diff --git a/src/y-webrtc/index.js b/src/y-webrtc/index.js
index c6ba4b5..0d2f040 100644
--- a/src/y-webrtc/index.js
+++ b/src/y-webrtc/index.js
@@ -33,6 +33,10 @@ function extend(Y) {
peer.on("open", function(id) {
console.log("My peer ID is: " + id)
+ for (var f of self.userEventListeners) {
+ f({ action: "userID", id: id })
+ }
+
self.setUserId(id)
})
--
GitLab