First commit

sinsub · Jul 4, 2021 · 72c0a54 · 72c0a54
1 parent 7b85b40
commit 72c0a54
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 1 deletion.
diff --git 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.
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="style.css">
+    <title>Chat App</title>
+</head>
+
+
+
+<body>
+    <div class="container">
+        <ul id="mssgList" class="list-group">
+        </ul>
+        <div class="input-group mb-3">
+            <input id="mssgTextBox" type="text" class="form-control" placeholder="Type a message"
+                aria-label="Recipient's username" aria-describedby="button-addon2">
+            <div class="input-group-append">
+                <button id="sendMssgBtn" class="btn btn-outline-secondary" type="button"
+                    id="button-addon2">Send</button>
+            </div>
+        </div>
+    </div>
+    <div class="container">
+        <ul id="mssgList" class="list-group">
+        </ul>
+        <div class="input-group mb-3">
+            <input id="peerIdTextBox" type="text" class="form-control" placeholder="Peer ID"
+                aria-label="Recipient's username" aria-describedby="button-addon2">
+            <div class="input-group-append">
+                <button id="joinBtn" class="btn btn-outline-secondary" type="button"
+                    id="button-addon2">Join</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>
+    <script defer src="main.js"></script>
+</body>
+
+</html>
diff --git a/main.js 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);
+    }
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,3 @@
+body {
+    margin: 20px;
+}