2

Sou iniciante no JavaScript, AngularJS e jQuery. Já quebrei a cabeça aqui e não consegui resolver a seguinte solução usando como base o JavaScript:

Quero fazer uma lista dos sites que desenvolvi, mostrando seus status em tempo real usando JavaScript - se estão online adiciono uma classe na div com uma cor verde, senão utilizo outra cor.

'Soluções' que encontrei, mas que não deram certo:

  • Fetch_API: Utilizei, mas nem todos os sites retornavam um objeto json com o status do site.
  • XMLHttpRequest(): Pesquisei sobre, mas no console diz estar obsoleto usar isso.

Não sei se essas soluções são das melhores. A ideia é simples: o script faz uma solicitação para o site que quero e retorna o status dele se é 200(ok), 500, 400 ou outro e eu vou manipular meu front-end de acordo com o resultado.

5
  • Veja se o exemplo abaixo te ajuda. stackoverflow.com/questions/4282151/… 25/11/2016 às 18:33
  • Ok Ismael, ou dar uma olhada lá agora... Obrigado! 25/11/2016 às 18:36
  • Olá Ismael, infelizmente não funcionou... 26/11/2016 às 10:31
  • Existe uma alternativa para saber se é 200 ou se é diferente de 200, sem obter o código exato, ou seja pode ser 400, 500... Não sei se isso seria suficiente para o seu caso.
    – Inkeliz
    29/11/2016 às 17:21
  • Olá Inkeliz, seria interessante também. 5/12/2016 às 10:23

2 Respostas 2

3

Infelizmente não há maneira de implementar uma solução assim utilizando apenas Angular (ou qualquer outra tecnologia client-side, como jQuery) por causa da Same-origin policy, ou política de mesma origem.

Você pode utilizar CORS, adicionando o domínio onde sua ferramenta de verificação está sendo executada a todas as white-lists de seus sites, para permitir que o Angular tenha acesso a recursos de seus domínios individuais.

Caso você não tenha permissões de manipulação das white-lists você pode ainda implementar uma solução a ser executada a partir de um servidor, onde uma conexão direta pode ser estabelecida - e o estado das aplicações remotas avaliadas individualmente.

0
0

Opa Obrigado pelo guia. Acabei encontrando uma solução em jQuery, basicamente ele é um serviço externo onde ele solicita o site que eu quero consultar e retorna um objeto json com as informações do site (variavel.status) ou todo o Html do site.

Encontrei uma solução também em PHP que faz algo semelhante, mas que reúne mais informações e não precisa de um serviço externo. Vou deixar o código aqui para quem tem que construir uma solução semelhante.

Em JavaScript:

		$.getJSON('http://whateverorigin.org/get?url=' + encodeURIComponent('http://www.facebook.com') + '&callback=?', function(data){
			if(data){
				console.log(data.status);
			}else{
				return("servidor offline");
			}
		});	
<!DOCTYPE html>
<html>
<head>
	<title>Angular Curl</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
</head>
<body>

	<h3 style="text-align: center">Mostre o Console para ver o Retorno do Objeto</h3>

</body>
</html>

E abaixo em PHP:

<!DOCTYPE html>
<html>
<head>
    <title>Ping Site</title>
</head>
<body>


<?php

    function curl_info($url){
    $ch = curl_init();
    curl_setopt( $ch, CURLOPT_URL, $url );
    curl_setopt( $ch, CURLOPT_HEADER, 1);
    curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );
    // curl_setopt( $ch, CURLOPT_CONNECTTIMEOUT, $timeout );
    curl_setopt( $ch, CURLOPT_FOLLOWLOCATION, 1 );

    $content = curl_exec( $ch );
    $info = curl_getinfo( $ch );

    return $info;
    }

    $site = 'http://www.honda.com/';
    $info = curl_info( $site );

    if( $info['http_code']==200 || $info['http_code']==302 || $info['http_code']==301) {
        echo '<u>'.$site . "</u> - <b style='color:lightgreen; font-size: 18px; text-transform: uppercase'>está no ar!!</b><br />";
        var_dump($info);
    } else {
        echo '<u>'.$site . "</u> - <b style='color:red; font-size: 18px; text-transform: uppercase'>está fora do ar!!</b><br />";
        var_dump($info);
    }
?>

</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .