Member Avatar for MargateSteve

We recently had our account suspended (without warning - thanks 1&1) due to exceeding server load.

The reason this happened was there were quite a few divs that were refreshing (via Ajax) every 9 seconds to give a 'live update' on the site (it is a sports site so this was to give live score updates etc).

Now I am looking for an alternative way of getting the same functionality without putting strain on the server and, ideally, not register a page hit on each refresh and hopefully someone can give me advice on the best way to go.

Currently, each of these divs call a seperate page which pulls data from a MySQL database. I have read that there are ways to check that file and only refresh the div if it has changed. Ideally, however, I would like to pull the data directly into the div, without using the middle page, and get that to update if the data in the database has changed.

Having said that, I am open to any suggestions or pointers that will give me the same live updates without running the risk of the host pulling the plug again!

Thanks
Steve

  • 5 Contributors
  • 5 Replies
  • 203 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by minitauros

Dani AI

Generated

Problem recap: had many independent Ajax refreshes every 9 seconds which triggered a host suspension. Two facts to be clear about: the browser cannot talk to MySQL directly (an HTTP endpoint is required), and any HTTP request typically counts as a "hit" — the objective is to massively reduce work done per request rather than magically avoid hits.

Practical, low-risk approach (builds on and ): expose a single JSON endpoint that returns a small payload for every live widget (id + last_updated + rendered HTML or minimal data). The client polls that one endpoint and only updates DOM nodes whose last_updated has changed. This collapses N requests into 1 and avoids repeated heavy queries.

Example client pattern:

let last = {};

async function poll() {
  const res = await fetch('/live.json');
  if (!res.ok) return;
  const data = await res.json();
  for (const id in data.widgets) {
    const w = data.widgets[id];
    if (last[id] !== w.updated) {
      document.getElementById(id).innerHTML = w.html;
      last[id] = w.updated;
    }
  }
}

setInterval(poll, 9000);

Server-side optimizations: maintain a single cheap "last_update" value (a small table row, memcached/Redis key, or a file whose filemtime is touched on writes) and check that first. If unchanged, short-circuit and return minimal response (or 304). That prevents running full SELECTs on every poll. Long-polling (as mentioned) or PHP "sleep loops" can reduce HTTP rate but on shared hosts they often tie up workers and increase load; WebSockets/SSE are ideal push solutions but require a host that supports persistent connections or an external realtime service.

Operational tips: pause updates for inactive tabs or invisible elements (Page Visibility API / IntersectionObserver), use exponential backoff when nothing changes, offer a "pause live updates" control, and instrument request/DB load to find hotspots. Combining these measures gives near-real-time UX without hammering the server, and makes a hosting upgrade or a small realtime service optional rather than mandatory.

Recommended Answers

All 5 Replies

Member Avatar for pritaeas

Here's a nice introduction to long-polling.

Member Avatar for paulkd

Was the 9 seconds by design? I think the BBC only refreshes every 5 mins for sporting events.

Member Avatar for MargateSteve

The 9 seconds was by design to get it updating in virtually real time. 5 minutes in my case would be too long as I want people to see exactly when a score has changed or a match has finished.

I think polling would be the way to go, although I was really hoping not to have a load of hidden pages being called. Would there be any strain on the server with this calls being made every few seconds or will it only be when it does refresh?

Thanks
Steve

Member Avatar for pzuurveen

Currently, each of these divs call a seperate page which pulls data from a MySQL database.

Why not make one ajax-call for all the div's at once to one singe php making one MySQL search?

Member Avatar for minitauros

Well I can think of at least two things that you could think about:

  1. Instead of each <div> refreshing separately, why don't you create one file that retrieves all data that needs to be refreshed, and then use Javascript to place the retrieved data in the corresponding <div>s?

  2. You could measure a user's activity. For example if he hasn't moved his mouse or hasn't scrolled for X time or something like that, you could change a global var like "is_active" to "false". Your refresh function should then check if that var is set to "true" or "false", and don't execute the refresh if it is set to "false".

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.