如何在收到新消息时发出警报


How to alert when new message comes in

我有一个用PHP + MySQL + Javascript编写的在线聊天室程序

我使用jQuery.post()chat.php获取新的聊天消息。这个php程序从MySQL读取数据并将其echo页面上。

当收到新消息时如何提醒用户?我只希望它在聊天室页面未聚焦时发出警报。

顺便问一下,闪烁网页标题是提醒用户的好主意吗?

例如,为每条消息提供一个唯一的 ID,每 5 秒轮询一次您的聊天.php并将客户端最后一条消息 ID 与您从聊天中获得的内容进行比较.php。

这很容易做到。

如果你想要一些更酷、更实时的解决方案,你应该看看 www.pubnub.com 或类似的服务。

您可以使用

Facebook,Skype或其他著名的"聊天室"方法。

当您为用户获得新响应时,您有两种方法:

  • 您添加通知出现在窗口中(当 Skype 在 Windows 或 Mac 中...)
  • 您想更改菜单中聊天按钮的颜色(并闪烁几秒钟)。

红色是侵略性的颜色,但这取决于您的网站颜色...

对于手电筒,只需几秒钟,否则用户会厌倦聊天系统......

对于网页设计最佳实践,这里有一篇非常好的文章......

要检查页面是否聚焦,您可以使用document.hasFocus功能。如果文档已聚焦,它将返回true,否则false返回。

不过,Opera似乎不支持它,因此,如果支持Opera对您很重要,则可以观看windowfocusblur事件,以确定窗口是否处于焦点中(这是一个示例)。


关于"如何提醒用户"的主题,这实际上由您决定。您可以按照正常方式进行操作,在标题前面加上"(x)",其中 x 是新消息的数量。你也可以使用Flash甚至更好的JavaScript Audio API来提醒用户:

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

不过,请务必保持音频反馈严格自愿


如果您想格外漂亮,可以查看Chrome桌面通知。只要有新消息到达,任何运行 Chrome 的用户都可能收到桌面通知(与收到 Skype 或 MSN 消息时收到的通知相同)。下面是一个用法示例。

你必须使用HTML5标签,而不是用Javascript/JQuery控制它!

这对我有用:http://css-tricks.com/play-sound-on-hover/

在 HTML 源代码中:

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

在 JavaScript 中:

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

然后,您可以使用以下调用:...``

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