维护会话的JavaScript HTTP客户端

Question

I have written a little PHP scoreboard which basically monitors a mysql table with realtime sports scores in it. Users use it by loading up the page, which then reloads itself every 5 seconds. The last-loaded scoreboard is stored in the session and compared to the current-loaded scoreboard. If a player has changed ranking the PHP script adds javascript to the page which shows a red or green highlight effect for that player depending on if they lost or gained rank.

What I'm looking for is basically a way to write a JavaScript script I can host on my site that is remote includable on other sites which will essentially maintain a session with my server, loading the scoreboard every 5 seconds and displaying the results, including the highlighting of changed rank players.

Basically I guess I need an HTTP client implemented in JavaScript that can do this. I've Googled around but there's a lot of jargon to parse. Also I would prefer not to use jquery or whatever other library since these may already be present on the remote sites and I don't want to cause conflicts. A pure javascript solution would be ideal I think.

Answer 1

There are 2 approaches that I can think of when dealing with a scoreboard application: 1) Using PHP + AJAX + MySQL which is great if your application and database are on the same server, and the amount of information returned by the AJAX app is small.

2) Using a websocket app such as socket.io ( http://socket.io/ ) or even ratchet ( http://socketo.me/ ) to update information on the scoreboard ONLY when there is an update.

I personally prefer using the websocket method when dealing with Scoreboards simply because it also allows me to do custom alerts when there is an update.

Answer 2

As everyone suggested you should use ajax to retrieve the data from the php server instead of reloading the page. If you don't want to use any library (like jQuery) you could use pure ajax like this example . Then use the function setTimeout to call the function each 5 minutes.

But it could be great if you could use jQuery because you already have an ajax function so you can do something like this:

$.ajax({
  type: "POST",
  url: "some.php",
  success:function(msg){
         //you can update the data here
  }),
});