0
votes

I am trying to delete a message from live chat using socket.io. I can send message and it is real time and I am able to view any new message I add on another tab but I also want to be able to remove a message. I am updating the status of the message in database using socket and it is working fine but I am not able to remove the message from front-end in real time. I have filtered out and set all the other messages except the one I removed in my chat state and it removes the message in the tab I performed the action but it is not updating real time in the other tab. I have to refresh it for the message to be removed. Can someone lease tell me how could I do it real time??

Frontend Code

const ENDPOINT = "http://localhost:8000";
const socket = io.connect(ENDPOINT);
 useEffect(()=>{
         getDataFromSocket();
            
    },[])
                
                const deleteFnc = (v) => {
                    setDeleteMsg(!deleteMsg)
                   
                    socket.emit("delete", {message_type:"1", message_model:{message:v?.text_model?.message, user_id:user,uniqueID:v.text_model.uniqueID, stream_key:props.data.streamkey, user_image:loginUserImage, user_name:loginUserName},url:loginUserName,app_type:"2",platform:'1'});
            
                    
                    socket.on("deleted_message",(data)=>{
                    
                        let him = chat.filter(function(obj){
                            return obj.text_model.uniqueID !== data.message_model.uniqueID
                        })
                       
                        setChat(him);
                        
                     })
                }
            const getDataFromSocket = () => {
                    socket.on("message",(data)=>{
                        
                        if(data){
                            var newdata=data
                            newdata.text_model = newdata.message_model
                            delete newdata.message_model
                            setChat(prev=>[...prev,newdata])
                        }
                      })
                }
    
        return(
           chat.map((v, index) => {
                                               
             if (v.message_type == 1) {
                                                    
                  return (
                       <div className={StreamPlayerCss.chat34} key={index}>
                       <div  className={StreamPlayerCss.chat3467}>
                         {v?.text_model?.user_image ?
                           <img src={v?.text_model?.user_image} alt="img" onError={(e) => {e.target.onerror = null e.target.src ="https://d25u15mvjkult8.cloudfront.net/Website/Assets/Images/users.png"}}></img> :
                            <img src="https://d25u15mvjkult8.cloudfront.net/Website/Assets/Images/users.png" alt="img"></img>
                         }
                       <h4>{v?.text_model?.user_name}</h4>
                         {v?.text_model?.del_status == 1 ? 
                          <h6>Your Message Was Deleted</h6> :
                        <>
                         <h6>{v?.text_model?.message}</h6>
                           <button onClick={()=>deleteFnc(v)}>del</button>
                        </>  } 
                                                             
                       </div>
                     </div>
                 )
             }
         }
)

Backend Code

const express=require('express');
const app=express();
const se=app.listen(8000,()=>{
    console.log("working on 8000")
})
 const dotenv = require('dotenv');
 if (process.env.NODE_ENV == 'live') {
     dotenv.config();
 } else if(process.env.NODE_ENV == 'test'){
     const testdotnv = require ('custom-env').env('test');
     testdotnv.config();
 }
 const pool = require('./database');
 var io =require('socket.io')(se)


 // set up socket connection
 io.sockets.on('connection', function (socket) {
     var clientIp = socket.request.headers['x-forwarded-for'] || socket.request.connection.remoteAddress;
     console.log("ip is ",clientIp);
     socket.on('send', function (data) {
         if(data.platform){
             var platform = data.platform;
         }else{
             var platform = 0;
         }
 
         if(data.event == 0){
             pool.query('INSERT INTO live_chat SET user_id = ? , name = ? , image = ? , stream_key = ? , message = ?,del_status=0 ,userId = ?,ip_address = ?,platform = ?' ,[data.user_id,data.username,data.image,data.skey,data.message,data.url,clientIp,platform]);
         }
         else if(data.event > 0) {
             pool.query('INSERT INTO live_chat SET user_id = ? , name = ? , image = ? , stream_key = ? , message = ?,del_status=0 ,userId = ? ,event_id = ? ,cheered_user_id = ? ,cheered_user_name = ?,ip_address=?' ,[data.user_id,data.username,data.image,data.skey,data.message,data.url,data.event,data.cheered_id,data.cheered_name,clientIp]);
             pool.query('INSERT INTO cheered_chat_user SET user_id = ? , event_id = ? ,cheered_user_id = ? ,cheered_user_name = ?',[data.user_id,data.event,data.cheered_id,data.cheered_name]);
         }
         io.sockets.emit('message', data);
         io.sockets.emit('newMessageListener', data);
     });
 
     socket.on('send_message', function (data) {
     
     socket.on('delete', function (data) {
      
        pool.query("UPDATE `live_chat` SET del_status=1 WHERE user_id = ? and unique_id=?",[data.message_model.user_id, data.message_model.uniqueID])
        io.sockets.emit("deleted_message",data);
     })
     });