From 72c0a541c8cd88cd62ca8e18f36613783a897dbb Mon Sep 17 00:00:00 2001 From: Subodh Singh Date: Sun, 4 Jul 2021 21:45:35 +0530 Subject: [PATCH] First commit --- README.md | 2 +- index.html | 45 ++++++++++++++++++ main.js | 131 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 3 ++ 4 files changed, 180 insertions(+), 1 deletion(-) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/README.md b/README.md index 77c3bb9..0a0a11b 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,2 @@ # P2P-Group-Chat -A very simple p2p group chat using peerjs +A very simple p2p group chat using peerjs that does not store chat or user data. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..c196fc1 --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + Chat App + + + + + +
+ +
+ +
+ +
+
+
+
+ +
+ +
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..27c0ae9 --- /dev/null +++ b/main.js @@ -0,0 +1,131 @@ +// DOM Elements +const joinBtn = document.getElementById("joinBtn"); +const peerIdTextBox = document.getElementById("peerIdTextBox"); +const sendMssgBtn = document.getElementById("sendMssgBtn"); +const mssgTextBox = document.getElementById("mssgTextBox"); +const mssgList = document.getElementById("mssgList"); + +// disabled till the peer is set up +joinBtn.disabled = true; + +// disabled till a connection is established +sendMssgBtn.disabled = true; + +// Global variables: +const peer = new Peer(); // my peer +let connections = []; // array of connections + + +// peer set up successfully +peer.on('open', function (id) { + // enable join + joinBtn.disabled = false; + + var mssgElement = document.createElement("li"); + mssgElement.className = "list-group-item list-group-item-primary text-center"; + mssgElement.innerText = `Your peer ID: ${peer.id}`; + mssgList.append(mssgElement); +}); + + +// received a connection +peer.on('connection', function (conn) { + connections.push(conn); + + var mssgElement = document.createElement("li"); + mssgElement.className = "list-group-item list-group-item-primary text-center"; + mssgElement.innerText = `Received Data Connection by | ${conn.peer}`; + mssgList.append(mssgElement); + + conn.on('open', function () { + // !!!!!!!Add code to handle if connection request from already existing connection + // DataConnection ready to use + sendMssgBtn.disabled = false; + + var mssgElement = document.createElement("li"); + mssgElement.className = "list-group-item list-group-item-primary text-center"; + mssgElement.innerText = `Received Data Connection ready | ${conn.peer}`; + mssgList.append(mssgElement); + + // Event Listener for received data + conn.on('data', function (data) { + if (data.type == "message") { + var mssgElement = document.createElement("li"); + mssgElement.className = "list-group-item"; + mssgElement.innerText = "[ " + conn.peer.substring(0, 5) + " ] | " + data.message; + mssgList.append(mssgElement); + } + // else if (data.type == ...)... + + }); + + conn.on('close', function () { + var mssgElement = document.createElement("li"); + mssgElement.className = "list-group-item list-group-item-primary text-center"; + mssgElement.innerText = `Data Connection closed | ${conn.peer}`; + mssgList.append(mssgElement); + }); + }); +}); + + +joinBtn.onclick = () => { + var conn = peer.connect(peerIdTextBox.value); + conn.on('open', function () { + sendMssgBtn.disabled = false; + connections.push(conn); + + var mssgElement = document.createElement("li"); + mssgElement.className = "list-group-item list-group-item-primary text-center"; + mssgElement.innerText = `Connected to | ${conn.peer}`; + mssgList.append(mssgElement); + + // Receive messages + conn.on('data', function (data) { + if (data.type == "message") { + var mssgElement = document.createElement("li"); + mssgElement.className = "list-group-item"; + mssgElement.innerText = "[ " + conn.peer.substring(0, 5) + " ] | " + data.message; + mssgList.append(mssgElement); + } + }); + }); + + conn.on('close', function () { + // remove from connections: + const index = connections.indexOf(conn); + if (index > -1) { + connections.splice(index, 1); + } + }); +}; + + +sendMssgBtn.onclick = () => { + const mssg = { + type: "message", + message: mssgTextBox.value + }; + mssgTextBox.value = ""; + + var mssgElement = document.createElement("li"); + mssgElement.className = "list-group-item text-end"; + mssgElement.innerText = mssg.message + " | [ You] "; + mssgList.append(mssgElement); + + connections.forEach((conn) => { + if (conn.open) { + conn.send(mssg); + } + }); +}; + + +peer.on('error', function (err) { + if (err.type == 'peer-unavailable') { + var mssgElement = document.createElement("li"); + mssgElement.className = "list-group-item list-group-item-primary text-center"; + mssgElement.innerText = `Coudnt not connet to a peer`; + mssgList.append(mssgElement); + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..4a1055a --- /dev/null +++ b/style.css @@ -0,0 +1,3 @@ +body { + margin: 20px; +} \ No newline at end of file