diff --git a/public/index.html b/public/index.html
index 0be8682ae600b1b814d672b4d9f4a604f37d3e5f..514e92561cb091a954e9227225faf191854144bc 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 9361101c8b7e5adea27958553d70521252259a9d..978f335c162f1d1fb4924e2729c0a488e28ee396 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 c6ba4b566e6dbb279d3f44eea9fb87e86d722042..0d2f040985880cf3d130ac7d038cf3a53b56654d 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)
})