Websocket plumbing added for DM's

main.ts

@@ -64,6 +64,7 @@ app.post("/channel/join", isLoggedIn, async (req, res) => {
   };
 
   var channelMessages = await MongooseDal.getMessagesForChannel(req.body.channel);
+
 
   await MongooseDal.createChannel(channelMongo);
 
@@ -73,7 +74,7 @@ app.post("/channel/join", isLoggedIn, async (req, res) => {
       socket.socket.emit("channel:joined", {
         channel: req.body.channel,
         users: users,
-        messages: channelMessages.messages
+        messages: channelMessages?.messages || [],
       });
     });
     res.send({ users: users, channel: req.body.channel });

middleware/auth.ts

@@ -55,7 +55,6 @@ const getUser = async (req, res) => {
     if (!token) res.status(401).json({ error: "malformed auth header" });
 
     const payload = await jwt.verify(token, SECRET_KEY);
-    logger.log.magenta("Payload", payload);
     return payload;
 };
 

public/index.html

@@ -21,8 +21,8 @@ <h2 class="text-xl mb-4">Join a channel</h2>
                 <input type="text" id="channel" class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-4" placeholder="Channel name" />
                 <input type="text" id="channel-key" class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-4" placeholder="Key (Optional)" />
                 <div class="flex items addEventListener-center mt-4">
-                    <input type="checkbox" id="isDM" class="mr-2" />
-                    <label for="isDM">Direct Message</label>
+                    <input type="checkbox" id="isDm" class="mr-2" />
+                    <label for="isDm">Direct Message</label>
                 </div>
                 <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg mt-4" id="join_channel">Join</button>
             </div>

public/main.js

@@ -15,35 +15,44 @@ var currentNick = '';
 var channels = [];
 var dmUsers = [{user: 'ChanServe', messages: []}];
 
-$(document).ready(function () {
-    $("#message").keypress(function (e) {
-        if (e.which == 13) {
-            var message = $('#message').val();
-            $('#message').val('');
-            addMessage({
-                user: currentNick,
-                message: message
-            });
-            // Socket sent
-            socket.emit('client:message', {
-                message: message,
-                channel: selectedChannel
-            });     
-          return false;  
-        }
-      });
-    $('#message_send').click(function () {
-        var message = $('#message').val();
-        $('#message').val('');
-        // Socket sent
-        socket.emit('client:message', {
-            message: message,
-            channel: selectedChannel
-        });     
+function sendMessage() {
+    var message = $('#message').val();
+
+    if(channels.find(channel => channel.name == selectedChannel) == undefined){
+        const receiver = selectedChannel;
+        const message = $('#message').val();
+        addMessage({
+            user: currentNick,
+            message: message
+        });
+
+        socket.emit('client:direct', {
+            from: currentNick,
+            to: receiver,
+            message: message
+        });
+    } else {
         addMessage({
             user: currentNick,
             message: message
         });
+        socket.emit('client:message', {
+            message: message,
+            channel: selectedChannel
+        });     
+    }
+
+    $('#messages').animate({ scrollTop: $('#messages').prop("scrollHeight")}, 10);
+    $('#message').val('');
+    return false;  
+}
+
+$(document).ready(function () {
+    $("#message").keypress(function (e) {
+        if (e.which == 13) sendMessage();
+      });
+    $('#message_send').click(function () {
+        sendMessage();
     });
 
     $('#connect').click(()=>{
@@ -91,11 +100,13 @@ $(document).ready(function () {
     $('#join_channel').click(()=>{
         const channel = $('#channel').val();
         const key = $('#channel-key').val();
-        const isDm = $('#isDm').val();
+        const isDm = $('#isDm').is(':checked')
 
         $('#channel').val('');
         $('#channel-key').val('');
+
         joinChannel(channel, key, isDm);
+        toggleOpenChannel();
     });
 });
 
@@ -254,7 +265,11 @@ function cleanChannelCss(channel){
 };
 
 function joinChannel(channel, key, isDm) {
-    console.log(isDm);
+    if(isDm){
+        openDirectMessage(channel);
+        return;
+    }
+
     axios.post('http://127.0.0.1:3000/channel/join', {
         channel: channel,
         key: key

services/socket.ts

@@ -32,6 +32,7 @@ export class SocketService {
         socket: socket,
         user: "",
       });
+      // Channel Message
       socket.on("client:message", async (message) => {
         var channel = "Global";
         if (message.channel) channel = message.channel;
@@ -48,6 +49,20 @@ export class SocketService {
 
         await MongooseDal.addMessage(message.channel, messageStore);
       });
+
+      // Direct Message
+      socket.on("client:direct", async (message) => {
+        const directMessage: IDirectMessage = {
+          sender: message.from,
+          owner: message.to,
+          message: message.message,
+          created_at: new Date(),
+        };
+
+        await MongooseDal.addDirectMessage(directMessage);
+        this.ircClient.say(message.to, message.message);
+      });
+
     });
     return this.io;
   }