Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dodanie powidomienia dźwiękowego w daddy-shoutbox
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
maciek9669
4.02.2015, 10:55:20
Nw czy to dobre miejsce do zadania tego pytania
Chciałbym dodać do shoutboxa opartego na daddy-shoutbox dodać dzwięk po nadejściu nowej widomości lub przynajmniej po odświeżeniu pola z wiadomościami ale nie mam pojęcia jak js dopiero się uczę
bazuje na kilku plikach

index
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html><head>
  3.  
  4. 	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2">
  5.  
  6.   <style type="text/css">
  7. 	body {
  8. 	background: url('http://tag.16mb.com/bg.jpg') repeat fixed;
  9. 	font-size: 18px;
  10. 	font-family: Arial,Helvetica,sans-serif;
  11. 	}
  12. 	#daddy-shoutbox {
  13.       padding: 5px;
  14.       background: url('http://tag.16mb.com/bgs.jpg') repeat fixed;
  15.       color: white;
  16.       width: 500px;
  17.       font-family: Arial,Helvetica,sans-serif;
  18.       font-size: 11px;
  19. 	}
  20. 	#tab {
  21. 	 font-size: 14px;
  22. 	}
  23.     .shoutbox-list {
  24.       border-bottom: 1px solid #083030;
  25.  
  26.       padding: 5px;
  27.       display: none;
  28.     }
  29.     #daddy-shoutbox-list {
  30.       text-align: left;
  31.       margin: 0px auto;
  32.     }
  33.     #daddy-shoutbox-form {
  34.       text-align: left;
  35.  
  36.     }
  37.     .shoutbox-list-time {
  38.       color: #8DA2B4;
  39.     }
  40.     .shoutbox-list-nick {
  41.       margin-left: 15px;
  42.       font-weight: bold;
  43.     }
  44.     .shoutbox-list-message {
  45.       margin-left: 15px;
  46.     }
  47.   </style>
  48.   <title>Czat</title>
  49.   <script type="text/javascript" src="Czat_pliki/jquery.js"></script>
  50.   <script type="text/javascript" src="Czat_pliki/jquery_002.js"></script>
  51. </head>
  52.   <body alink="white" link="white" vlink="white">
  53.     <center>
  54. 	<div id="tab">
  55. 	<table align="center" border="0" cellspacing="1" height="25" width="512">
  56. 	<tbody><tr>
  57. 	<td align="center" background="Czat_pliki/bgs.jpg">
  58. 	<a href="http://tag.16mb.com/" style="text-decoration: none;">ZWZST</a>
  59. 	</td>
  60. 	<td align="center" background="Czat_pliki/bgs.jpg">
  61. 	<a href="http://tag.16mb.com/2/" style="text-decoration: none;">Kanał 2</a>
  62. 	</td>
  63. 	<td align="center" background="Czat_pliki/bgs.jpg">
  64. 	<a href="http://tag.16mb.com/3/" style="text-decoration: none;">Kanał 3</a>
  65. 	</td>
  66. 	<td align="center" background="Czat_pliki/bgs.jpg">
  67. 	<a href="http://tag.16mb.com/4/" style="text-decoration: none;">Kanał 4</a>
  68. 	</td>
  69. 	</tr>
  70. 	</tbody></table>
  71. 	</div>
  72. 	<div id="daddy-shoutbox">
  73.     <div id="daddy-shoutbox-list"></div>
  74.     <br>
  75.     <center><form id="daddy-shoutbox-form" action="daddy-shoutbox.php?action=add" method="post"> 
  76. 	<br>
  77.     Tekst: <input name="message" style="white-space:pre-wrap; margin-left: 20px; width:400px">
  78. 	<br>
  79. 	<br>
  80. 	Nick: <input name="nickname" style="margin-left: 25px;" type="text">
  81.     <input value="Wyslij" type="submit">
  82.     <span id="daddy-shoutbox-response"></span>
  83.     </form>
  84. 	<div id="clear-button" style="text-align: right;">
  85. 	<form style="align: right;" action="clear.php"><input value="Clear" type="submit"></form></div></center>
  86. 	</div>
  87.  
  88.   </center>
  89.  
  90.   <script type="text/javascript">
  91.         var count = 0;
  92.         var files = '';
  93.         var lastTime = 0;
  94.  
  95.         function prepare(response) {
  96.           var d = new Date();
  97.           count++;
  98.           d.setTime(response.time*1000);
  99.           var mytime = d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
  100.           var string = '<div class="shoutbox-list" id="list-'+count+'">'
  101.               + '<span class="shoutbox-list-time">'+mytime+'</span>'
  102.               + '<span class="shoutbox-list-nick">'+response.nickname+':</span>'
  103.               + '<span class="shoutbox-list-message">'+response.message+'</span>'
  104.               +'</div>';
  105.  
  106.           return string;
  107.         }
  108.  
  109.         function success(response, status)  { 
  110.           if(status == 'success') {
  111.             lastTime = response.time;
  112.             $('#daddy-shoutbox-response').html('<img src="'+files+'images/accept.png" />');
  113.             $('#daddy-shoutbox-list').append(prepare(response));
  114.             $('input[@name=message]').attr('value', '').focus();
  115.             $('#list-'+count).fadeIn('slow');
  116.             timeoutID = setTimeout(refresh, 3000);
  117.           }
  118.         }
  119.  
  120.         function validate(formData, jqForm, options) {
  121.           for (var i=0; i < formData.length; i++) { 
  122.               if (!formData[i].value) {
  123.                   alert('Uzupełnij wszystkie pola!'); 
  124.                   $('input[@name='+formData[i].name+']').css('background', 'red');
  125.                   return false; 
  126.               } 
  127.           } 
  128.           $('#daddy-shoutbox-response').html('<img src="http://tag.16mb.com/loader.gif" />');
  129.           clearTimeout(timeoutID);
  130.         }
  131.  
  132.         function refresh() {
  133.  
  134.           $.getJSON(files+"daddy-shoutbox.php?action=view&time="+lastTime, function(json) {
  135.             if(json.length) {
  136.               for(i=0; i < json.length; i++) {
  137.                 $('#daddy-shoutbox-list').append(prepare(json[i]));
  138.                 $('#list-' + count).fadeIn('slow');
  139.               }
  140.               var j = i-1;
  141.               lastTime = json[j].time;
  142.             }
  143.             //alert(lastTime);
  144.           });
  145.           timeoutID = setTimeout(refresh, 3000);
  146.         }
  147.  
  148.         // wait for the DOM to be loaded 
  149.         $(document).ready(function() { 
  150.             var options = { 
  151.               dataType:       'json',
  152.               beforeSubmit:   validate,
  153.               success:        success
  154.             }; 
  155.             $('#daddy-shoutbox-form').ajaxForm(options);
  156.             timeoutID = setTimeout(refresh, 100);
  157.         });
  158.   </script>
  159.   <center><a style="text-decoration: none; color: black;"><font color="#083030" size="10">IP: <script language="JavaScript" type="text/javascript" src="Czat_pliki/adres_ip.htm"></script>91.206.211.201</font></a></center>
  160.  
  161. </body></html>
