Popup when a new message arrives

I have a fully functioning messaging system on my website. I want to evolve this by having a box popup altering members when they have a new message.

It would say something like "You have a new message, would you like to view?". You would be able to click Yes or No.

How would I go about doing this? Never tried anything like this before!

Thanks

UPDATE. I am very inexperienced using the technologies required here. How would I go about ensuring this works on every page开发者_StackOverflow中文版? What code would I include? This is something I need to improve on as it opens up so many more possibilities!

You can have a looping AJAX call in the background that checks every few minutes. If the server returns a URL (or something distinguishable from "no messages") then you'll get the popup, and if they hit OK, are sent to the URL (using a basic confirm() dialog in Javascript).

Be careful though, the users patience will wear thin if you munch their CPU power on this.

You'd have to check regulary with the server if a new message is present for the user, using a timer in your javascript (so clientside code). Due to the nature of HTTP (it being stateless) it is not possible to push this notification from the server.

Firstly you should look at the following:

http://stanlemon.net/projects/jgrowl.html

you should load jQuery + jGrowl and create a heartbeat function which polls the server every X seconds like.

When the server receives a request from the JavaScript you check the database for the latest messages marked un_notified (not read)

You compile a list and mark them notified, and then send the list to the JavaScript again, this in turn gets passed to jGrowl and notifications are show,

You have 3 options:

1. Show the message every time the user reloads the page. Easy and fast.
2. Show the message by sending AJAX requests to the server. Can be really bad when you have many users, so make sure the response take very little time.
3. Send the message from the server using WebSocket. Most up-to-date technology, but it's only supported in a few browsers, so check the compatibility issues before implementing it.

I'd personally use #1, if I don't need instant user reaction. #2 is good for web chatting. #3 is universal, but rarely used yet.

Normally you would have an AJAX script in the background, running with long timeout (30+ seconds), and functionality that shows the message after page reload. This combines #1 and #2.