Alerte sonore Nouveau Message Tchat / js / jquery / ajax

**budfoxob** · 07/06/2014, 16h36

Bonjour à tous,

grand utilisateur du forum, j'ai toujours trouvé une solution à mes problèmes mais la je coince,

je sollicite donc pour la seconde fois (la première fois avait été une super aide) votre aide sur un problème que j'ai en ce moment.

(à noter que je suis très débutant avec quelques bases)

Voilà, j'ai crée pour un petit que je suis entrain de faire, un chat en php/js, tout ce qu'il y a de plus simple, avec envoi d'un message, affichage du message et du pseudo.

Le chat fonctionne parfaitement, on peut envoyer, recevoir des messages... mon seul soucis est que je souhaiterai ajouter une alerte sonore lorsqu'un nouveau message
est reçu sur le chat, malheureusement impossible de trouver mon bonheur bien qu'ayant parcouru les forums, et beaucoup de sites?

Pour que ce soit plus clair voici mon code.
j'ai 3 pages. Une page Html avec le formulaire "pseudo" et "texte", une seconde page Php qui traite les informations du formulaire et enfin un page Javascript qui permet
d'actualiser ma div dans mon fichier Html afin de recevoir les messages postés.

- Page Html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<title>Mini-Chat</title>
<script type="text/javascript" src="minichat.js"></script>
</head>
<body onload="refreshChat();">
 
<h1>Mini-Chat</h1>
 
<div id="minichat"></div>
 
<p>
Pseudo : <br/><input type="text" name="pseudo" id="pseudo" /><br />
Message : <br/><textarea name="message" rows="5" cols="30" id="message"></textarea><br />
<input type="button" value="Envoyer" onclick="submitChat();" />
</p>
 
 
 
 
</body>
</html>

Et voici mon fichier Javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function getXMLHttpRequest() {
	var xhr = null;
 
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
 
	return xhr;
}
 
 
function refreshChat()
{
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                document.getElementById('minichat').innerHTML = xhr.responseText; // DonnÈes textuelles rÈcupÈrÈes
        }
};
 
xhr.open("GET", "minichat.php", true);
xhr.send(null);
}
 
function submitChat()
{
var xhr = getXMLHttpRequest();
var pseudo = encodeURIComponent(document.getElementById('pseudo').value);
var message = encodeURIComponent(document.getElementById('message').value);
document.getElementById('message').value = ""; // on vide le message sur la page
 
xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                document.getElementById('minichat').innerHTML = xhr.responseText; // DonnÈes textuelles rÈcupÈrÈes
        }
};
 
xhr.open("POST", "minichat.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("pseudo="+pseudo+"&message="+message);
 
}
var timer=setInterval("refreshChat()", 5000);

Si quelqu'un aurait une solution ou astuce afin que l'on puisse entendre un petit son dès qu'on reçoit un nouveau message,
je vous en serait très reconnaissant.

Merci beaucoup par avant de votre aide.

**Watilin** · 07/06/2014, 17h20

Salut,

il te manque un mécanisme de mémorisation. Une simple variable JavaScript ferait l'affaire : l'idée est de mémoriser la dernière information reçue par refreshChat afin de voir s'il y a une différence avec la nouvelle. Et s'il y a une différence, cela signifie qu'il y a de nouveaux messages, et tu peux alors émettre une alerte sonore.

Dans l'idéal, tu devrais stocker l'id ou le timestamp du dernier message reçu et l'indiquer au serveur lors de tes requêtes refresh. Ainsi, le serveur peut renvoyer uniquement les nouveaux messages, et tu économises du trafic réseau.

Pour jouer un son avec JavaScript, il y a plusieurs moyens. J'en citerai deux :

Flash
La balise HTML5 <audio>

Je te laisse te documenter sur l'une ou l'autre de ces solutions, qui ont chacune leurs avantages et inconvénients, mais sont toutes deux relativement faciles à mettre en œuvre. Bon courage

**SylvainPV** · 07/06/2014, 19h02

Voilà une fonction point de départ avec le tag <audio>, sachant qu'il y a des considérations supplémentaires à avoir en terme de support, format, optimisation du chargement etc... Mais si tu veux un truc simple qui marche sur les bons navigateurs :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>    
var playSound = (function(){
  var s,
      sounds = {},
      soundUrls = {
    laser: "http://www.soundjay.com/button/button-5.mp3"
  };
  
  for(s in soundUrls){
    sounds[s] = new Audio(soundUrls[s]);
    sounds[s].preload = 'auto';
    sounds[s].load();
  }
   
   return function(soundname){
     if(soundname in sounds){
       sounds[soundname].play();
     }
   };
})();
  </script>
  <button onclick="playSound('laser')">Play sound</button>

http://jsbin.com/nazasumu/1/watch?html,js,output

Alerte sonore Nouveau Message Tchat / js / jquery / ajax

JavaScript

Discussions similaires

Partager

Partager