[HTML] pobierz, plaintext


link do czatu Czat
link do plików użytych w Shutbox pliki
rad11
4.02.2015, 14:53:18
Tam gdzie pobierasz dane , sprawdz czy jest to nowa wiadomosc jezeli jest to uruchom:

[PHP] pobierz, plaintext 
  1. $('audio').attr('autoplay', 'true')
[PHP] pobierz, plaintext


a w strukturze html gdzie usmiesc:

[HTML] pobierz, plaintext 
  1. <audio controls style="display:none;">
  2.   <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  3.   <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  4. </audio>
[HTML] pobierz, plaintext
maciek9669
4.02.2015, 16:56:51
Cytat(rad11 @ 4.02.2015, 14:53:18 ) *
Tam gdzie pobierasz dane , sprawdz czy jest to nowa wiadomosc jezeli jest to uruchom:

[PHP] pobierz, plaintext 
  1. $('audio').attr('autoplay', 'true')
[PHP] pobierz, plaintext

A mogłbyś wyjaśnic gdzie dokładnie bo sczerze mówiąc umiem dopiero podstawy podstaw JS. To był gotowy czat skonfigurowałem go pod siebie go pod siebie został mi tylko ten dźwięk...
rad11
4.02.2015, 20:10:05
pokaz kod files+"daddy-shoutbox.php?action=view&time="+lastTime tego pliku.
maciek9669
4.02.2015, 23:27:37
Trochę kombinowałem. Wstawiłem to co kazałeś
do index.htm 
[HTML] pobierz, plaintext 
  1.  function refresh() {
  2.  
  3.           $.getJSON(files+"daddy-shoutbox.php?action=view&time="+lastTime, function(json) {
  4.  
  5. 		  if(json.length) {
  6. 			$('audio').attr('autoplay', 'true');
  7.               for(i=0; i < json.length; i++) {
  8.  
  9.                 $('#daddy-shoutbox-list').append(prepare(json[i]));
  10.  
  11. 				$('#list-' + count).fadeIn('slow');
  12.  
  13.  
  14.               }
[HTML] pobierz, plaintext

ale dzwięk jest tylko kiedy wyczyszczę stronę button-em "clear" i wprowadzę jedną wiadomość


daddy-shoutbox
[PHP] pobierz, plaintext 
  1. <?php header('Content-Type: text/html; charset=utf-8'); ?>
  2. <?php 
  3.  
  4. function replace(&$item, $key) {
  5. $item = str_replace('|', '-', $item);
  6. }
  7. if (!function_exists('file_put_contents')) {
  8. function file_put_contents($fileName, $data) {
  9. if (is_array($data)) {
  10. $data = join('', $data);
  11. }
  12. $res = @fopen($fileName, 'w+b');
  13. if ($res) {
  14. $write = @fwrite($res, $data);
  15. if($write === false) {
  16. return false;
  17. } else {
  18. return $write;
  19. }
  20. }
  21. }
  22. }
  23. //file_put_contents('debug.txt', print_r($_GET, true));
  24. switch($_GET['action']) {
  25. case 'add':
  26. array_walk($_POST, 'replace');
  27. $arr = file('messages.txt');
  28. if(count($arr) > 10)
  29. array_shift($arr);
  30. $_POST['nickname'] = htmlentities($_POST['nickname'], ENT_COMPAT, 'utf-8');
  31. $_POST['message'] = htmlentities($_POST['message'], ENT_COMPAT, 'utf-8');
  32. $time = time();
  33. $arr[] = $time.'|'.$_POST['nickname'].'|'.$_POST['message'].'|'.$_SERVER['REMOTE_ADDR']."\n";
  34. file_put_contents('messages.txt', implode('', $arr));
  35. $data['response'] = 'Good work';
  36. $data['nickname'] = $_POST['nickname'];
  37. $data['message'] = $_POST['message'];
  38. $data['time'] = $time;
  39. break;
  40. case 'view':
  41. $data = array();
  42. $arr = file('messages.txt');
  43. if(!$_GET['time'])
  44. $_GET['time'] = 0;
  45. foreach($arr as $row) {
  46. $aTemp = null;
  47. list($aTemp['time'], $aTemp['nickname'], $aTemp['message']) = explode('|', $row);
  48. if($aTemp['message'] AND $aTemp['time'] > $_GET['time'])
  49. $data[] = $aTemp;
  50. }
  51. //file_put_contents('debug.txt', print_r($data, true));
  52. break;
  53. }
  54. require_once('JSON.php');
  55. $json = new Services_JSON();
  56. $out = $json->encode($data);
  57. print $out;
  58. ?>
[PHP] pobierz, plaintext


JSON.php LINK
w postaci bezpośredniego linku do pliku bo nie zmieścił sie plik w poście
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.