Server-Push

Adolpho B. · Dezembro 14, 2010

Olá pessoal, esses dias atrás vi um site de leilão, e fiquei interessado em saber como funcionava o sistema de sites assim.

Dando uma pesquisa no fórum vi que pode se usar Comet - Server Push para este tipo de aplicação, porem em local algum achei um tutorial explicando sobre esta técnica.

Até achei mais estava mal explicado.

A função disso seria que quando a pessoa clicasse no botão de lance o tempo resetaria e incrementaria 1 centavo no preço do produto, tudo isso com todos os usuarios vendo e em tempo real. Estilo o site BidShop.

Se alguem souber sobre como fazer ou qualquer outra coisa que possa me ajudar a criar algo parecido, ajude-me. Obrigado

kakaroto developer · Fevereiro 12, 2011

Ver se deu para tu pega a ideia velho :)

Normalmente, quando um usuario visita uma site, um pedido é enviado para o servidor web que hospeda a página.

O servidor web reconhece o pedido e envia de volta a resposta.

Em muitos casos, por exemplo, preços das ações, chat,venda de leilao online

,e assim por diante, a resposta poderia ser obsoleto pelo tempo que o navegador demora para abri a página.

Se você quiser obter em tempo real, informações, você pode sempre atualizar a página :),

mas isso ai não é uma grande solução.

ou partir para o plano b:)

Com o Comet (long polling),

o navegador faz uma solicitação para o servidor eo servidor mantém o pedido de abertura por um longo periodo .

Se houve pedido nesse prazo, uma resposta contendo a mensagem é enviada para o cliente.

ou seja em outras palavras você mantem nos bastidores uma linguagem com php fazendo loop dentro do banco e mandando para o java script

se o cliente pedi a informação do banco a informação ja esta disponivel , criando uma tipo de programacao em tempo real

dentro do conceito de comet você pode usar o iframe oculto com jquery

vide code abaixo


 var comet = {
   connection   : false,
   iframediv    : false,
   initialize: function() {
       if (navigator.appVersion.indexOf("MSIE") != -1) {
           // For IE browsers
           comet.connection = new ActiveXObject("htmlfile");
           comet.connection.open();
           comet.connection.write("<html>");
           comet.connection.write("<script>document.domain = '"+document.domain+"'");
           comet.connection.write("</html>");
           comet.connection.close();
           comet.iframediv = comet.connection.createElement("div");
           comet.connection.appendChild(comet.iframediv);
           comet.connection.parentWindow.comet = comet;
           comet.iframediv.innerHTML = "<iframe id='comet_iframe' src='./backend2.php'></iframe>";
       } else if (navigator.appVersion.indexOf("KHTML") != -1) {
           // for KHTML browsers
           comet.connection = document.createElement('iframe');
           comet.connection.setAttribute('id','comet_iframe');
           comet.connection.setAttribute('src','./backend2.php');
           with (comet.connection.style) {
               //    position   = "absolute";
               //  left       = top   = "-100px";
               //  height     = width = "1px";
               ///  visibility = "hidden";
               }
           document.body.appendChild(comet.connection);
       } else {
           // For other browser (Firefox...)
           comet.connection = document.createElement('iframe');
           comet.connection.setAttribute('id','comet_iframe');
           with (comet.connection.style) {
               //    left       = top   = "-100px";
               //    height     = width = "1px";
               //    visibility = "hidden";
               //    display    = 'none';
               }
           comet.iframediv = document.createElement('iframe');
           comet.iframediv.setAttribute('src','./backend2.php');
           comet.connection.appendChild(comet.iframediv);
           document.body.appendChild(comet.connection);

       }
   },
   print: function (data) {
       var encoded = $.toJSON(data);
       var json = $.parseJSON(encoded);
      // if(json.tempo > 0){
           $("#product" + json.produto_id + " span.price").html(json.valor);
           $("#product" + json.produto_id + " span.time").html(json.tempo);
           $("#product" + json.produto_id + " span.usuario").html(json.name);
           $("#time").html(json.hora);
      // }
    //   else {
         //  $("#product" + json.produto_id + " span.time").html('Produto Vendido');
      // }
   },

   onUnload: function() {
       if (comet.connection) {
           comet.connection = false;
       }
   }
}
$(window).load(function(){
               comet.initialize();
           });

           $(window).unload(function(){
               comet.onUnload();
           });

