**************LIVE CHAT****************

 FOR THE LIVE CHAT, WE WILL BE USING SOCKETS. TO DISPLAY THE CHAT BOX, IN THE PREVIOUS BLOG WE DISCUSSED ABOUT ICONS. IN THE ICONS SECTION ,WE CREATED A FORUM ICON WITH A BADGE, THE BADGE REPRSENTS THE NO.OF MESSAGES.




 <Badge
                color="secondary"
                onClick={() => setShowChat(!showChat)}
                badgeContent={newMessages}
                max={999}
                sx={{
                  "&:hover": {
                    opacity: "0.5",
                    cursor: "pointer",
                  },
                }}
              >
                {" "}
                {showChat ? (
                  <ForumOutlinedIcon style={{ color: "white" }} />
                ) : (
                  <ForumIcon style={{ color: "white" }} />
                )}
              </Badge>




VIDEOCONFERENCE.JSX

  const [newMessages, setNewMessages] = useState([]);
  const [message, setMessage] = useState("");
  const [messages, setMessages] = useState([]);
  const bottomRef = useRef();
  const [showChat, setShowChat] = useState();

THE BOTTOM REF IS USED INORDER TO SCROLL DOWN TO THE BOTTOM WHEN A NEW CHAT APPEARS.

 useEffect(() => {
    bottomRef.current?.scrollIntoView();
  }, [messages]);

IN CONNECTTOSERVER() FUNCTION

    socketRef.current.on("signal", gotMessageFromServer);
    socketRef.current.on("chat-message", addMessage);


  let addMessage = (data, sender, socketIdSender) => {
    setMessages((prevMsg) => [...prevMsg, { sender: sender, data: data }]);
    if (socketIdSender !== socketIdRef.current) {
      setNewMessages((prevMsg) => prevMsg + 1);
    }
  };
  let sendMessage = () => {
    socketRef.current.emit("chat-message", message, username);

    setMessage("");
  };



ON THE BACKEND:

SOCKETCONTROLLER.JS

io.to(room).emit("user-joined", {
        id: socket.id,
        clients: clientDetails,
      });
      if (messages[room]) {
        messages[room].forEach((msg) => {
          io.to(socket.id).emit(
            "chat-message",
            msg["data"],
            msg["sender"],
            msg["socketID-sender"]
          );
        });
      }
      if (username) {
        const meeting = await Meeting.findOne({ meeting_code: room });
        if (
          meeting &&
          !meeting.participants.some((p) => p.username === username)
        ) {
          meeting.participants.push({
            username,
            role: userRoles[socket.id],
          });
          await meeting.save();
        }
      }
    });
    socket.on("signal", (toId, message) => {
      // console.log(socket.id);
      // console.log(message);
      io.to(toId).emit("signal", socket.id, message);
    });
    socket.on("chat-message", (data, sender) => {
      const [matchingRoom, found] = Object.entries(connections).reduce(
        ([room, isFound], [roomKey, roomVal]) => {
          if (!isFound && roomVal.includes(socket.id)) {
            return [roomKey, true];
          }
        },
        ["", false]
      );

      if (found) {
        if (messages[matchingRoom] === undefined) {
          messages[matchingRoom] = [];
        }
        messages[matchingRoom].push({
          sender: sender,
          data: data,
          "socketID-sender": socket.id,
        });
        connections[matchingRoom].forEach((element) => {
          io.to(element).emit("chat-message", data, sender, socket.id);
        });
      }
    });


HERE, WE MADE THE STRUCTURE IN SUCH A WAY THAT, THE SENDER MESSAGES ARE DISPLAYED ON THE RIGHT SIDE AND RECEIVED CHAT ON THE LEFT SIDE OF THE CHAT WINDOW.


<div className={styles.showChats}>
                  {messages.length > 0 ? (
                    messages.map((msg, index) => {
                      return (
                        <>
                          {msg.sender === username ? (
                            <div key={index} className={styles.sentChat}>
                              <p style={{ fontWeight: "bolder" }}>YOU</p>
                              <p>{msg.data}</p>
                            </div>
                          ) : (
                            <div key={index} className={styles.receivedChat}>
                              <p style={{ fontWeight: "bolder" }}>
                                {msg.sender.toUpperCase()}
                              </p>
                              <p>{msg.data}</p>
                            </div>
                          )}
                          <div ref={bottomRef}></div>
                        </>
                      );
                    })
                  ) : (
                    <>
                      <p>No messages yet!</p>
                    </>
                  )}
                </div>






Comments

Post a Comment

Popular posts from this blog

MIDDLEWARE.JS

  const User = require ( "../models/userModel" ); require ( "dotenv" ). config (); const jwt = require ( "jsonwebtoken" ); module . exports . userVerification = async ( req , res ) => {   console . log ( req . cookies );   const token = req . cookies . token ;   if ( ! token ) {     return res . status ( 404 ). json ({ message : "authentication failed!" });   }   jwt . verify ( token , process . env . TOKEN_KEY , async ( err , data ) => {     if ( err ) {       return res . status ( 400 ). json ({ message : "Invalid Token!" });     }     try {       console . log ( data );       const foundUser = await User . findById ( data . id );       if ( foundUser ) {         return res . status ( 200 ). json ({ message : "authentication successful!" });       } else {         r...
Read more

MODELS

 USER MODEL const mongoose = require ( "mongoose" ); const Schema = mongoose . Schema ; const Model = mongoose . model ; const bcrypt = require ( "bcryptjs" ); const userSchema = new Schema ({   name : {     type : String ,     required : true ,   },   username : {     type : String ,     required : true ,     unique : true ,   },   email : {     type : String ,     required : true ,     unique : true ,   },   password : {     type : String ,     required : true ,   }, }); userSchema . pre ( "save" , async function ( next ) {   if ( this . isModified ( "password" )) {     this . password = await bcrypt . hash ( this . password , 10 );   }   next (); }); const User = new Model ( "User" , userSchema ); module . exports = User ; MEETING MODEL const mongoose = require ( "mongoose...
Read more

AUTHENTICATION PAGE

 AUTH.JSX import React , { useState , useEffect } from "react" ; import axios from "axios" ; import Box from "@mui/material/Box" ; import IconButton from "@mui/material/IconButton" ; import Button from "@mui/material/Button" ; import ButtonGroup from "@mui/material/ButtonGroup" ; import InputAdornment from "@mui/material/InputAdornment" ; import TextField from "@mui/material/TextField" ; import Visibility from "@mui/icons-material/Visibility" ; import VisibilityOff from "@mui/icons-material/VisibilityOff" ; import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined" ; import { useSnackbar } from "notistack" ; import Footer from "./Footer" ; import styles from "../styles/Auth.module.css" ; import { useNavigate } from "react-router-dom" ; import { Link } from "react-router-dom" ;...
Read more