I have a web application using NodeJS, Express, and MongoDB. In my application, I have a view, that can be seen by anyone who accesses the application. That view is rendered with a different image, depending on which a user selects to view (they do not need to be logged in) ie the view is mapView/mapId.
Now, I want something similar to notifications to occur in realtime for those that are on that page. When a specific event happens from an external source, I want to display a popup on the view to which the event belongs to. So the event may only belong to one mapView/mapId and not another mapView with a different ID. All users on the same mapView/mapId should see the notification. Remember, these are general users that do not need to be logged in.
I am researching into Socket.io because I know it is for making realtime applications. But I am wondering if this is even the right way to go. How will I send data to the correct mapView/mapId?
Check out what your server can do with rooms
The idea is that each of your connections, from a particular view, is joined to a room. Then you use socket.io from the server to send a message only to that room. And only those sockets will get the message.
Related
We have an Openfire XMPP/Jabber server setup (with a NodeJs backend and React frontend).
Chat is a feature embedded in the app (NOT an overlay or window that is always visible). So the user has to navigate to a specific page to access the chat interface.
It is working via websockets and messaging sending is working fine. We have a React frontend.
The challenge is that XEP-0333 Chat Markers is not supported by Openfire (the spec never become production ready).
Therefore we need to know how can we implement this feature so that :
A users knows when they are online that they have an unread message (and later, how many unread message they have). For example, if they are not in the chat window and messages are arriving, we need to indicate that in the header of the app so they see it)
if a user goes offline, and comes back online but NOT into the chat window, how can we know if they have unread messages and notify them of that?
My understanding is that somehow we have to keep track of unread messages (eg perhaps in indexedb or local storage or even in postgres backend) and after the user reads a message, we delete it from storage. If the storage still has records for that user then clearly those are the unread messages.
Obviously we don't know if they actually READ the message, but we can assume that if the chat window is open and visible (ie. active tab in their browser) that any messages delivered have been read.
So if our application tab is active, but user is not in chat, and a message arrives, we store it. When they open chat and click on the sender, we remove it from storage.
Has anyone solved it this way? (looking for links to React or JS/TS code)
Is there a better way? (links to other solutions would be helpful, esp. code)
I am trying to build a web app where users can receive notifications if their posts get likes. This functionality is actually working but the notification component renders only when the page reloads. But I want it to re-render the notification component as soon as there is a change that occurs with it. I am trying to make this work with SocketIO both in client and server but it feels like there should be a way easier way to solve this issue. How?
One way to achieve this is to use server-sent events (SSE), which can be seen as a uni-directional
and simplified version of WebSocket (only server can send data to clients). You might need route param or query string so that users can connect to different channels.
If it doesn't have to be so real-time (i.e. receiving notifications 1 minute after somebody liked the post is okay), you could also try (long)polling.
However, since post-like table may contain a huge amount of data, constantly querying it is expected to result in bad performance on the server. Also, adding an extra column to mark if the user has been notified about a specific like is trivial.
A possible workaround might be to create a new table, say pending-like-notification, which is used to stored all pending like notifications. Whenever a post is liked, we insert a new record into this table.
Therefore, when a user tries to query if any of his posts is liked recently, in the backend we lookup this table instead of the post-like table, and delete the selected rows after the user has been notified so that the amount of data in this table can stay low (hopefully).
All in all, in this scenario, I think SSE and WebSocket will be better choices.
I am making a web app that involves the creation of several rooms (users create them). These rooms are then stored on an array on the server. Using react router each of these rooms are given their own unique url /roomCodeGoesHere. I want to periodically check the rooms to see if anyone is in it(I guess in this case has the browser open?) and if there is no one in it, to have the room be deleted from the array.
Is there any way I can go about doing this? (the only ways I can think of seem hacky and are probably not good practice)
You can monitor the user count within your server array (via put request or websocket on mount/unmount), and if the room empties conditionally delete it within the controller. A room should by default start with 1 occupancy since it needs a creator. If you don't want to delete the room right away, then do the same thing but create a setTimeout that conditionally clears itself unless someone new enters.
This chat app I made deletes a room at 0 users using the above method:
http://astral-chat-app.herokuapp.com/
I'm doing chat app and I want to do it real time. Chat will be for now between two users. When user access to chat it finds all messages between them and displays messages. I think I need to create room with two users and then store room id in database. But I'm new to socket.io and I need advice how to do it.
Try to take some already pretty wide used chat, like Slack, as example. Usually you need pretty same set of things, workplaces, channels, private messages (like room but for two users only), and have users sending text messages with some formatting or images or just any files. Just take it easy, plan and make it step by step.
Also take note, that for both parties have their chat view updated with new messages you need not only save message one user send to db, but also broadcast that message to everyone, involved in conversation.
I want to develop a mobile app where a registered user can search among other registred users. User A can chat with user B. User A can view user B's profile. Upon this, user B have to be informed that user A is watching him.
So its some kind of chatroom where the server should be able to be notified when a user watched/contact another user, and let the latter know about this.
My first idea was to use node.js. But I begun to read a lot on XMPP-protocol. Do you think an XMPP-server would be more adequate to this kind of app? What I udnerstand you can customize your xmpp-server, write plugins so it can behave the way you want. Is this correct?
This is a perfect use case for socket IO using NodeJS. In fact, I have implemented exactly what you are describing with an iOS client and node backend in less than 50 lines of code. See https://github.com/MegaBits/SIOSocket for the iOS library, and http://socket.io/ for SocketIO.
XMPP is much heavier and verbose, and you'll be spending a lot of time parsing/building XML when you could just be communicating in JSON all the way. Take a look at my repo here:
https://github.com/alhill10/chatapp3/blob/master/View%20Control%20App/ChatView.m#L34
You can see on the viewDidLoad method it simply opens a websocket connection and listens for events from the server, then updates the tableview being used as a chat window with any new incoming messages in real time.
Then, look here https://github.com/alhill10/simplechat/blob/master/app.js for a simple example of the Socket IO backend that receives and relays the messages, as well as maintaining the state of current users online. You could trivially add in user authentication and .