Button click that stays active for all users - javascript

Looking for some help with a problem i am facing, I am working on a project where we have a page that contains buttons with statuses, for example full, empty, half-full etc, These are designed to show that status of trucks as they pass through several systems, as they do, 1 of many people can select a button and it should update on all screens.
So something like this.
Truck enters stage one, user clicks button on stage one section of the page and that is then displayed to everyone who views the site on the internet.
I have no code at the moment as it is still be planned out.
I am stumped on the best way to achieve this, so any help at all would be appreciated.
Thanks

Edit: Alternately, use WebSockets, which solves the issue I describe below by allowing server and client to interact two-ways. Have a link!
Think of a web application in terms of server and client. The server cannot send requests; only the client can send requests to the server, which can respond to these requests.
In your application, the server should at all times keep track of the state of all buttons (e.g. whether they are pressed or not). Whenever a client presses a button, it sends a request to the server, which now knows to change the state.
The problem now is sending this new state to all of the other clients. Since the server can only respond to requests, not initiate them, that means all of our other clients must be waiting on a response from the server at all times.
Thus, the solution is to have each client constantly have an unanswered request to the server. Whenever the server responds, immediately send back another request (anticipating the next state change).
Tangentially: this is how many real-time chat applications work, including Facebook chat. If you open the developer tools on your console, you can actually see your browser sending and waiting on requests.

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 to watch user requests from server?

I am developing a website using J2EE(JSP,struct2) and Apache Container. My website will be some kind of scial media webiste like facebook.
All the thing I like to do is to change the user login status in database to active after user login and change it again after user logouts. Those active user list has to be shown to other users as well.
All I am thinking is to change user active status as soon as user login to the website and will use ajax for up-to-date active user list. The thing I have trouble is that I want the server to check if the user is still active and still using the website every 5 seconds or whatever.
To do so, all I am thinking is to watch the user from server if it is still sending the requests to the server. How can I watch like that?? Where can I read the tutorials to write such cde.
You will need 2 parts to solve your requirements.
JavaScript on client
Ajax receiver on server
Client:
On the client side can you use a idle handler which sends a request after some idle time on the user side.
Choose one of this solution
https://www.startpage.com/do/asearch?cat=&query=inactivity+user+javascript
Server:
On the server side just receive the Ajax request and write it to a DB. Afterwards you can do whatever ever you need with this record
Two suggestions:
First: Using something like socket.io instead of AJAX in order to make it more
lightweight on the server side.
Second: Consider delegating the inactivity detection and announcement to the client.

NodeJS Queue System for Connections Past 20

I'm trying to create a queue system in NodeJS so that only 20 connections are able to access a certain page at once. Right now I'm assigning each user a unique ID using shortid and javascript localStorage (to store their ID). I want to give each user 1 minute to see the piece of content and then it boots them to "get back in line". If they have to wait it will tell them "You'll be connected in XX minutes".
Right now my process is to use http.globalAgent.maxSockets = 20; to only allow 20 people in but it's not allowing me to route them somewhere else to make them wait. My thought was to have a database of what order people are "in line". Then when a user is kicked off the page after 1 minute, the next user "in line" will be brought in and given 1 minute before they are kicked out.
I'm using MySQL to store the queue. The problem is I'm not sure how to finish the code to boot someone after one minute and make them "get back in line". Any help? Thanks!
I think you're misunderstanding the HTTP protocol. When you make an HTTP request, a TCP connection is created, but not held. You also cannot just limit the sockets for a single route. HTTP is not a persistent connection. You'll need to find another way to implement such a system. Being that HTTP is stateless and non-persistent it will be difficult to do correctly. So if you limit your maxSockets to 20, that means that you can only accept 20 requests at a time. A socket is created for a request/response, but does not persist after that even if the user is still views the page.
You'd probably need a way to "check-in" a user to that page. Something that comes to mind would be to have the users connect to a web socket when they reach that page, and each time a user attempts to join then send out a broadcast to all the users on that page to see how many are still on it. This would still be easily fooled unless you served the pages content over the websocket, because I could simple disable websockets or load a script to just disconnect from the websocket so it cannot "put me back in line". It's likely a very complicated solution, because you're trying to manage the state of your clients, and that's not something HTTP is good at on its own.

Send info to the server when someone leaves a specific page

I'm coding a translation system for multiple messages.
I've a page with a table listing all the messages that need to be translated. When a translator click on a message to translate it, I lock it cause no other translator can be assigned to it.
The problem arises when a translator enters and instead to write something, leaves the page in an unconventional way like back button or closing the browser.
If this happens I want to unlock the message to make it available again to other translators.
How can I reach this behavior?
I know the javascript onbeforeunload event but triggers also every time a user refresh the page and this isn't what I want.
ty in advance
EDIT:
seems that implementing a js ajax call to notify every minute the server is the way to go. Now the question is how to handle the PHP server side?
You can use WebSockets, but in my opinion its a immature technology and still away from being firewall friendly.1
So, you can use HTTP polling. Use a JavaScript to make a HTTP request to the server from time to time, so it will show to the server the client is still in the page. The time will depend on connection, number of user's etc, but putting it before the keep-alive expires is a good idea as the TCP/IP connection is still open.
If the user leaves the page, the polling will not execute, and after not receiving the HTTP request for x seconds plus some time, the server can assume the user is not more on the page.
1 - Well its the firewall that is not friendly of WebSockets, this probably will change with time
What's wrong with using onbeforunload and asking the person if they really want to leave the page with unsaved changes?
I'd use the mentioned approach while proving a manual save button.
Also, a timeout on locks would help, so if the person has not edited the field for several minutes, it'd be unlocked and the person would be notified via a JS AJAX call.
EDIT: to implement the AJAX timer, I'd do the following:
save last access time to the translation item in a database or in a file on the PHP side
once every 30 seconds, do an AJAX call to a PHP script that will verify the last access time
depending on the result, return an "OK" or "TIMEOUT" message from the PHP script to the JavaScript part, which will then either do nothing (for OK) or deactivate the translation and inform the translation about the timeout

How to pull new post and comments

I am currently developing a website where many users post topics and the associated topics' comments are shown in the page. Currently I'm developing using cake php.
The very first time a user clicks the website, all the topics and comments are displayed. But when other users add new topic or comment to a topic, I need to show the update in the same page. I am confused as in how am I able to retrieve new contents and update accordingly in a page. For instance how facebook does it where when your friends adds status or comments on your status, it updates without refreshing the page.
I know that AJAX technology is used but how is it done. Any source that I can refer? Hope someone can help as I have been doing research for the past one week but no answers so far.
You can go two routes in this.
Server Push
http://en.wikipedia.org/wiki/Push_technology
This technique is perhaps the most efficient as the server notifies the client of any updates. However this technique usually requires a bit more work than a simple polling system. You can use something like nodejs or Comet to push updates. If you're using nodejs, I highly recommend using SocketIO to handle the client side. With Socket.io you can have the client side listening to the server on a channel so that the server can notify the client whenever an update happens.
Client polls server
In this version, the client (new visitors browser) constantly polls the server for updates. You can set whatever gap you want, but keep in mind that if you make the polling gap too small your server might take a performance hit as each new user will create many requests. This method is as simple as setting up a setInterval() call in JS coupled with an AJAX call.

Categories

Resources