Discussion :

[Lignite]

Bonjour,

j'ai un chat qui marche bien mais j'aimerais pour soulager le système qu'il ne tente pas de réactualiser le fil de discussion quand l'utilisateur est sur un autre onglet.

J'ai tenté ceci mais la commande en ligne 74 n'est jamais exécutée.

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script type="text/javascript">
	// Initialiser le chat
	var sendReq = getXmlHttpRequestObject();
	var receiveReq = getXmlHttpRequestObject();
	var mTimer;
 
	$(document).ready(function() {
		// Focus sur la page ?
		document.onblur = window.onblur;
		document.focus = window.focus;
		//Set the focus to the Chat Message Box
		document.getElementById('txt_message').focus();
		//Start Recieving Messages.
		getChatText();
	});
 
	//Gets the browser specific XmlHttpRequest Object
	function getXmlHttpRequestObject() {
		if (window.XMLHttpRequest) {
			return new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			return new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.';
		}
	}
 
	//Gets the current messages from the server
	function getChatText() {
		if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
			receiveReq.open("GET", 'getChat.php?chat=1&last=' + lastMessage, true);
			receiveReq.onreadystatechange = handleReceiveChat; 
			receiveReq.send(null);
		}			
	}
	//Add a message to the chat server.
	function sendChatText() {
		if(document.getElementById('txt_message').value == '') {
			alert("You have not entered a message");
			return;
		}
		if (sendReq.readyState == 4 || sendReq.readyState == 0) {
			sendReq.open("POST", 'getChat.php?chat=1&last=' + lastMessage, true);
			sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			sendReq.onreadystatechange = handleSendChat; 
			var param = 'message=' + document.getElementById('txt_message').value;
			param += '&userID=<?php echo $userID; ?>&name=<?php echo $username; ?>';
			sendReq.send(param);
			document.getElementById('txt_message').value = '';
		}							
	}
	//When our message has been sent, update our page.
	function handleSendChat() {
		//Clear out the existing timer so we don't have 
		//multiple timer instances running.
		clearInterval(mTimer);
		getChatText();
	}
	function handleReceiveChat() {
		if (receiveReq.readyState == 4) {
			//Get a reference to our chat container div for easy access
			var chat_div = document.getElementById('div_chat');
			//Get the AJAX response and run the JavaScript evaluation function
			//on it to turn it into a useable object.  Notice since we are passing
			//in the JSON value as a string we need to wrap it in parentheses
			var response = eval("(" + receiveReq.responseText + ")");
			for(i=0;i < response.messages.message.length; i++) {
				chat_div.innerHTML += '<font class="chat_user">' + response.messages.message[i].time +  '&nbsp;&nbsp;' + response.messages.message[i].user + '</font>&nbsp;:&nbsp;';
				chat_div.innerHTML += response.messages.message[i].text + '<br />';
				chat_div.scrollTop = chat_div.scrollHeight;
				lastMessage = response.messages.message[i].id;
			}
			window.onfocus = function (){
				mTimer = setTimeout('getChatText();',10000); //Refresh our chat in 10 seconds
			}
		}
	}
	//This functions handles when the user presses enter.  Instead of submitting the form, we
	//send a new message to the server and return false.
	function blockSubmit() {
		sendChatText();
		return false;
	}
	//This function handles the response after the page has been refreshed.
	function handleResetChat() {
		document.getElementById('div_chat').innerHTML = '';
		getChatText();
	}
</script>

[NoSmoking]

Bonjour,
pourquoi ce mélange de jQuery et de javascript « vanilla » ?

Code :

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

1
2
3
$(window).focus(function(){
 
});

regarde bien l'enchaînement des actions, comme tu utilises un setTimeout il te faut le relancer judicieusement et/ou l'arrêter lorsque la page perd le focus.

[Lignite]

Bonjour,

merci pour cette piste. Pour répondre à ta question : je n'ai jamais appris à programmer en JavaScript alors je mélange ce que je trouve sur Internet et suis content dès lors que ça marche

Je vais lire ce site : vanilla-js.com et proposer sur le forum un code plus propre.

[NoSmoking]

Tu peux également regarder du coté de Utiliser l'API PageVisibility.

[Lignite]

Merci pour ce lien, sympa. Je vais voir comment utiliser cette api.

Voilà mon code modifié. Si vous voyez quelque chose de bizarre

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
var lastMessage = 0;
var nr = 7;
var mTimer;
 
$(function() {
	//Set the focus to the Chat Message Box
	$("txt_message").focus();
	//Start Recieving Messages.
	getChatText();
});
 
//Add a message to the chat server	
$("#btn_send_chat").click(function(){
	sendChatText()
});
 
$("#frmmain").submit(function(event){
	sendChatText()
});
 
function sendChatText() {
	if($('#txt_message').val() == '') {
		alert("You have not entered a message");
		return;
	}
	$.ajax({
		type: "POST",
		url: "/takeChat.php",
		data: {
			'last' : lastMessage,
			'userID' : userID,
			'name' : username,
			'message' : $('#txt_message').val()
		},
		dataType: 'json'
		})
		.done(function(data) {
			clearInterval(mTimer);
			handleReceiveChat(data);
		})
		.fail(function() {
		  alert("Ajax failed to fetch data")
		})
		$('#txt_message').val('');
}
 
 
//Gets the current messages from the server
function getChatText() {
	//Start Recieving Messages.
	$.ajax({
		type: "POST",
		url: "/takeChat.php",
		data: {
			'last' : lastMessage,
			'userID' : userID,
			'name' : username
		},
		dataType: 'json'
		})
		.done(function(data) {
			handleReceiveChat(data)
		})
		.fail(function() {
			alert("Ajax failed to fetch data")
		})
	});
}
 
function handleReceiveChat(data) {
	NBmessages = lastMessage;
	var content = "";
	for (var i = 0; i < data.messages.message.length; i++) {
		content += '<font class="chat_user">' + data.messages.message[i].time +  '&nbsp;&nbsp;' + data.messages.message[i].user + '</font>&nbsp;:&nbsp;';
		content += data.messages.message[i].text + '<br />';
		if (lastMessage < data.messages.message[i].id) {
			if (NBmessages > 0) {
				document.querySelector("#nouveauChat").play();
			}
			lastMessage = data.messages.message[i].id;
		 }
	  }
	  $("#div_chat").append(content);
	  $("#div_chat").animate({ scrollTop: $("#div_chat").height()+30 }, 1000);
	  mTimer = setTimeout('getChatText();',10000);
}