How does a website keeps itself updated for new data? - javascript

I'm currently developing a website for a chat application (everything in the serverside is Django).
One of the problems I faced was how to keep the website (once a user is logged and has everything rendered) updated if the user needs to receive something new (a new message, notifications, etc).
The solution I came with was to first create a URL to send a get request, and the response would be a list of unseen notifications for the user. Then, in the HTML, a JavaScript code to send request to this URL and receive the unseen notifications.
This way, upon loading, the page will send a get and receive all unseen notifications and save them in a variable, after that it will keep sending the request every half a second and check if the rendered data is the most recent data, and if it's not, reload the page to refresh all the rendered data.
Now, this works ok, but I'm not sure this is how it should be done, as I'm bombarding with requests my server (currently, everything in development and just a couple of users at the time nothing exploded) and the client is sending request all the time. Is this how other webs (for example Facebook) keep themselves updated in case a new notification appears without the need of the user manually reloading the page?
Thanks in advance!

Related

Listener on a Web Page?

Is there a way for a web page to respond to a message from a web server, while idle? I need to display a page of user information. As a user swipes his card, a system will authenticate him, and then send a message to my solution, indicating that a user authenticated.
I then need to update a web page with his details. So, no interaction with the page from the user. It must just refresh when I send a message to it - somehow. Is this possible?
I was thinking of some sort of page which has 'subscribed' to events from a server, allowing me to send it, maybe a JSON object, and when it receives this message, refreshes the screen with the data from the messages it recieves?
We don't want to poll the server every second. We need to it respond to an incoming event. So, listening, as opposed to asking. and it has to be quick. So, the only delay would be the amount of time for the message to go from the web server, to the client browser.
We're using .Net application server, standard browser (Chrome, IE etc), a Bootstrap UI (Irrelevant, I guess).

Client Browser to change Server side file system/change the source code

Is there a way that an action initiated by a user, on a client Browser( like clicking a button), can change characteristics of the page loaded by other clients.
The reason I need this is for controlling a device that post information onto a page and waits for a response to see if it can still continue posting information or not. I want that response to come from the user viewing the page. Both client browsers load the page from the server and they are not related in any way.
Thanks

An alternate way of reloading a chat after few seconds

So I was implementing a chat room. I'll start off with the schema that I used.
I have a room table, that basically stores the information regarding the chatroom like the number of participant, the topic etc etc.
I have a users table that stores the users info.
I have a posts table that stores the posts. This has a foreign key from Users and from room tables.
also, I have one final table that is to have a relation between users and rooms. So it just has the roomid and the userid from the users who are a part of the room.
Now, I have three divs on page, one for the chatarea, the other where the people online are shown and then there is a text area to post the message.
What I am doing currently is, to have a javascript function loadChats(), now this method calls a php file that just fetches all the posts in that particular room till now. And the same is dumped into my div ie "chatroom".
Also, similarly, I have a loadParticipants() that load the users every other second.
I am using jquery.post for the purpose and in the end of the method, I do a setTimeout in the end of the function. Now here are my questions
Ofcourse i can make this better. Any suggestions? I was thinking of a few.
On every call to php, I get the entire chathistory and send it back to browser, ofcourse I can check if the count of messages is the same as it is on the client side, and if it is, then I wont send the messages. But is it going to make it any better? How?
Also, making a call to server side every other second seems a bit too much of an overkill. Is there any way to do it like, if some new chat is added to posts table, then that particular chatroom is notified and updated? i.e. instead of constantly pinging the server to ask for new request, just ask it once, and wait if there is anything new or not. When that request is completed, it pings the server again for the next update.
You should look into websockets (I've never used them with PHP but this seems really promising: http://socketo.me/). What you can do is have the server push any new messages to the client whenever they come in, and have each of the clients push to the server, etc. This way you won't have to keep pinging the server over and over every 2 seconds, and loading tons of data to compare. When there's a new message, the server saves it to some database and then pushes that message through all the open sockets. Same thing with logging in/logging off.
edit: Just looked through the page even more and their tutorial even goes through how to get it set up with a basic chatroom-esque functionality.

Send Request to browser from server (Java EE)

I want to send a request (or any response or notification) from the server side to the browser without a browser request to the server.
I use JSP and the Struts framework in my Java EE application. When some one is on my page, and when some processing in done in my action class/servlets, I want to send a notification or message or request to the browser to be appeared on the page. Here the relevant page cannot be refreshed or reloaded and it may be handled on the browser side with javascript or jquery. I use Http.
Is there a way to do this?
EDIT: Example: The application is an online inventory system. An Admin has logged in. If one of the items is out of stock, the admin should be notified saying that that particular item is out of stock without the admin searching the stores and do nothing (when he is on his account page, a pop up may be displayed to him).
I am not so sure what you meant but according to my understanding you can do this.I guess Comet is the thing you are looking for.Comet is the technique where in server pushes the data to the browser.
Try Pushlet concept which might address your requirement
http://www.javaworld.com/jw-03-2000/jw-03-pushlet.html

how to update a Django page without a page reload?

My Django app displays data from a database. This data changes without user intervention, i.e. behind the scenes. Whenever it changes, I would like the webpage to update the changed sections without a full page reload.
Obviously AJAX springs to mind. When the page is loaded initially (or manually, fully re-loaded later on), the rendered template loads a JavaScript that runs window.onload = update("all"), update(...) in turn triggers a number of XMLHTTPRequests which again return data that gets transformed into HTML pieces for the corresponding sections. All works fine. At the initial page load.
Now I find myself in a Python function that saves a new object to the database.
How do I tell the browser to run update(...) ?
Do I need to somehow manually issue a request to a url that is mapped to a view which in turn renders a template that contains the JavaScript code to run update(...) ??? Oh my!
I feel like I'm not following the usual approaches.
Maybe I'm just standing to close in front of the problem.
Can anyone help me ?
2021 update: Use channels: https://channels.readthedocs.io/en/latest/
You have two choices
Have the browser poll using setTimeout()
Look into Comet -- this is a technique for pushing data from the server to the browser.
Here's an article on Comet in Django
two approaches:
just update the database and wait until the next AJAX query. That means it should do the query periodically, you'll have to balance between immediacy and server load. It helps a little if you can do a cheap query to just verify if there has been an update. Maybe make that check rely only on memcached instead of going to the DB
use comet. In short: the client does an AJAX query asking for the update. the server sees there's no update, so it doesn't answer. Instead, the connection is kept open for a long time. Eventually either the update comes and the server finally answers, or the client times out and kill the connection. In that case, the client should immediately reissue the query to keep waiting for the update.
You can also use The Websocket API https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

Categories