Merge pull request #7 from hkaur008/chatbase

Chatbase

index.js

@@ -15,33 +15,39 @@ app.set('view engine', 'ejs');
 app.use(express.static('public'));
 app.use('/peerjs', peerServer);
 
-app.get( '/', (req, res) => {
-  res.send(`main`);
-});
 
 app.get( '/teams-webrtc', (req, res) => {
   res.redirect(`/${uuidv4()}`);
 });
 
+app.get( '/main+:room', (req, res) => {
+  res.render('main',{ roomId: req.params.room });
+});
+
 app.get( '/:room', (req, res) => {
   res.render('room', { roomId: req.params.room });
 });
 
 io.on('connection', (socket) => {
-  socket.on('join-room', (roomId, userId ,userName) => {
+  socket.on('join-room', (roomId, userId ,userName,state) => {
     socket.join(roomId);
-    socket.broadcast.to(roomId).emit('user-connected', userId);
+    socket.broadcast.to(roomId).emit('user-connected', userId , state);
 
-    socket.on("disconnect", (reason)=>{
-      socket.broadcast.emit("user-disconnected", userId); 
-  });
     socket.on('message', (message) => {
       io.to(roomId).emit('createMessage', message , userName, userId);
     });
-
-
-
 
+    if(state ==="in-meet")
+    {
+      socket.on("disconnect", (reason)=>{
+        socket.broadcast.emit("user-disconnected", userId ); 
+    });
+
+      socket.on('waved', (userId) => {
+      io.to(roomId).emit('toggleWave', userId);
+    });
+  }
+
   });
 });
 

public/fire_chat.js

@@ -0,0 +1,14 @@
+
+  // Your web app's Firebase configuration
+  var firebaseConfig = {
+    apiKey: "AIzaSyBa4MFefKdG4AUn2bnOwsXVg9xO_DKLKEw",
+    authDomain: "engage-project-9d8d3.firebaseapp.com",
+    databaseURL: "https://engage-project-9d8d3-default-rtdb.firebaseio.com",
+    projectId: "engage-project-9d8d3",
+    storageBucket: "engage-project-9d8d3.appspot.com",
+    messagingSenderId: "713389628767",
+    appId: "1:713389628767:web:fcbc43b782dca70e3eaaea"
+  };
+
+  // Initialize Firebase
+firebase.initializeApp(firebaseConfig);

public/main.js

@@ -0,0 +1,182 @@
+const socket = io('/');
+const messageInput = document.getElementById('chat_message');
+const all_messages = document.getElementById('all_messages');
+const main__chat__window = document.getElementById('main__chat__window');
+const photoFilter = document.getElementById('photo-filter');
+const msg_send_btn = document.getElementById('msg_send_btn');
+
+emojiPicker =document.getElementsByTagName("emoji-picker")[0];
+const state = "out-meet";
+const peers = {}
+let myName;
+// messenger
+
+let messageStatus = 0;
+const msgerForm = get(".msger-inputarea");
+const msgerInput = get(".msger-input");
+const msgerChat = get(".msger-chat");
+
+//firebase references
+var messagesRef =firebase.database().ref(ROOM_ID).child("messages")
+
+// Icons made by Freepik from www.flaticon.com
+const PERSON_IMG = "https://image.flaticon.com/icons/svg/145/145867.svg";
+const userName ='hargun';
+let myId = null ;
+
+var peer = new Peer(undefined, {
+  path: '/peerjs',
+  host: '/',
+  port: '443',
+});
+
+
+//user connected    
+    socket.on('user-connected', (userId , state) => {
+      console.log("userconnected"+userId+" "+state);
+    });
+
+
+//enter key
+    document.addEventListener('keypress', (e) => {
+      if (e.keyCode === 13) {
+        e.preventDefault();
+        msg_send_btn.click();
+       }
+     });
+
+//send button    
+    msg_send_btn.addEventListener("click", event => {
+      event.preventDefault();
+      const msgText = msgerInput.value;
+      if (!msgText) return;
+      sendMessage(msgText);
+      console.log(userName);
+      msgerInput.value = "";
+    });
+
+  // send message 
+  const sendMessage = (msg) => {
+        messagesRef.push().set({
+      "sender": myName,
+      "message": msg,
+      "createdAt": formatDate(new Date())
+  });
+      socket.emit('message', msg);
+  }
+
+  //emoji picker 
+  emojiPicker.addEventListener("emoji-click", (e) => {
+    messageInput.value += e.detail.emoji.unicode;
+  });
+
+    socket.on('createMessage', (msg , userName , givenId) => {
+
+      if(givenId===myId)
+        appendMessage(userName, PERSON_IMG, "right", msg);
+      else
+      appendMessage(userName, PERSON_IMG, "left", msg);
+      main__chat__window.scrollTop = main__chat__window.scrollHeight;
+    });
+
+
+
+peer.on('open', (id) => {
+  nameInput(id);
+
+});
+
+//username input
+const nameInput = (id)=> {
+   myName = prompt('Please enter your name', 'Hargun');
+  if (myName != null) {
+
+
+     messagesRef.on('value', (snapshot) => {
+      snapshot.forEach( (element )=>{
+
+        if(!messageStatus){
+          if(element.val().sender===myName)
+        appendBeforeMessage(element.val().sender,PERSON_IMG,"right",element.val().message,element.val().createdAt)
+        else{
+        appendBeforeMessage(element.val().sender,PERSON_IMG,"left",element.val().message,element.val().createdAt)
+        }
+      }
+      })
+      messageStatus = 1;
+    });
+
+    socket.emit('join-room', ROOM_ID, id , myName , state);
+    myId=id;
+  }
+}
+
+
+// messenger code starts
+
+function appendBeforeMessage(name, img, side, text, date) {  
+  const msgHTML = `
+    <div class="msg ${side}-msg">
+      <div class="msg-img" style="background-image: url(${img})"></div>
+
+      <div class="msg-bubble">
+        <div class="msg-info">
+          <div class="msg-info-name">${name}</div>
+          <div class="msg-info-time">${date}</div>
+        </div>
+
+        <div class="msg-text">${text}</div>
+      </div>
+    </div>
+  `;
+
+  msgerChat.insertAdjacentHTML("beforeend", msgHTML);
+  msgerChat.scrollTop += 500;
+}
+
+
+
+
+// messenger code starts
+
+function appendMessage(name, img, side, text) {  
+  const msgHTML = `
+    <div class="msg ${side}-msg">
+      <div class="msg-img" style="background-image: url(${img})"></div>
+
+      <div class="msg-bubble">
+        <div class="msg-info">
+          <div class="msg-info-name">${name}</div>
+          <div class="msg-info-time">${formatDate(new Date())}</div>
+        </div>
+
+        <div class="msg-text">${text}</div>
+      </div>
+    </div>
+  `;
+
+  msgerChat.insertAdjacentHTML("beforeend", msgHTML);
+  msgerChat.scrollTop += 500;
+}
+
+
+// Utils
+function get(selector, root = document) {
+  return root.querySelector(selector);
+}
+
+function formatDate(date) {
+  const h = "0" + date.getHours();
+  const m = "0" + date.getMinutes();
+
+  return `${h.slice(-2)}:${m.slice(-2)}`;
+}
+
+function random(min, max) {
+  return Math.floor(Math.random() * (max - min) + min);
+}
+
+// messenger code ends 
+
+
+

public/script.js

@@ -6,10 +6,16 @@ const videoGrid = document.getElementById('video-grid');
 const myVideo = document.createElement('video');
 const photoFilter = document.getElementById('photo-filter');
 const msg_send_btn = document.getElementById('msg_send_btn');
+const wave_btn = document.getElementById('wave_btn');
+const end_btn = document.getElementById('leave-meeting')
 emojiPicker =document.getElementsByTagName("emoji-picker")[0];
 let filter = 'none';
 myVideo.muted = true;
+const peers = {}
+const state = "in-meet";
 
+// sounds 
+const wave_audio = new Audio('audio/wave.mp3');
 
 // messenger
 
@@ -58,8 +64,10 @@ navigator.mediaDevices
 
 
 //user connected    
-    socket.on('user-connected', (userId) => {
-      connectToNewUser(userId, stream);
+    socket.on('user-connected', (userId , state) => {
+
+     if(state == "in-meet") connectToNewUser(userId, stream);
+     else (console.log(userId+"connected without meet"));
     });
 
 
@@ -84,6 +92,7 @@ navigator.mediaDevices
   // send message 
   const sendMessage = (msg) => {
       socket.emit('message', msg);
+
   }
 
   //emoji picker 
@@ -104,12 +113,13 @@ navigator.mediaDevices
 
 peer.on('call', (call)=> {
   getUserMedia(
-    { video: true, audio: true }, (stream ) => {
+    { video: true, audio: true }, (stream) => {
       call.answer(stream); // Answer the call with an A/V stream.
       const video = document.createElement('video');
     video.setAttribute("id", call.peer+"video");
       call.on('stream', (remoteStream)=> {
         addVideoStream(video, remoteStream);
+        peers[call.peer]=call;
       });
     }, (err)=> {
       console.log('Failed to get local stream', err);
@@ -126,7 +136,7 @@ peer.on('open', (id) => {
 const nameInput = (id)=> {
   var userName = prompt('Please enter your name', 'Hargun');
   if (userName != null) {
-    socket.emit('join-room', ROOM_ID, id , userName);
+    socket.emit('join-room', ROOM_ID, id , userName , state);
     myId=id;
   }
 }
@@ -142,6 +152,7 @@ const connectToNewUser = (userId, streams) => {
     addVideoStream(video, userVideoStream);
   });
 
+  peers[userId] = call
 };
 
 const addVideoStream = (videoEl, stream) => {
@@ -167,24 +178,15 @@ const playStop = () => {
   let enabled = myVideoStream.getVideoTracks()[0].enabled;
   if (enabled) {
     myVideoStream.getVideoTracks()[0].enabled = false;
-    // socket.emit('video', myId , myVideoStream, false);
+
     setPlayVideo();
   } else {
     setStopVideo();
     myVideoStream.getVideoTracks()[0].enabled = true;
-    // socket.emit('video', myId, myVideoStream, true);
   }
 };
 
-// socket.on('video-toggle', (userId , myVideoStream ,state)=>{
-//   if(!state)
-//   myVideoStream.getVideoTracks()[0].enabled = false;
-//   // {document.getElementById(userId+"video").pause();
 
-//   if(state)
-//   myVideoStream.getVideoTracks()[0].enabled = true;
-//   // document.getElementById(userId+"video").play();
-// })
 
 const muteUnmute = () => {
   const enabled = myVideoStream.getAudioTracks()[0].enabled;
@@ -243,6 +245,23 @@ const stopScreenShare=()=>{
 
 }
 
+//hand-wave 
+wave_btn.addEventListener('click' , (e)=>{
+  var color = e.target.style.color;
+  if(color != "green")
+   {
+    e.target.style.color = "green";
+   }
+   else{
+    e.target.style.color = null;
+   }
+   socket.emit('waved' , myId);
+})
+
+socket.on('toggleWave' , (userId)=>{
+  wave_audio.play();
+  console.log(userId+ " waved");
+})
 //photo filters 
 photoFilter.addEventListener('change', (e)=> {
   // Set filter to chosen option
@@ -294,6 +313,13 @@ function random(min, max) {
 
 // messenger code ends 
 
+end_btn.addEventListener('click' , (e)=>{
+  window.location.href = '../'
+})
+
+//disconnected user
 socket.on("user-disconnected", (userId)=>{
   document.getElementById(userId+"video").remove();
-});
+  // if (peers[userId]) peers[userId].close()
+});
+