I've made real time chat app in React.js using Socket.io as milion of them in web. So now user A and user B can talk if they have open chat. I would like to add a new feature - when user A has open chat and user B has closed chat. When user A will send the message to user B he will get a popup/notification that he has new message and when he'll click on the notification he will open the chat and see the message.
I didn't found any solution here. Do U guys know how to solve this problem ? Is there any function in Socket.io to handle this ?
This is a very open question. By the way I'll try to explain the main concepts of a possible solution.
First of all, you need to consider that if you want real-time notification for "background-message" client B will need to keep connection open with socket (otherwise you'll need a sort of polling logic). Since B is connected to socket you can consider to work with Socket.io namespace in order to send this notification in another "room".
Another solution can be made by using Push Notification API provided by Firebase, AWS, etc.
Related
I'm working on a chatbot project where we open a websocket connection to communicate the chat messages.
Sometimes we get duplicate messages back and forth. I suspect that a second client is booted. I want to modify the boot() function so that it checks for existing websocket connections (and either cancel booting or close all other connections first).
Is there a way to get this from a vanilla javascript perspective? or do I maybe need to do something from the backend?
I tried to figure it out by looking at the code but without even a line number on which the error appears, it's pretty hard, anyways.
I suppose this is the problem here:
conn.send('USER_CONNECTED:' + conn.id); // send the connect message to ONE user
conn.broadcast('USER_DISCONNECTED:' + conn.id); // send the disconnect to ALL users
So it seems that you're simply missing a broadcast call when a user connects.
So I have developed a web app as a hobby on Handlebars, Express and Mongoose/MongoDB.
The app let's users create an account and then post advertisements for other users to see and respond to.
All the ads posted by users show up on the index page. So it is common view for all the users on this web app. I am relatively new to web development so to build such a simple app it took me a while but boy I learned a lot!
Now the issue I am facing is, when a user A posts an Ad while the user B is logged in and is currently on the index page (a page that lists all the ads posted) it won't show up for user B unless user B refreshes the page. Rightly so actually because only when the index page's route is hit it will query all the ads and refreshing is basically hitting the index route I get that. But I don't want it that way. I want it to show the new ad on user B's index and pretty much every user's index if there's new ad by any user.
So I did a little research/reading and I learned that I can do it by learning to work with triggers on mongodb and like create some kind of trigger that when a new ad is posted do something. I like the idea but failed to find resources to learn how to use such a thing.
The other option I was suggested was to use socket.io but that too I can't grasp how can I make an entire Ad document work as a socket. I am lost and implementing this feature of dynamically loading ads for all users will complete this hobby project of mine and will help me find a junior dev job in local community.
I request stackoverflow's community to guide me how do I go about doing this and what resources I can use to learn about it.
The socket.io seems to be the best solution for your case. What you will want to do with socket.io is every time a user posts an Ad you use socket.io to notify the rest of the users that there is an update.
If you don't want to send the entire document using the socket you can use the socket to notify the clients and on the client side every time you receive such a notice from the server you will either
a) Refresh the page(not suggested as it will make the user experience unpleasant) which is easier to implement
OR
b) You can use an Ajax request to get the new data from your server and update the fields on the fly(which makes for a better user experience).
Best Way You can come with using Short Polling concept from client side to ask for new data after 1 or 2 seconds (whatsoever count to need ) . Gmail for new inbox mails also uses sync method in a particular fashion . Just ask from server for new data
OR Second option to go through below
On Server Side
Serve index.html page to User A (which is logged in now).Some User B inserts data
Maintain a function or a cron job (checks the count of Total Ads ) Lets say after every 1 minute or so
If there is change in count from the previous total_count , update it and get new mlab documents and send it to function , Let's say push_new_ads which will be sync via socket.io to client
On Client Side
Sync your client_total_count with server_local_count push_new_ads using socket.io and If there is change in count , make a simple fetch api call to get data and appends it to previously fetched array
There is no such way to directly listen the changes in mongodb But you can trigger some changes from oplog using tailable cursors
I am building a messaging app that updates in realtime. So far I can log in with google and post a message and then that message displays on screen. however, if I log in via another google account (the app is hosted on heroku) and post a message as userB then userA won't see this message on their screen until they refresh the page. what is the best way to update all screens in real time so people can actually have a conversation in real time.
every message is posted and stored in the firebase. my only solution so far requires using the javascript setInterval method and pulling from the database every 3-5 seconds. this worked however it caused the app to become very slow and laggy and a poor experience. any pointers/tips are welcomed
You are using the Firebase and its one of the main feature is the real-time database. Firebase will automatically let you know if there is any change in your JSON database. You no need to send the request in interval basic.
You can refer Zero to App: Develop with Firebase - Google I/O 2016 It is also a messaging app demo by the Google Guys.
You can find the sample source code in Github to send and receive the message in real-time.
There are a lot of ways to do this. Generally, you will want to be notified by the server once a new message has come in and not have to ping the server every X seconds.
You could look at these:
socket.io and learn about websockets in general
A nice list of existing chat apps that utilize react
Google's cloud messaging, as you already use firebase, this might be the way to go for you here.
This should lead you in the right direction.
Im making a simple chat app that sends messages through a redis pub/sub channel. I do not use any login options just lets the user select a username and chat. I am trying to implement private chat where one client is able to communicate to another connect client. I am new to chat client programming, I am trying to figure out how to communicate with only one client. What are some options I could consider to get the ability to chat 1 on 1? I don't mind changing my architecture to incorporate a new tool. Any suggestions is appreciated
I did something similar with raw sockets. I held user objects which contained the connected socket, the name, and whether they are chatting. If a user is not in chat he can type a command /list users which gives the list of users currently connected. When he has found someone to chat with he enters the command /chat bob. If the user bob is already chatting he will receive a message from the server saying that bob is in a chat already. Otherwise a chat session will be established between the two users. They now will be in chat until one of them enters /endchat. Then they will be able to find new people to chat with.
The trick is implementing the server so it can track a list of users and their chatting status and who they are in chat with so when ever they type /endchat the other user can be notified.
The combination of Nodejs + Socket.io would solve your problem i suppose. Specifically rooms functionality is what you are looking for here.
Lets say you have two users bob and gob. Considering both are online (although you can add Redis as a session store and for storing history later, which i did in my case). Say bob wants to chat with gob he selects gob. Now make bob join a room using
var roomname = 'bob'>'gob'?'bob'+'gob':'gob'+'bob' ;
//this type of naming ensures roomname is same for both users
socket.join(roomname);
This will work only if both have chosen each other. So now when gob selects bob both are joined in the same room. Whenever someone sends a message make them emit to that room using
socket.broadcast.to(roomname).emit('message_event',msgObj);
Make sure you have have added the listener
socket.on('message_event',messageHandler);
When chat is finished make them leave the room using
socket.leave(roomname);
Can someone illustrate how I can get typing status of the other party with JavaScript?
UPDATE
Can someone recommend a one-to-one open source chatting application, preferably written in PHP? I only found open source chatting rooms which are for chatting among all onliners, but I just need a one-to-one chatting.
Here are a list of PHP-based open-source instant messaging software.
Some of those might be relevant for you.
For example, if you had an text area #chat then you could use this code to attach the event:
document.getElementById('chat').addEventListener('keydown', FUNCTION HERE, false);
See http streaming and some ready solutions here: http://ajaxpatterns.org/HTTP_Streaming
this is how google talk does it. And there are ready php or c++ solutions
It was quie a discovery for me!
This is an update to reflect the significant change in the OP's question:
Google Chat and Facebook both use XMPP(jabber) servers, as do most companies I know of that have internal instant messaging.
The nice part about XMPP is that you get all of the "is typing" and other presence-based information without having to roll-your-own in javascript (bear in mind, you will still need to use javascript to pass XMPP requests back to the server, but XMPP has most of the features you'd need already built in).
Check out OpenFire. It's a great XMPP server, totally open source, and they have a web-based version of their Spark client that is pretty nice.
Or you could get a PHP library for XMPP (there are a few). But you'd still need to have the XMPP server running in the background for PHP to work with.
Here's a list of XMPP libraries for PHP from XMPP.org:
Eiffel
JAXL
Lightr
Missus
xmpphp
Or, if you want to keep things mostly browser-side, they also have a list of libraries for javascript:
dojox.xmpp
js.io
JSJaC
strophe.js
xmpp4gwt
xmpp4js
I made a small chat application a while ago, and the only way to do it is to frequently check for new entries in the chat database and fetch anything newer than the last displayed message. At the same time as all that, you can check to see if the user's input is empty. If it is, do nothing. If it isn't, enter a status code into the database beside that user's name. If anyone has that status in the database when you're fetching information about new messages and who is online, you should display the 'user is typing' message. I hope that makes sense...let me know if it isn't.
For User1: If you save the chat message on each key-press to the database, with a status: sent=false and update the last updated date.
For User2: you could pole periodically for the presence of a message where sent=false and use the last updated to update user is typing message. if the lastupdated date is more than a say ten seconds you could remove the message as that person may have stopped typing. This will allow User2 to see User1 typing, stopping and continueing again.
Ideally polling for this information will be part of an existing call to the database to reduce additional overhead.