如何在收到新消息時發出警報

Question

我有一個用PHP + MySQL + Javascript編寫的在線聊天室程序

我使用jQuery.post()從chat.php獲取新的聊天消息。 這個php程序從MySQL讀取數據並在頁面上echo它。

當收到新消息時，如何提醒用戶？ 我只希望它在聊天室頁面不集中時發出警報。

順便說一句，閃爍網頁標題是否可以提醒用戶？

Answer 1

給每個消息一個唯一的ID，例如，每5秒鍾輪詢一次chat.php，然后將客戶端的最后一條消息ID與您從chat.php獲得的消息進行比較。

這很容易做到。

如果您想要一些更酷，更實時的解決方案，則應該訪問www.pubnub.com或類似的服務。

Answer 2

您可以使用facebook，skype或其他著名的“聊天室”方法。

當您收到用戶的新響應時，您有兩種方法：

• 您添加一個出現在窗口中的通知（在Windows或Mac中使用Skype時...）
• 您要更改菜單中聊天按鈕的顏色（並閃爍幾秒鍾）。

紅色是攻擊性的顏色，但這取決於您的網站顏色。

對於手電筒，只需使用幾秒鍾，否則用戶會厭倦聊天系統...

對於網頁設計的最佳實踐，一篇非常好的文章在這里 ...

Answer 3

要檢查頁面是否聚焦，可以使用document.hasFocus函數。 如果文檔已聚焦，則返回true ，否則返回false 。

不過，Opera似乎不支持它，因此，如果支持Opera對您很重要，則可以觀看window的focus和blur事件以確定窗口是否在焦點上（ 這里是一個示例） 。

---

在“ 如何警告用戶 ”這一主題上，這完全取決於您自己決定。 您可以按照通常的方式進行操作，在標題之前加上“ （x） ”，其中x是新消息的數量。 您還可以使用Flash或更好的JavaScript Audio API向用戶發出噪音通知：

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

不過，請務必嚴格遵守音頻反饋。

---

如果您想更加花哨，可以查看Chrome桌面通知 。 每當有新消息到達時，任何運行Chrome的用戶都可以收到桌面通知（與收到Skype或MSN消息時得到的通知相同）。 這是用法示例 。

Answer 4

您必須使用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();

...