e o backend.php que eu faço referencia no js e algo que faz uma conexao com o banco com um sleep de 1 segundos

retornado isso do backend.php

echo 'comet.print(' . json_encode($dados) . ');';

mais essa ainda nao seria a melhor solução :)

Node js

Pela que eu aprendi JavaScript ele é sempre executado somente no navegador web,

mas depois que conheci o Node.js ele veio para o lado do servidor

No entanto, Node é um pouco diferente do modelo tradicional,

assim como o php para roda na web precisa do apache :) ,node.js nao precisa.

Fazendo que realmente Node.js um legitimo server-side JavaScript que usando um modelo assíncrono orientado a eventos.

ou seja obtendo um excelente desempenho em seus aplicativos.

Node.js, usa modelo de eventos em vez de threads, e é capaz de se adaptar a milhões de conexões simultâneas.

isso que disse :

Toda operações é assíncrona, o que significa que você deixa o seu apache fazendo a unha do php

enquanto node continuar a processar as solicitações :)

deu para pega a ideia :)

http://nodejs.org/

mais fica tranquilo que no futuro muito em breve vai esta rolando a WEB socket

e só espera os navegadores darem suporte a essa tecnologia

o chrome e o safari ja esta dando suporte (meio que fora das recomedaçoes da W3C);

o firefox disse que esta esperando uma melhor formatação desse protocolo por parte da W3C ( mais esse suporte ja tem no ff mais tem que habilitar

eu perdi o tutorial , o opera segue a mesma postura do FF)

agora o IE9 falam que vira com suporte a WEB SOCKET( como sempre o atrasado em tecnologia heheeh)

@kakarotodev

Tylër · Fevereiro 13, 2011

isso que disse :

Toda operações é assíncrona, o que significa que você deixa o seu apache fazendo a unha do php

enquanto node continuar a processar as solicitações

Aqui já explica tudo, hehe! xD

agora o IE9 falam que vira com suporte a WEB SOCKET( como sempre o atrasado em tecnologia heheeh)

É vero, mas eis o grande problema, pois acredito eu que quase todos os usuários do windows 7 utilizam este atraso hehe, então como implementar algo novo (não tão novo assim), se os navegadores ainda não se adequaram a atualidade... É o mesmo caso do HTML5, eu nem quero saber de programar isso, já que existem diversos navegadores que não se adequaram ainda, ou sempre terá aquele usuário que não atualiza nenhuma vez seus navegadores...

ktinho · Fevereiro 28, 2011

deixa eu dizer uma coisa eu tambem fui a varios sites sobre comet/ajax reverso e oque eu poderia encontrar éra uma mensagem sendo empurrada para o navegador pelo servidor entao eu sempre queria empurrar algo para uma variavel e nao achei maneira de fazer se voce kakaroto developer souber me ajuda ai.

entao estou a trabalhar com sockets js + ou - assim var host = "ws://localhost:8000/sockethtml5/server.php";

esta variavel se conecta a um servidor tcp que escuta na porta 8000, devido a rumores que o ie9 ia vim com suporte a socket comecei a estudar segue um simples chat que usa sócket:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="../../res/js/jWebSocket.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

