Initial commit

app.js

 'use strict';
+//azure app key
+const APP_KEY="jwJMNoxZnb/35swfpI2oSt89CAN9P8W2723yZT7S2vKvvfF7dovajQ==";
+
 
 //Set up express
 const express = require('express');
 const app = express();
 
+
 //Setup socket.io
 const server = require('http').Server(app);
 const io = require('socket.io')(server);
+const got = require('got');
+const request = require('request');
+const moment = require('moment');
+
+
 
 //Setup static page handling
 app.set('view engine', 'ejs');
@@ -16,6 +25,7 @@ app.use('/static', express.static('public'));
 app.get('/', (req, res) => {
   res.render('client');
 });
+
 //Handle display interface on /display
 app.get('/display', (req, res) => {
   res.render('display');
@@ -29,21 +39,135 @@ function startServer() {
     });
 }
 
-//Chat message
-function handleChat(message) {
-    console.log('Handling chat: ' + message); 
-    io.emit('chat',message);
+let chatMembers = []; //list of players
+let membersToSockets = new Map(); //player number to socket
+let socketsToMembers = new Map(); 
+let chatIDs = [];
+
+
+
+function handleLogin(username,socket){
+    //let everyone know someone joined
+    const un = username.username;
+    if(chatMembers.includes(un)) return;
+    chatMembers.push(un);
+    membersToSockets.set(un,socket);
+    socketsToMembers.set(socket,un);
+    console.log(un);
+    //let them know login has been successful
+    socket.emit('loginSuccess',true);
+    //tell everyone a new player has joined
+    updateAll();
+    //get the chats they're in
+    request('http://localhost:7071/api/HttpGetChatsForUserID', {
+      json: true,
+      body: {
+        memberID: un
+      }
+    }, function (error, response, body){
+      chatIDs = body;
+      //upon receiving chatIDs, get most recent message of each one
+      getMostRecentMessages(chatIDs,socket);
+    });
+    
+    /*
+    //send them all the messages from the chat
+    sendAllChatMessages(socket);
+    */  
+}
+
+function getMostRecentMessages(chatIds,socket){
+  //go through each chat, get most recent message and pass this information to the client
+  for (const chatID of chatIDs){
+    request('http://localhost:7071/api/HttpGetLastChatMessage', {
+      json: true,
+      body: {
+        "ChatID": chatID
+      }
+    }, function (error, response, body){
+      console.log(body);
+      //upon receiving it, tell the client to store the chatID 
+      if(body != "error"){
+        body['ChatID'] = chatID
+        socket.emit('chatAndLastMsg',body);
+      }
+    });
+  }
+}
+
+function sendAllChatMessages(chatID,socket){
+  request('http://localhost:7071/api/HttpRetrieveAllChatMessages', {
+  json: true,
+  body: {
+    ChatID: chatID
+  }
+  }, function (error, response, body){
+    const new_dict = {ChatID: chatID, messages: body}
+    socket.emit('allChatMessages',new_dict);
+  });
+    
+}
+
+//when you receive a message, tell everyone the date and time it was sent
+function handleChatReceived(userAndMsgAndChatID){
+  //when server receives a message, send it to everyone
+  console.log(userAndMsgAndChatID.username + " " + userAndMsgAndChatID.message);
+  var now = new moment();
+  const date = now.format("YYYY-MM-DD");
+  const time = now.format("HH:mm:ss");
+  console.log(date + " " + time);
+  const userMsgDatetimeChat = {username: userAndMsgAndChatID.username, message: userAndMsgAndChatID.message,
+    ChatID: userAndMsgAndChatID.ChatID,date: date, time: time,};
+  io.emit('newMessage',userMsgDatetimeChat);
+  //then store message in database - 
+  (async () => {
+    const body = await got.post('http://localhost:7071/api/HttpStoreChatMessage', {
+      json: {
+        username: userAndMsgAndChatID.username,
+        message: userAndMsgAndChatID.message,
+        ChatID: userAndMsgAndChatID.ChatID,
+        date: date,
+        time: time
+      }
+    }).json();
+
+    console.log(body.msg);
+    if(body.msg == "OK"){
+      console.log('message stored');
+    } else {
+      console.log("error storing message");
+    }
+  })();
+}
+
+
+//tell everyone a new player has joined
+function updateAll(){
+  for(let [member,socket] of membersToSockets){
+    socket.emit('updateMembers',chatMembers);
+  }
 }
 
 //Handle new connection
 io.on('connection', socket => { 
   console.log('New connection');
 
-  //Handle on chat message received
-  socket.on('chat', message => {
-    handleChat(message);
+  socket.on('login',username => {
+      handleLogin(username,socket);
   });
 
+  socket.on('sendChat',userAndMsg => {
+    console.log('sendChat received');
+    handleChatReceived(userAndMsg);
+    
+  });
+
+  socket.on('requestChatMessages',ChatID =>{
+    //send messages from corresponding chatID
+    sendAllChatMessages(ChatID,socket);
+    console.log('requestChatMessages ' + ChatID);
+  })
+
   //Handle disconnection
   socket.on('disconnect', () => {
     console.log('Dropped connection');

package.json

@@ -16,6 +16,9 @@
   "dependencies": {
     "ejs": "^3.1.6",
     "express": "^4.17.1",
+    "got": "^11.8.3",
+    "moment": "^2.29.1",
+    "request": "^2.88.2",
     "socket.io": "^4.3.1"
   }
 }

public/game.js

@@ -6,22 +6,34 @@ var app = new Vue({
     data: {
         connected: false,
         messages: [],
-        chatmessage: '',
+        chatMessage: '',
+        chatMembers:[],
+        username: '',
+        password:'',
+        lastMessage:'',
+        chatIDsAndLstMsgs:[],
+        currentChatID:-1,
+        state:{state:0}
     },
     mounted: function() {
         connect(); 
     },
     methods: {
-        handleChat(message) {
-            if(this.messages.length + 1 > 10) {
-                this.messages.pop();
-            }
-            this.messages.unshift(message);
+        login(){
+            const username = { username: this.username};
+            socket.emit('login',username);
         },
-        chat() {
-            socket.emit('chat',this.chatmessage);
-            this.chatmessage = '';
+        sendMessage(){
+            const userMsgChatID = {username : this.username, message: this.chatMessage, ChatID: this.currentChatID};
+            socket.emit('sendChat',userMsgChatID);
+            this.chatMessage = '';
         },
+        retrieveChatMessages(ChatID){
+            socket.emit('requestChatMessages',ChatID);
+        },
+        back(){
+            app.state.state = 1;
+        }
     }
 });
 
@@ -35,6 +47,28 @@ function connect() {
         app.connected = true;
     });
 
+    socket.on('loginSuccess',function(){
+        app.state.state = 1;
+    });
+
+    socket.on('allChatMessages',function(ChatIDMessages){
+        app.currentChatID = ChatIDMessages.ChatID;
+        app.messages = ChatIDMessages.messages;
+        app.state.state = 2;
+    });
+    
+    socket.on('chatAndLastMsg',function(ChatIDMsg){
+        app.chatIDsAndLstMsgs.push(ChatIDMsg);
+    });
+
+    socket.on('newMessage',function(userAndMsg){
+        app.messages.push(userAndMsg);
+    });
+
+    socket.on('updateMembers', function(members){
+        app.chatMembers = members;
+    });
+
     //Handle connection error
     socket.on('connect_error', function(message) {
         alert('Unable to connect: ' + message);
@@ -46,10 +80,6 @@ function connect() {
         app.connected = false;
     });
 
-    //Handle incoming chat message
-    socket.on('chat', function(message) {
-        app.handleChat(message);
-    });
 
 
 }

views/chat.ejs

-<div>
-    <input type="text" @keyup.enter="chat()" v-model="chatmessage" class="form-control" placeholder="Chat">
-    <ul id="chat">
-        <li v-for="message in messages">{{message}}</li>
-    </ul>
-</div>

views/chatDisplay.ejs

+<button class="btn btn-primary" @click='back'>Back</button>
+<div v-for="message in messages">
+    <h6>{{message.username}}: {{message.time}} {{message.message}}</h6>
+</div>
+<div>
+    <input v-model="chatMessage" type="text" class="form-control" placeholder="Enter a message">
+    <button class="btn btn-primary" @click='sendMessage()'>Send</button>
+</div>

views/client.ejs

@@ -3,11 +3,19 @@
 
     <%- include('header'); -%>
 
-    <h2 class="title">ECS Example Game</h2>
+    <h2 class="title">Chat</h2>
 
     <div id="game">
         <div v-if="connected">
-            <%- include('chat'); -%>
+            <div v-if="state.state == 0">
+                <%- include('login'); -%>
+            </div>
+            <div v-else-if="state.state == 1">
+                <%- include('showChats'); -%>
+            </div>
+            <div v-else-if="state.state == 2">
+                <%- include('chatDisplay'); -%>
+            </div>
         </div>
         <div v-else>
             <p>Connecting...</p>

views/login.ejs

+<input v-model="username" type="text" id="username" class="form-control" placeholder="username">
+<button class="btn btn-primary" @click='login'>Login</button>

views/showChats.ejs

+<div v-for="chatIDMsg in chatIDsAndLstMsgs">
+    <button class="btn btn-primary" @click='retrieveChatMessages(chatIDMsg.ChatID)'>{{chatIDMsg.ChatID}}</button>
+</div>
\ No newline at end of file