Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Andrew Marques

Dica para solução (PHP + jQuery + Ajax)

Por , em Javascript

Recommended Posts

Andrew Marques    47

Andrew Marques
Postado

Boa noite galera,

 

to fazendo um sistema de chat...

 

fiz a parte de entrada, que o usuario coloca as informações vai pra uma pagina que espera o atendente entrar, dps que o atendente entra vai pro chat...

 

consegui fazer tudo atualizar com ajax + php + mysql...

 

o problema é que faço a execução para verificar novas mensagens de 5 em 5 segundos, e nessa função tenho uma função para fazer o scroll do chat ficar sempre no fundo, pq as mensagens são inseridas no fim...

 

tudo funcionando perfeito! o problema está quando o usuario rola a pagina pra cima, pra olhar mensagens antigas, o usuário está olhando mais em cima do chat de repente o chat desce, por causa da função que atualiza e manda o scroll pro fim...

 

mesmo não tendo mensagens novas ele vai pro fim..

 

alguem tem uma solução ou dica?

 

segue código:

 

function inicia_chat(){ var form = $('#dados_atendimento'); form.submit(function(){ return false; }); form.ajaxSubmit({ url:"crud.php", data: {acao: "iniciar_chat"}, success: function(resposta){ if(resposta == 0){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("aviso"); $("#mensagens_dados_atendimento").text("Preencha todos os campos corretamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 1){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("erro"); $("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 2){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("sucesso"); $("#mensagens_dados_atendimento").text("Iniciando atendimento..."); $(".mensagens_dados_atendimento").fadeIn("fast"); window.setTimeout(function(){ form.fadeOut("fast"); $("#barra_verde p").html("Estamos contactando um atendente, por favor aguarde..."); $("#carregando_chat").fadeIn("fast"); window.setInterval(function(){ $.ajax({ type: "POST", url: "crud.php", data: { acao: 'verifica_atendente' }, success: function ( resposta ){ if(resposta == 'erro'){ form.fadeIn("fast"); $("#barra_verde p").html("Preencha seus dados para iniciar o atendimento."); $("#carregando_chat").fadeOut("fast"); $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("erro"); $("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 0){ }else if(resposta != 'erro' && resposta != 0){ var result = resposta.split("&"); var nomeAtendente = result[0]; var dataInicio = result[1]; var horaInicio = result[2]; $("#barra_verde p").html("Você está online atualmente com <b>"+nomeAtendente+"</b>."); $("#atendimento_iniciado p").html("Atendimento iniciado em <b>"+dataInicio+"</b> às <b>"+horaInicio+"</b>."); $("#carregando_chat").fadeOut("fast"); $("#chat_online").fadeIn(500); } } }); verifica_style_chat(); }, 1000); }, 2000); } } }); } function verifica_style_chat(){ var chat = $("#chat_online").attr("style"); if(chat == 'display:none'){ }else if(chat == ''){ atualiza_chat(); } } function atualiza_chat(){ window.setInterval(function(){ $.ajax({ type: "POST", url: "crud.php", data: { acao: 'atualiza_chat' }, success: function ( resposta ){ $("#chat").html(resposta); var chatScroll = $('#chat_scroll').height(); $('#chat_scroll').scrollTop(chatScroll); } }); }, 5000); }; </script>Boa noite galera,

 

to fazendo um sistema de chat...

 

fiz a parte de entrada, que o usuario coloca as informações vai pra uma pagina que espera o atendente entrar, dps que o atendente entra vai pro chat...

 

consegui fazer tudo atualizar com ajax + php + mysql...

 

o problema é que faço a execução para verificar novas mensagens de 5 em 5 segundos, e nessa função tenho uma função para fazer o scroll do chat ficar sempre no fundo, pq as mensagens são inseridas no fim...

 

tudo funcionando perfeito! o problema está quando o usuario rola a pagina pra cima, pra olhar mensagens antigas, o usuário está olhando mais em cima do chat de repente o chat desce, por causa da função que atualiza e manda o scroll pro fim...

 

mesmo não tendo mensagens novas ele vai pro fim..

 

alguem tem uma solução ou dica?

 

segue código:

 

function inicia_chat(){ var form = $('#dados_atendimento'); form.submit(function(){ return false; }); form.ajaxSubmit({ url:"crud.php", data: {acao: "iniciar_chat"}, success: function(resposta){ if(resposta == 0){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("aviso"); $("#mensagens_dados_atendimento").text("Preencha todos os campos corretamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 1){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("erro"); $("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 2){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("sucesso"); $("#mensagens_dados_atendimento").text("Iniciando atendimento..."); $(".mensagens_dados_atendimento").fadeIn("fast"); window.setTimeout(function(){ form.fadeOut("fast"); $("#barra_verde p").html("Estamos contactando um atendente, por favor aguarde..."); $("#carregando_chat").fadeIn("fast"); window.setInterval(function(){ $.ajax({ type: "POST", url: "crud.php", data: { acao: 'verifica_atendente' }, success: function ( resposta ){ if(resposta == 'erro'){ form.fadeIn("fast"); $("#barra_verde p").html("Preencha seus dados para iniciar o atendimento."); $("#carregando_chat").fadeOut("fast"); $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("erro"); $("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 0){ }else if(resposta != 'erro' && resposta != 0){ var result = resposta.split("&"); var nomeAtendente = result[0]; var dataInicio = result[1]; var horaInicio = result[2]; $("#barra_verde p").html("Você está online atualmente com <b>"+nomeAtendente+"</b>."); $("#atendimento_iniciado p").html("Atendimento iniciado em <b>"+dataInicio+"</b> às <b>"+horaInicio+"</b>."); $("#carregando_chat").fadeOut("fast"); $("#chat_online").fadeIn(500); } } }); verifica_style_chat(); }, 1000); }, 2000); } } }); } function verifica_style_chat(){ var chat = $("#chat_online").attr("style"); if(chat == 'display:none'){ }else if(chat == ''){ atualiza_chat(); } } function atualiza_chat(){ window.setInterval(function(){ $.ajax({ type: "POST", url: "crud.php", data: { acao: 'atualiza_chat' }, success: function ( resposta ){ $("#chat").html(resposta); var chatScroll = $('#chat_scroll').height(); $('#chat_scroll').scrollTop(chatScroll); } }); }, 5000); }; </script>Boa noite galera,

 

to fazendo um sistema de chat...

 

fiz a parte de entrada, que o usuario coloca as informações vai pra uma pagina que espera o atendente entrar, dps que o atendente entra vai pro chat...

 

consegui fazer tudo atualizar com ajax + php + mysql...

 

o problema é que faço a execução para verificar novas mensagens de 5 em 5 segundos, e nessa função tenho uma função para fazer o scroll do chat ficar sempre no fundo, pq as mensagens são inseridas no fim...

 

tudo funcionando perfeito! o problema está quando o usuario rola a pagina pra cima, pra olhar mensagens antigas, o usuário está olhando mais em cima do chat de repente o chat desce, por causa da função que atualiza e manda o scroll pro fim...

 

mesmo não tendo mensagens novas ele vai pro fim..

 

alguem tem uma solução ou dica?

 

segue código:

 

function inicia_chat(){
		
			var form 	= $('#dados_atendimento');
			
			form.submit(function(){
				return false;
			});
			
			form.ajaxSubmit({
				url:"crud.php",
				data: {acao: "iniciar_chat"},
				success: function(resposta){
					if(resposta == 0){
						$("#mensagens_dados_atendimento").attr("class","");
						$("#mensagens_dados_atendimento").addClass("aviso");
						$("#mensagens_dados_atendimento").text("Preencha todos os campos corretamente!");
						$(".mensagens_dados_atendimento").fadeIn("fast");
					}else if(resposta == 1){
						$("#mensagens_dados_atendimento").attr("class","");
						$("#mensagens_dados_atendimento").addClass("erro");
						$("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!");
						$(".mensagens_dados_atendimento").fadeIn("fast");
					}else if(resposta == 2){
						$("#mensagens_dados_atendimento").attr("class","");
						$("#mensagens_dados_atendimento").addClass("sucesso");
						$("#mensagens_dados_atendimento").text("Iniciando atendimento...");
						$(".mensagens_dados_atendimento").fadeIn("fast");
						window.setTimeout(function(){
							form.fadeOut("fast");
							$("#barra_verde p").html("Estamos contactando um atendente, por favor aguarde...");
							$("#carregando_chat").fadeIn("fast");
							
							window.setInterval(function(){
								$.ajax({
									type: "POST",
									url: "crud.php",
									data: { acao: 'verifica_atendente' },
									success: function ( resposta ){
										if(resposta == 'erro'){
											form.fadeIn("fast");
											$("#barra_verde p").html("Preencha seus dados para iniciar o atendimento.");
											$("#carregando_chat").fadeOut("fast");
											$("#mensagens_dados_atendimento").attr("class","");
											$("#mensagens_dados_atendimento").addClass("erro");
											$("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!");
											$(".mensagens_dados_atendimento").fadeIn("fast");
										}else if(resposta == 0){
										}else if(resposta != 'erro' && resposta != 0){
											var result = resposta.split("&");
											var nomeAtendente = result[0];
											var dataInicio = result[1];
											var horaInicio = result[2];
											
											$("#barra_verde p").html("Você está online atualmente com <b>"+nomeAtendente+"</b>.");
											$("#atendimento_iniciado p").html("Atendimento iniciado em <b>"+dataInicio+"</b> às <b>"+horaInicio+"</b>.");
											$("#carregando_chat").fadeOut("fast");
											$("#chat_online").fadeIn(500);
										}
									}
								});
								verifica_style_chat();
							}, 1000);
							
						}, 2000);
					}
				}
			});
		}
		
		function verifica_style_chat(){
			var chat = $("#chat_online").attr("style");
			if(chat == 'display:none'){
			}else if(chat == ''){
				atualiza_chat();
			}
		}
		
		function atualiza_chat(){
			window.setInterval(function(){
				$.ajax({
					type: "POST",
					url: "crud.php",
					data: { acao: 'atualiza_chat' },
					success: function ( resposta ){
						$("#chat").html(resposta);
						var chatScroll = $('#chat_scroll').height();
						$('#chat_scroll').scrollTop(chatScroll);
					}
				});
			}, 5000);
		};
		</script>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fiote    24

Fiote
Postado

Repare nisso aqui:

 

function atualiza_chat() {
    window.setInterval(function () {
        $.ajax({
            type: "POST",
            url: "crud.php",
            data: {
                acao: 'atualiza_chat'
            },
            success: function (resposta) {
                $("#chat").html(resposta);
                var chatScroll = $('#chat_scroll').height();
                $('#chat_scroll').scrollTop(chatScroll);
            }
        });
    }, 5000);
};

 

Em nenhum momento (no javascript) você checa se existem mensgens novas. Você simplesmente atualiza o conteúdo do #chat com a resposta que vem do servidor.

 

Existem formas (bem) melhores de fazer o check, mas vou sugerir aqui a que vai dar MENOS trabalho:

 

1) Adicione logo no começo (tipo primeira linha!) do seu código uma variável global (sem o var).

 

ultima_resposta = null;

2) Agora altere a sua função para COMPARAR a resposta que você acabou de receber com a ultima_resposta que você tem salva. Isso vai fazer com que o conteúdo só seja atualizado (e o scroll só aconteça) quando o script perceber uma mudança. Tipo assim:

 

 

function atualiza_chat() {
    window.setInterval(function () {
        $.ajax({
            type: "POST",
            url: "crud.php",
            data: {
                acao: 'atualiza_chat'
            },
            success: function (resposta) {
                if (resposta != ultima_resposta) {
                    $("#chat").html(resposta);
                    var chatScroll = $('#chat_scroll').height();
                    $('#chat_scroll').scrollTop(chatScroll);
                    ultima_resposta = resposta;
                }
            }
        });
    }, 5000);
};

 

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito