How to alert when new message comes in

Question

I've got an online chat room program written in PHP + MySQL + Javascript

I use jQuery.post() to get new chat message from chat.php. This php program reads data from MySQL and echos it on the page.

How do I alert the user when new message comes in? I only want it to alert when the chat room page isn't focused.

By the way, is flashing the webpage title a good idea to alert the user?

Are you asking about the best way to implement (or simulate) server-push for your chat messages, or are you simply asking a UI question about the best way to send an alert to the user? — apsillers, Aug 06 '12 at 15:13

score 0 · Answer 1 · answered Aug 06 '12 at 15:11

0

Give each message a unique ID, poll your chat.php for each 5 seconds for example and compare the clients last message ID to what you get form chat.php.

That's is easy to do.

If you want some cooler and more realtime solutions you should have a look at www.pubnub.com or some service like that.

answered Aug 06 '12 at 15:11

Simon Edström

6,461
7
32
52

From my interpretation of the question, polling for new messages isn't the issue - *how to alert the user* is. – Hubro Aug 06 '12 at 15:17
Hm, seems like another guy is asking him to clearify whats really asked. If it's UI related I delete my answer. – Simon Edström Aug 06 '12 at 15:21

score 0 · Answer 2 · answered Aug 06 '12 at 15:11

You Can use a facebook, skype or other famous "chat room " method.

when you get a new response for user, you have two method :

you add a notify appear in the windows ( when skype in windows or mac...)
you want to change color, of the chat button in your menu( and flashelight few seconds).

Red color is agressive color, but that depends your website color...

And for flashlight, use that just few seconds, else users get tired of chat system...

For webdesign best practise, a very good article was here...

score 0 · Answer 3 · edited May 23 '17 at 12:04

To check if the page is focused you can use the document.hasFocus function. It returns true if the document is focused and false otherwise.

It doesn't appear to be supported in Opera though, so if supporting Opera is important to you you can watch the focus and blur events of window to determine if the window is in focus or not (here is an example.)

On the topic of "how to alert the user", that's really up to you to decide. You could do it the normal way, prepending a "(x)" to your title, where x is the number of new messages. You could also alert the user with a noise using Flash or even better, the JavaScript Audio API:

var sound = new Audio('sound-file.wav');
sound.play();

Be sure to keep audio feedback strictly voluntary though.

If you want to be extra fancy you could have a look at Chrome desktop notifications. Any user running Chrome could get a desktop notification (The same kind you get when you receive a Skype or MSN message) whenever a new message arrives. Here is an example of usage.

score 0 · Answer 4 · edited Mar 15 '13 at 09:13

You have to use the HTML5 tag than control it with Javascript/JQuery!

This works for me: http://css-tricks.com/play-sound-on-hover/

in html source:

<audio id="chat_sound" controls>
    <source src="audio/notification.mp3" type="audio/mp3" preload="auto">
    <source src="audio/notification.ogg" type="audio/ogg" preload="auto">
    Your browser isn't invited for super fun audio time.
</audio>

in javascript:

var sound_notification = $("#chat_sound")[0];

then you can use these calls: ...``

sound_notification.pause();
sound_notification.play();

...

How to alert when new message comes in

4 Answers4