1

PHP + MySQL + Javascript で書かれたオンライン チャット ルーム プログラムを持っています。

jQuery.post()から新しいチャット メッセージを取得するために使用しますchat.php。この php プログラムは、MySQL からデータを読み取り、echoそれをページに表示します。

新しいメッセージが届いたときにユーザーに警告するにはどうすればよいですか? チャット ルームのページがフォーカスされていない場合にのみ警告するようにします。

ところで、ウェブページのタイトルを点滅させることは、ユーザーに注意を喚起するのに良い考えですか?

4

4 に答える 4

0

Javascript / JQueryで制御するよりも、HTML5タグを使用する必要があります。

これは私のために働きます: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();

..。

于 2013-03-15T08:53:53.950 に答える
0

各メッセージに一意の ID を与え、たとえば 5 秒ごとに chat.php をポーリングし、クライアントの最後のメッセージ ID を chat.php から取得したものと比較します。

それは簡単です。

よりクールでリアルタイムなソリューションが必要な場合は、www.pubnub.com またはそのようなサービスをご覧ください。

于 2012-08-06T15:11:14.647 に答える
0

ページがフォーカスされているかどうかを確認するには、document.hasFocus関数を使用できます。trueドキュメントがフォーカスされているかどうかを返しますfalse

ただし、Opera ではサポートされていないようです。そのため、Opera のサポートが重要な場合は、focusblurのイベントを見てwindow、ウィンドウがフォーカスされているかどうかを判断できます (ここに例があります)。


「ユーザーにどのように警告するか」というトピックについては、実際に決定するのはあなた次第です。タイトルの先頭に " (x) " を追加して、通常の方法でそれを行うことができます。ここで、 xは新しいメッセージの数です。また、Flash を使用するか、JavaScript Audio API を使用して、ノイズでユーザーに警告することもできます。

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

ただし、音声フィードバックは厳密に自発的なものにしてください。


さらに凝りたい場合は、Chrome デスクトップ通知をご覧ください。Chrome を実行しているすべてのユーザーは、新しいメッセージが到着するたびに、デスクトップ通知 (Skype または MSN メッセージを受信したときに受け取るのと同じ種類) を受け取ることができます。以下は使用例です

于 2012-08-06T15:16:24.007 に答える
0

Facebook、スカイプ、その他の有名な「チャット ルーム」メソッドを使用できます。

ユーザーの新しい応答を取得すると、次の 2 つの方法があります。

  • Windowsに表示される通知を追加します(WindowsまたはMacでSkypeを使用する場合...)
  • メニューのチャットボタンの色を変更したい(そしてフラッシュライトを数秒間)。

赤い色は攻撃的な色ですが、それはウェブサイトの色によって異なります...

そして、懐中電灯の場合は、ほんの数秒を使用してください。そうしないと、ユーザーはチャットシステムに飽きてしまいます...

ウェブデザインのベストプラクティスについては、非常に優れた記事がここにありました...

于 2012-08-06T15:11:38.717 に答える