Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Dodanie powidomienia dźwiękowego w daddy-shoutbox
maciek9669
post 4.02.2015, 10:55:20
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 3.02.2015

Ostrzeżenie: (0%)
-----

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

Ten post edytował maciek9669 4.02.2015, 11:09:49
Go to the top of the page
+Quote Post
rad11
post 4.02.2015, 14:53:18
Post #2





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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


Ten post edytował rad11 4.02.2015, 15:02:28
Go to the top of the page
+Quote Post
maciek9669
post 4.02.2015, 16:56:51
Post #3





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 3.02.2015

Ostrzeżenie: (0%)
-----

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

Ten post edytował maciek9669 4.02.2015, 17:00:42
Go to the top of the page
+Quote Post
rad11
post 4.02.2015, 20:10:05
Post #4





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

pokaz kod files+"daddy-shoutbox.php?action=view&time="+lastTime tego pliku.
Go to the top of the page
+Quote Post
maciek9669
post 4.02.2015, 23:27:37
Post #5





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 3.02.2015

Ostrzeżenie: (0%)
-----

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

Ten post edytował maciek9669 4.02.2015, 23:29:32
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 31.07.2025 - 09:53
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn