I create Chat web with the help of socket.io ,nodejs ,react . when i send message there is some message or warnnig is commes in console message :-[Violation] 'message' handler took ms and also when i send message again and again the ms is increase by 200% , In starting of chat there is no warnning.
[Violation] 'message' handler took 167ms
2.05537ff6.chunk.js:2 [Violation] 'message' handler took 205ms
2.05537ff6.chunk.js:2 [Violation] 'message' handler took 389ms
2.05537ff6.chunk.js:2 [Violation] 'message' handler took 496ms
2.05537ff6.chunk.js:2 [Violation] 'message' handler took 1162ms
import React, { useState, useEffect } from 'react';
import queryString from 'query-string';
import io from 'socket.io-client';
import './Chat.css'
import InfoBar from './../InfoBar/InfoBar'
import Input from './../Input/Input'
import Messages from './../Messages/Messages'
let socket;
const Chat = ({ location }) => {
const [name, setName] = useState('');
const [room, setRoom] = useState('');
const [message,setMessage]=useState('')
const [messages,setMessages]=useState([])
const ENDPOINT = 'https://d-chating.herokuapp.com/';
useEffect(() => {
const { name, room } = queryString.parse(location.search)
var connectionOptions = {
"force new connection": true,
"reconnectionAttempts": "Infinity",
"transports": ["websocket"]
};
socket = io.connect(ENDPOINT, connectionOptions);
setName(name);
setRoom(room);
socket.emit('join', { name, room },(error)=>{
if(error){
alert(error);
}
});
},
[ENDPOINT, location.search]
)
useEffect(()=>{
socket.on('message',(message)=>{
// console.log(message)
setMessages([...messages,message]);
})
},[messages]);
const sendMessage =(event)=>{
event.preventDefault();
if(message){
socket.emit('sendMessage',message,()=>setMessage(''));
}
}
// console.log(messages)
return (
<div className="outerContainer">
<div className='container'>
<InfoBar room={room} />
<Messages messages={messages} name={name} />
<Input message={message} sendMessage={sendMessage} setMessage={setMessage}/>
</div>
</div>
)
}
export default Chat;