first commit

reerajput930 · Jul 30, 2021 · b2748fc · b2748fc
commit b2748fc
Show file tree

Hide file tree

Showing 989 changed files with 141,744 additions and 0 deletions.
diff --git a/Idea-behind-code_pages-to-jpg-0001.jpg b/Idea-behind-code_pages-to-jpg-0001.jpg
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# Real-Time-Chat-Application.
+
+Link of the application = https://reerajput930.github.io/Real-Time-Chat-Application./
+
+
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-cayman
diff --git a/images/chat icon.png b/images/chat icon.png
diff --git a/images/send icon.png b/images/send icon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!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="style.css">
+    <!-- By default, the Socket.IO server exposes a client bundle at /socket.io/socket.io.js. -->
+    <script defer src="http://localhost:3000/socket.io/socket.io.js"></script>
+    <script defer src="index.js"></script>
+     <!-- server and client is attach now -->
+    <title>Hangout</title>
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="head">
+            <h1>Hangout</h1>
+            <img src="images/chat icon.png" alt="">
+        </div>
+
+        <div class="chat-section">
+           <!-- <div class="message-right"></div>
+           <div class="message-left"></div> -->
+
+        </div>
+        <div class="send-section">
+           <form action="#" id="send_input">
+               <input type="text" placeholder="write something" id="input-message">
+               <button type="submit"><img id="send-icon" src="images/send icon.png" alt="Submit"></button>
+           </form>
+        </div>
+
+
+    </div>
+
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,67 @@
+//nodeserver and clienrserver both are different website
+const socket = io('http://localhost:3000');
+
+// on - listen event
+// emit - send update
+
+// get element by id or queryselector 
+const form = document.getElementById('send_input')
+const messageInput = document.getElementById('input-message')
+const chatsection = document.querySelector('.chat-section')
+
+var audio = new Audio('ting.mp3');
+
+// prompt
+const username = prompt("Enter Your Name to join the Hangout Room");
+// emit() to send a message to all the connected clients.
+
+socket.emit('new-user-connected', username)
+
+
+const append = (message, position) => {
+    const messageElement = document.createElement('div')
+    messageElement.innerHTML = message;
+    // messageElement.classList.add('message')
+    messageElement.classList.add(position);
+    chatsection.append(messageElement)
+    if(position == 'message-left'){
+        audio.play()
+    }
+}
+
+// listening the user-joined event from the server 
+// and calling the append function for innerhtml work
+socket.on('user-joined', Name => {
+    append(`<h4>${Name} </h4>joined Hangout Chat `, 'message-mid')
+})
+
+// this is listening the event of button(type = submit)
+form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const message = messageInput.value;
+    append(`<h4>You:</h4> ${message}`, 'message-right')
+
+    // giving update to server by emit
+    socket.emit('message-send', message)
+    // empty th input when message is send
+    messageInput.value = ''
+})
+
+// listening the recieved event from the server
+// and calling the append function for innerhtml work
+socket.on('receive', data => {
+    append(`<h4>${data.username}:</h4> ${data.message}`, 'message-left')
+})
+socket.on('left', data => {
+    append(`<h4>${data}:</h4> Left the chat`, 'message-mid')
+})
+
+
+
+
+
+
+
+
+
+
diff --git a/node_server/node_modules/.bin/is-ci b/node_server/node_modules/.bin/is-ci
diff --git a/node_server/node_modules/.bin/is-ci.cmd b/node_server/node_modules/.bin/is-ci.cmd
diff --git a/node_server/node_modules/.bin/is-ci.ps1 b/node_server/node_modules/.bin/is-ci.ps1
diff --git a/node_server/node_modules/.bin/nodemon b/node_server/node_modules/.bin/nodemon
diff --git a/node_server/node_modules/.bin/nodemon.cmd b/node_server/node_modules/.bin/nodemon.cmd
diff --git a/node_server/node_modules/.bin/nodemon.ps1 b/node_server/node_modules/.bin/nodemon.ps1
diff --git a/node_server/node_modules/.bin/nodetouch b/node_server/node_modules/.bin/nodetouch
diff --git a/node_server/node_modules/.bin/nodetouch.cmd b/node_server/node_modules/.bin/nodetouch.cmd
diff --git a/node_server/node_modules/.bin/nodetouch.ps1 b/node_server/node_modules/.bin/nodetouch.ps1
diff --git a/node_server/node_modules/.bin/nopt b/node_server/node_modules/.bin/nopt
diff --git a/node_server/node_modules/.bin/nopt.cmd b/node_server/node_modules/.bin/nopt.cmd
diff --git a/node_server/node_modules/.bin/nopt.ps1 b/node_server/node_modules/.bin/nopt.ps1
diff --git a/node_server/node_modules/.bin/rc b/node_server/node_modules/.bin/rc
diff --git a/node_server/node_modules/.bin/rc.cmd b/node_server/node_modules/.bin/rc.cmd
diff --git a/node_server/node_modules/.bin/rc.ps1 b/node_server/node_modules/.bin/rc.ps1
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,5 @@
		# Real-Time-Chat-Application.

		Link of the application = https://reerajput930.github.io/Real-Time-Chat-Application./