if(!("WebSocket" in window)){
	$('#chatLog, input, button, #examples').fadeOut("fast");	
	$('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');		
}else{
	//The user has WebSockets

        var lJWSID = "jWebSocket site",
		lWSC = null,
		eLog = null,
		eUsername = null,
		ePool = null,
		eMessage = null,
		eDebug = null,
		eKeepAlive = null;

		var IN = 0;
		var OUT = 1;
		var EVT = 2;
		var SYS = "SYS";
		var USR = null;

connect();


function connect(){
		var socket;
		var host = "ws://localhost:8000/sockethtml5/server.php";

		try{
			var socket = new WebSocket(host);
			message('<p class="event">Socket Status: '+socket.readyState);
			socket.onopen = function(){
				message('<p class="event">Socket Status: '+socket.readyState+' (open)');	
			}

			socket.onmessage = function(msg){
				message('Received: '+msg.data);					
			}

			socket.onclose = function(){
				message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');
			}			

		} catch(exception){
			message('<p>Error'+exception);
		}

		function send(){
			var text = $('#text').val();
			if(text==""){
				message('<p class="warning">Please enter a message');
				return ;	
			}
			try{
				socket.send(text);
				message('<p class="event">Sent: '+text)
			} catch(exception){
				message('<p class="warning">');
			}
			$('#text').val("");
		}

		function message(msg){
			$('#chatLog').append(msg);
		}//End message()

		$('#text').keypress(function(event) {
				  if (event.keyCode == '13') {
					 send();
				   }
		});	

		$('#disconnect').click(function(){
			socket.close();
		});

	}


}//End connect()

});
</script>
<meta charset=utf-8 />
<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif;}
#container{
border:5px solid grey;
width:800px;
margin:0 auto;
padding:10px;
}
#chatLog{
padding:5px;
border:1px solid black;	
}
#chatLog p{margin:0;}
.event{color:#999;}
.warning{
font-weight:bold;
color:#CCC;
}
.user { background:#fff; padding:5px; list-style-type:none; }
</style>
<title>WebSockets Client</title>

</head>
<body>
 <div id="wrapper">

 	<div id="container">

   	<h1>WebSockets Client</h1>

       <div id="chatLog">

       </div>
       <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>

   	<input id="text" type="text" />
       <button id="disconnect">Disconnect</button>

</div>

 </div>
</body>
</html>

os eventos apresentados sao tres eles sao:

onopen = quando um socket é aberto

onmessage = quando o cliente recebe uma mensagem

onclose = feixar conexao com o servidor

devido a segurança dos dados dos sóckets em javascript foi mudado o prótocolo do socket no webkit do safari e do chrome, entao o firefox, opera, e o ie9, nao apostarao nos sockets nos seus navegadores.

provavelmente o chrome 4,5 usa uma conexao simples para o aperto de mao entre cliente e servidor,mas o chrome 7,8,9,10,11 nao é igual, protocolo antigo éra 75 o novo é 76.

segundo rumores da internet e dos sites como este: http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/ o chrome tem um plugin que emula socket em firefox e iexplorer veja como funciona o plugin.

o plugin veio por causa da dificuldade de mecher com css e html5 no ie 6,7,8 o plugin funciona da seguinte maneira ele instala um novo navegador com a velocidade do chrome e interface do ie ou firefox, o nome do plugin se chama "google chrome frame".

para estabelece uma conexao com o novo protocolo do javascript é preciso que seja enviado duas chaves keys do servidor para o cliente, aqui nesse site voce encontra mais informaçao :

http://bohuco.net/blog/2010/07/php-websocket-server-the-handshake/

aqui um servidor que funciona no novo protocolo:

http://bohuco.net/dev/websocket/?source=WebSocketServer.php >>>> copiar e colar para testar

http://bohuco.net/dev/websocket/?source=server.php >>>>> copiar e colar para testar

entao voce esta me perguntando vale a pena investir no socket em html5 ou js, se vale a pena vale mais é o seguinte tenha em mente que o socket em js esta em faze beta testes significa que um bug ou falha de segurança pode tornar o socket em js extinto, entao oque fazer?

jwebsocket é a soluçao jwebsocket é composto por dados codificado para socket em js que sao aceitos tanto em iexplorer 6,7,8,9 e todos os chrome e opera e safari e firefox, uma api um pouco diferente nas comunicaçoes jwebsocket usa java como server e javascript como cliente jwebsocket é 100% free. e de código aberto.

site: jwebsocket.org

porem usando os dois server eu consigo estabelecer a conexao porem pela minha falta de estudo em js nao consigo adicionar os dados em uma variavel, e nem selecionar somente as mensagens do servidor segue as imgs abaixo:

servidor funfando de boa: http://img10.imageshack.us/f/imagem2h.gif/

chat retornando dados demais : http://img543.imageshack.us/i/imagem3.gif/

queria que fosse retornado sómente as mensagens mais nao dei conta.

Entrar

Arquivado

Server-Push

Recommended Posts

Adolpho B. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

kakaroto developer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tylër 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ktinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante