Alerte sonore Nouveau Message Tchat / js / jquery / ajax
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:
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:
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.
