Tracking online status? - javascript

I am quite new to web development and am working on this social networking site.
Now I want to add functionality to show if a person is online.
Now one of the ways I figure out doing this is by keeping online status bit in the database.
My question is how to do it dynamically. Say the page is loaded and a user (say connection) comes online. How do I dynamically change status of that connection on that page.
I wanted to know if there are any tools(libraries) available for this type of tracking. My site is in python using django framework. I think something can be done using javascript/ jquery . I want to know if I am going in the right direction or is there anything else I should look into?

Create a new model with a last_activity DateTimeField and a OneToOneField to User. Alternatively, if you are subclassing User, using a custom User in django 1.5, or using a user profile, just add the field to that model.
Write a custom middleware that automatically updates the last_activity field for each user on every request.
Write an is_online method in one of your models that uses a timedelta to determine a user's inactivity period to return a boolean for whether they are online. For example, if their last_activity was more than 15 minutes ago, return False.
Write a view that is polled through jQuery ajax to return a particular user's online status.

As Sanjay says, prefer using memory solutions (online statuses have a quite brief use) like the Django cache (Redis or Memcache).
If you want a simple way of updating the online status of an user on an already loaded web page, use any lib like jQuery, AJAX-poll an URL giving the status of an user, and then update the tiny bit of your page showing your wanted status.
Don't poll this page too often, once every 15 seconds seems reasonable.

Related

AJAX - How can I build a notification system, that is constantly getting updated, without slowing down my website too much?

I am a beginner to web development, and I am trying to do a notification system with AJAX and jQuery.
In my web application, I have a comment system where you can mention another user. After a comment mentioning a certain user has been written, a new entry on my notifications table will be added, containing the comment, the id of the user who commented and the id of the user(s) who will receive the comment. After the notification is stored in the database, I want the person that was mentioned to receive the notification.
To that effect, I decided to use AJAX. Using the setTimeout() method, I am sending an AJAX request to the database every 2 seconds, and with that, I can display the notifications visually to the user that is meant to receive them.
My only concern is that this will slow down the site once I connect it with a server.
So, I was looking for a way that would allow me to implement a notifications system without slowing the site too much, since the one that I am using currently doesn't seem very efficient.
I would appreciate any help.

How do I push mongodb data?

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

Get Facebook user name with javascript SDK and app access token

I've coded some php which retrieves facebook user ids, stored in my database, and then goes on to request their user names. It all works fine, however this process adds an additonal 1.8 seconds to my pageload, which I would like to avoid if possible.
So I rebuilt the code, and added some javascript which looks for the user ids and then requests the user names. This method runs a lot faster and my page load is 1.8 sec shorter. However in order to make it work I'm adding my app access token to the javascript, which ofcourse is a security black hole
The javascript fb.api call looks like that at the moment
FB.api('/'+userid, {access_token : 'appAccessToken'}, function(response) {
userNameSpan.text(response.name);
});
Is there any other way I can make this work, without falling back to the pure server-side solution which is awfully slow?
I'm getting no answers at all to my questions lately. Anyway, the only other solutions I can think of are ajax calling the php file, which will be requesting the user names itself, or storing the user names in the database along with the user ids.
The ajax solution is problematic for a lot of reasons, mainly because the platform is joomla and the php is a custom module, which means that I will have to either call the file outside of the joomla framework (security issues arise) or build my own helper file for the custom module in order for it to work with the com_ajax component of joomla, which ofcourse is a timesink.
The database solution has the downside that the usernames will not be dynamic, meaning that if a user chnages his/her user name after he/she has been added in the database, the change will not be available to me. I guess I could also store the time the user was inserted in the database and check how much time has passed, and perform a facebook request for his/her username only after a predefined time has passed, and then updating the database if the username has changed. Not quite dynamic, but close enough
If any1 has any other ideas, please don't be shy
Although I'm gonna go for the database solution, I found another solution that can decrease the pageload significantly.
Instead of making an api call for each user, you can do a batch call, requesting info about many users in one call. It is explained here https://developers.facebook.com/docs/graph-api/making-multiple-requests
That would cut down my calls from 6 to 1. However since reading up a bit about facebook names, I realized they do not change that often any more, so the database solution is better for my case

Javascript Best Practise: Syncing Browser Windows

I have an html5/javascript application in which multiple users can be viewing the same set of data of any given time. For the sake of a real world example, lets say its a calendar type page.
So user1 is looking has the browser open and looking at the calendar page and user2 is also on the calendar page. User2 makes a change to the calendar and i'd like (as quickly as possible) for those changes the be recognized and refreshed on user1's screen. What is the best way to do this?
I'm thinking about have a mysql table for active users that stores the page they are currently on and a timestamp for its last update, then use ajax calls to ping the server every few seconds and check for an updated timestamp, if its newer than what they have client side, the new data gets sent and the page "reloaded." I am putting reloaded in quotes because the actual browser window will not be refreshed, but a function will be called via javascript that will reload the page. Sort of the way stack overflow performs its update checks, but instead of telling the user the page has changed and providing a button for reload, it should happen automatically. If user1 is working away on the calendar, it seems it might be quite annoying for user2's screen to constantly be refreshing...
Is this a horrible idea? Is pinging the server with an ajax request every few seconds going to cause major slow downs? Is there a better way to do this? I would like the views on either users side to be real time because its important that user1 not be able to update an element on the calendar page that user2 has already changed.
Update: based on some web sockets research it doesnt seem like a proper solution. First its not compatible with older browsers and i support ie8+ and second i dont need real time updstes for all users on the site. The site is an account based applicatiin and an account can have multiple users. The data needs to sync between those users only. Any other recommendations would be great.
You need realtime app for this. You should have a look at socketio. Everytime a user log in, you make him listen for changes on the server. Then when something changed on the server, every users listening are notified.
you can find examples on the official website : http://socket.io/

Automatic userlist update

I have a online user list which is populated by a SQL query to a database table.
When a new user comes online, how can i make the webpage automatically update?
What code do I need to provide?
Thanks
There are a few ways you could do this, but I'll avoid the most tempting WebSockets HTML5 new-ness and suggest the following:
When a user logs on, record the fact that they are logged on to the database.
From your page, poll a service or web page method that lists online users.
If the list changes, update the part of the page that shows the users.
That's the rough outline of what to do. If you need specifics please say what server-side host and programming language you are using. From the client side, please also mention what JavaScript framework you'd prefer or are open to.

Categories

Resources