Как заставить мой скрипт чата воспроизводить звук при появлении нового сообщения? - PullRequest
0 голосов
/ 15 ноября 2011

Страница чата JavaScript: Как заставить мой скрипт чата воспроизводить звук при появлении нового сообщения?

Вот три сценария, которые я использую:

<script type="text/javascript"><!--
function showmessages(){
   if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET","show-messages.php?" + Math.random(),false);
      xmlhttp.send(null);
   }
   else{
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      xmlhttp.open("GET","showmessages.php?" + Math.random(),false);
      xmlhttp.send();
   }
   document.getElementById('messages').innerHTML = xmlhttp.responseText;
   setTimeout('showmessages()',5000);
}

showmessages();
function send(){
   var sendto = 'send.php?message=' + document.getElementById('message').value + '&name=' + document.getElementById('name').value;
   if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET",sendto,false);
      xmlhttp.send(null);
   }
   else{
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      xmlhttp.open("GET",sendto,false);
      xmlhttp.send();
   }
   var error = '';
   switch(parseInt(xmlhttp.responseText)){
   case 1:
      error = '<span class="pink">The database is down!</span>';
      break;
   case 2:
      error = '<span class="pink">The database is down!</span>';
      break;
   case 3:
      error = '<span class="pink">Don`t forget the message!</span>';
      break;
   case 4:
      error = '<span class="pink">The message is too long!</span>';
      break;
   case 5:
      error = '<span class="pink">Don`t forget the name!</span>';
      break;
   case 6:
      error = '<span class="pink">The name is too long!</span>';
      break;
   case 7:
      error = '<span class="pink">This name is already used by somebody else!</span>';
      break;
   case 8:
      error = '<span class="pink">The database is down!</span>';
   }
   if(error == ''){
      document.getElementById('error').innerHTML = '';
      showmessages();
   }
   else{
      document.getElementById('error').innerHTML = error;
   }
}
// --></script>



Your Name: <input type="text" id="name" value="" /><br />
Enter Your Message:<br /><textarea id="message" cols="20" rows="2"></textarea><br /> 
<input type="button" value="Send" onClick="send();document.getElementById('message').value = '';"/>

<div id="messages"></div>
<div id="error"></div>

шоу-messages.php

<?php
mysql_connect('*******','*******','*******1');
mysql_select_db('chat') or die(2);
$random = microtime(true);

echo '<p><a href="?'.$random.'">Refresh Chat</a></p>
';
$result = mysql_query("select * from chat order by time desc limit 0,10");
$messages = array();
$i = 0;
while($row = mysql_fetch_array($result)){
$messages[$i] = '<p class="purple"><span class="pink"><strong>'. $row[name] . '</strong></span> said:<br /><span class="purple">' . $row[message] . '</span><br /> <span class="pink">';

$timeago = time() - $row['time'];
if($timeago > 86400){
$messages[$i] .= date('g:i A M, d Y',$row[time]);
}
else{
$hours = floor($timeago / 3600); 
$minutes = floor(($timeago - ($hours * 3600)) / 60);
$seconds = floor($timeago - ($hours * 3600) - ($minutes * 60));
if($hours > 0){
if($minutes > 9){
if($seconds > 9){
$messages[$i] .= $hours . ' h, ' . $minutes . ' min, ' . $seconds . ' sec';
}
else{
$messages[$i] .= $hours . ' h, ' . $minutes . ' min, 0' . $seconds . ' sec';
}
}
else{
if($seconds > 9){
$messages[$i] .= $hours . ' h, 0' . $minutes . ' min, ' . $seconds . ' sec';
}
else{
$messages[$i] .= $hours . ' h, 0' . $minutes . ' min, 0' . $seconds . ' sec';
}
}
}
else if($minutes > 0){
if($seconds > 9){
$messages[$i] .= $minutes . ' min, ' . $seconds . ' sec';
}
else{
$messages[$i] .= $minutes . ' min, 0' . $seconds . ' sec';
}
}
else{
$messages[$i] .= $seconds . ' sec';
}
$messages[$i] .= ' ago';
}
$messages[$i] .= "</span></p><p class='purple'>----------------------------</p>";
$old = $row[time];
$i++;
}
for($i=0;$i<=9;$i++){
echo $messages[$i];
}
mysql_query("delete from chat where time < " . $old);
$random = microtime(true);
echo '<p><a href="?'.$random.'">Refresh Chat</a></p>';
?>

