Avatar of Paul Konstanski
Paul KonstanskiFlag for United States of America asked on

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

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.
* Client agentDatabasesJavaScript

Avatar of undefined
Last Comment
Paul Konstanski

8/22/2022 - Mon
leakim971

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>

Open in new window


what is jQuery, jQuery.get ?
ASKER
Paul Konstanski

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); 

Open in new window

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.


ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
Paul Konstanski

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.

Your help has saved me hundreds of hours of internet surfing.
fblack61
leakim971

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

@leakim971 are you still agreeing that that is still a pretty light load in the server?
leakim971

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 

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
Paul Konstanski

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?
leakim971

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)
ASKER
Paul Konstanski

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).

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
leakim971

what server side language do you've ?
ASKER
Paul Konstanski

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.

SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
Paul Konstanski

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

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.