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);
})
});