We help IT Professionals succeed at work.

Can a value that is pushed by the server be accepted on the client browser?

53 Views
Last Modified: 2020-04-20

Ten Image Display That Advances by Value Change on Server

I would like to display ten different images on my Website that are controlled by a value in a database.

Here is how I am currently doing it.

I created a function called "currentImage" to make a call to the database to see what the current image is set at. (e.g. numbers 1-10). That number is passed to the browser and stored as a variable called, "activepage".

I then have created a interval function that fires every 10 seconds. It calls the "currentImage" function which checks the DB to see if the current image has changed. If a change is detected then, the browser updates to the new image. If not, it stays the same.

This 10 second call happens as long as the browser is open.

Can This Change be "Pushed" by the Server?

What I am wondering if there is any way that the server could "push" this value to the browser and be accepted without the operator having to acknowledge the push (e.g. that's why I don't believe push notifications will work.)

Heavy Server Load (or is it?)

The above option works fine and it may be the only way. The problem is that let's say a person has their browser open for 10 minutes to watch the images (e.g. like a presentation). Ten minutes is 60 database calls.  If 100 people were on the site at the same time that would be 6000 database calls in ten minutes. Maybe that's not a lot, but it seems to me like it is.

One Time Acceptance Okay

I am okay with a one-time acceptance of the user at the start. In other words upon arrival, a box pops up that says, "I give permission to allow my screen to be updated." But then all subsequent refreshes happen without user intervention.

Bottom Line: Is there a way to do this?

So bottom line, is there any other way to do this other than the client browser making the DB call every 10 seconds?  

Thanks.
Comment
Watch Question

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
you can do an Ajax call every 10s

<img id="yourImageID" src='"/some/image.png" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script>
setTimeout(function() {
         $.get("/path/to/server/code/doing/the/DB/request.php").done(function(imgSrc) { // we use jQuery here
                 $("#yourImageID").attr("src", imgSrc);
          });
}, 10*1000);
</script>

what is jQuery, jQuery.get ?
Paul KonstanskiProject Specialist

Author

Commented:
Sorry if I wasn't clear. I'm already doing that.  I'm using Angular and here is the call.
      setInterval(()=>{ // this runs the sync every 10 seconds.
        if (this.sync) { this.slideAct('sync'); } // only run if sync is on...
      },10000); 
What I am looking for is something that can be initiated by a change on the server. Rather than having to check every 10 seconds, I want something that the server pushes out that the Browser will accept.


Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
David Johnson, CDSimple Geek from the '70s
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Paul KonstanskiProject Specialist

Author

Commented:
Okay, thanks.  That is helpful to have that information about what a typically DB can handle. I had suspected that was the case but it's nice to have it confirmed.  

It is working great. Thanks.

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
care, 10s for 100 visitors is 600 calls to your DB per minutes and it probably do more than checking for new images
Paul KonstanskiProject Specialist

Author

Commented:
@leakim971 are you still agreeing that that is still a pretty light load in the server?
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
it depend the server capabilities
my last comment is just a warning, maybe you've more visitors ?
if the 10s timing is set by your server, I think it's better and that was your path. It's just a bit more complicated.
every 10s I send a new image to my client
instead
my client ask me an image every 10s => it can be 1 every 10ms due the fact my client are not synchronized 

Paul KonstanskiProject Specialist

Author

Commented:
What I'm looking for is a way for the client's screen to change based on a change of a variable in the database on the server. In the early stages where we have a small audience, I think this approach of having the client browser go out and check on an interval of 10 seconds will work fine (as shown by your numbers).

But I am thinking about if this grows to a much larger number.  I am looking for a way for the server to "push" out a notification that the client browser will accept without user action.  I think specifically, here is what I am wondering about:

  1. Upon initial load the client is asked for "permission" to auto update their browser. They say yes.  This acceptance is then "stored" for this session. 
  2. The client browser then loads image 1.
  3. The serve then sends a notification that the client should now display image 2.
  4. Because of the previously accepted permission (step 1), the browser auto refreshes.

So is this possible?  Or do all push notifications require a user acceptance?
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
You don't need permission to receive message from the server
You need permission to display a notification over the browser
 (the famous, site XXXX want to send you notification, do you accept it)
Paul KonstanskiProject Specialist

Author

Commented:
Do you know of any article that explains how to do specifically that aspect?

My environment is an Angular and Typescript client application.

I just don't understand how to initiate the notification on the server end and then how to receive it on the client's browser (aka via Typescript).

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
what server side language do you've ?
Paul KonstanskiProject Specialist

Author

Commented:
I am using PHP on the server.

My client application on the client side makes a call via http_get to a php file. PHP then returns a JSON string that is read by the client.

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Paul KonstanskiProject Specialist

Author

Commented:
Thanks for the help. This is the information I needed to get started. I will experiment with some options for a while.

Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.