send.php

<?php
//Connect to MySQL
mysql_connect('******', '******', '******') or die (1);
//Select database
mysql_select_db('chat') or die (2);
$message = $_GET['message']; 
$name = $_GET['name'];
//Check if message is empty and send the error code
if(strlen($message) < 1){
echo 3;
}
//Check if message is too long
else if(strlen($message) > 255){
   echo 4;
}
//Check if name is empty
else if(strlen($name) < 1){
   echo 5;
}
//Check if name is too long
else if(strlen($name) > 29){
   echo 6;
}
//Check if the name is used by somebody else
else if(mysql_num_rows(mysql_query("select * from chat where name = '" . $name . "' and ip != '" . $_SERVER['REMOTE_ADDR'] . "'")) != 0){
   echo 7;
}
//If everything is fine
else{
   //This array contains the characters what will be removed from the message and name, because else somebody could send redirection script or links
   $search = array("<",">","&gt;","&lt;");
   //Insert a new row in the chat table
   mysql_query("insert into chat values ('" . time() . "', '" . str_replace($search,"",$name) . "', '" . $_SERVER['REMOTE_ADDR'] . "', '" . str_replace($search,"",$message) . "')") or die(8);
}
?>

Какие изменения я могу внести в файл .wav для воспроизведения, если и когда будет сделано новое сообщение? Спасибо .....

1 Ответ

1 голос
/ 15 ноября 2011

Поскольку функция showmessages () - это то, что вызывает show-messages.php через AJAX, опция обратного вызова была бы хорошей.Рассматривали ли вы использование jQuery в качестве платформы AJAX ?Я пользуюсь этим все время.Он имеет невероятные обработчики для результатов различного типа (мой любимый - возвращение JSON), и есть функции обратного вызова, которые нужно запустить после завершения функции, которую вы можете настроить.

При обратном вызове, если вы можете запустить воспроизводимый звук, он будет идеальным.Однако я не знаком с воспроизведением музыки на сайтах (за исключением того старого способа встраивания файла .wav в HTML, который воспроизводится в фоновом режиме, но это так для Web 1.0, а не 2.0).

Вот плагин через jQuery , который, как я обнаружил, может выполнять воспроизведение определенного шума, сохраненного на сервере: http://plugins.jquery.com/project/sound_plugin

Используя эти два, вы можете получитья уверен, это сделано в кратчайшие сроки.

РЕДАКТИРОВАТЬ:

function showmessages(){
    $.get("show-messages.php", { random: Math.random()},
   function(data){
        $('#messages').html(data); // put teh return data here
        // call back the function to play sound based on the jQuery plugin. 
   });
}

Выше приведен более простой запрос AJAX, который вы можете установить вместо текущей функции showmessage ().

Далее, если вы хотите получить более сложный результат с несколькими массивами в нем, используя jSON (представьте его как массив PHP, за исключением формы объекта javascript).Также обратите внимание на функцию json_encode () в PHP, которая создает объект JSON из любого массива PHP (даже многоуровневого, за исключением объектов PHP, я думаю)

function showmessages(){
    $.get("show-messages.php", { random: Math.random()},
   function(data){
       if(data.code==1) {
           // assuming 1 means successful
            $('#messages').html(data.content); // put teh return data here
        // call back the function to play sound based on the jQuery plugin.
       } else {
           // execute code that runs IF the result was no good
       }
   },'json');
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...