i open the connection in a parent component above all and when a message comes i set it via redux and use it in another component. It's all good till messages come together(like glued) as shown in photo. when messages are received together redux sets one of two received messages. how do i overpass this issue that redux could handle each of socket's messages.
await hubConnection.start()
.then(()=>{
hubConnection?.on("ReceiveOrderEvents", (messageStreamItem: any) => {
console.log(messageStreamItem,'messageStreamItem')
dispatch(orderUpdateSocket(messageStreamItem));
});
})
after couple of days figuring out what the origin of problem was, i came up with an idea this solution:
since socket might send multiple messages very fast and in a very short time, redux might not handle it very well. messages from socket could be stored in an array and via forEach you could dispatch every one of them inside a setTimeOut function to proceed with other things you are about to do.
await hubConnection.start()
.then(()=>{
hubConnection?.on("ReceiveOrderEvents", (messageStreamItem: any) => {
let msg=[];
msg.push(messageStreamItem);
setTimeOut(()=>{
msg.forEach((message:any)=>dispatch(setter(messageStreamItem)));
msg = []
},[50])
});
})
Related
I am attempting a simple example of two users connected with webrtc using a data channel. The problem I am having is after the offer step. The second client that joins my socket.io room, I have send an offer and sets its local description.
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer)
//send offer to signal server to forward to peer
socket.emit("webrtc_offer", {
roomId: roomId,
sdp: peerConnection.localDescription,
});
Then when I receive the offer I try this...
if (!offerSender) {
await peerConnection.setRemoteDescription(offer);
const answer = await peerConnection.createAnswer();
//This sets the signalingState to stable instead of have-local-pranswer
await peerConnection.setLocalDescription(answer);
console.log("sending answer to peer");
socket.emit("webrtc_answer", {
roomId: roomId,
sdp: peerConnection.localDescription,
});
}
Once I try to set the local description from the answer I create, my signalState is reset to Stable instead of have-local-pranswer. Could someone explain why that is? This then breaks the next step of trying to respond to the answer to finish the connection.
user story:
We need to alert the user when there a modification or a comment on the thing he has posted by another user.
We are new to react and we are lost in a loop about how to notify the user who is logged in on a different page (maybe his dashboard). The event is performed by another user2 where he is on a page where is commenting on the thing posted by user1.
How can we send an alert to that user1? who currently on a different page saying "there is a new comment on your post".
The issue we are thing about is: The event happens on the comment page. We can send the alert on that comment page. But how will we be able to send a notification to other users on a different page?
I know there is already present. You can take Jiira Board as an example.
Could anyone let us know how can we implement this?
One option is to use WebSockets. Whenever a user is on a page where you'd want them to be able to get a notification, open a websocket to your server:
const socket = new WebSocket('https://my-server.com/socket');
On your server, set up the socket endpoint. Whenever one user sends a message to another, on the server, for all sockets currently opened by the receiver, send a socket message informing them of the new message. Eg, on the server:
activeSockets
.filter(({ userId, socket }) => userId === receiverId)
.forEach(({ socket }) => {
socket.send('You have a new message');
});
And listen for those messages on the client:
socket.addEventListener('message', ({ data }) => {
if (data === 'You have a new message') {
alert(data);
}
});
This is, in broad terms, the industry standard for this sort of thing; it's what Stack Exchange does. It's how many websites allow the server to send data to the client without (inelegant) polling.
I'm making a bot which on a react to a certain will create a channel...
That all works perfectly expect I want a nessage to be posted when the cahnnel is created which has a specfic beginning.
client.on('channelCreate', (channel, message) => {
if(channel.name.startsWith('ticket-')){
message.channel.send('test');
});
I'm not getting any errors, just nothing...
You can't use the message variable in the channelCreate event. The only thing you're receiving is a channel object, so you need to use channel.send():
client.on('channelCreate', (channel, message) => {
if(channel.name.startsWith('ticket-')){
channel.send('test');
});
I have a react application that connects to a socket and gets a list of data (initial data) from one of the channel
the issue appears while I got the list again when reconnecting or when I change the route (refresh is of course not a problem)
and then I got the list again and need to update the state again with all the list (I am doing that with REDUX)
My question i how can I check or prevent from update the state again . is there any subject that supports that? or i should check if the whole list exists in the reducer?
is it also a good solution to set a state in redux that said "fetched:true" and then don't dispatch in that case
listen to the channel: (class that listen to socket server create an observable using rxjs)
socketService.server.on('list', (res: any) => {
console.dir(res);
subject$.next(res)
});
update the state in redux-thunk action:
.subscribe(vall).... {
disptach(list)....
});
socketService only connect to the socket and return a socket
If you only need the value from the socket initially you should not read from it after you receive it initially.
You can either unsubscribe and not listen for any more messages (after the first one) or you can only get process the first message with rxjs:
// you can check here a condition for res if you need to
// (that it is not empty for example)
.pipe(first(res => res))
or
.pipe(take(1))
This will ensure you only read and dispatch for the first message you receive from that connection.
During POST to register new user I check if that user already exists in mongoDB data base and if yes display this in react near the register form. I'm using express.js to create my API and axios to send requests from client side. This is how I check if user is registered.
const user = await Model.User.findOne({email: req.body.email});
if(user) return res.status(400).send('User already registered');
This is the function that is being called on Register button click:
handleSubmit= async (userData) =>{
await apis.registerNewUser(userData)
.then(res => console.log(res.body))
.catch(err => {
console.log(err);
this.setState({errorMessage: err.message});
})
}
The problem is that I can't display the custom error message that I add when sending response. Instead of getting "User already registered" I get "400 Bad request" showing near my register form. When I post through postman there is no problem, the response "User already registered" shows up in the response text window however that part doesnt exist when recieving error on react side. I can't send user an error that tells him nothing about the reason why he can't register. How can I get "User already registered" in react?
I have found the solution. In order to read the property of that custom text put inside send() when catching error I need to read from err.response.data - that's the right property to read "User already registered".I hope it helps someone one day.