2

Galera fiz uma listagem de arquivos que existem em uma determinada pasta, gostaria que após listar, Fosse possível acessar essa variável no HTML.

Server.js

var http = require('http');    
var arquivo = require('fs');
var server = http.createServer(function(request, response){      
    response.writeHead(200, {'Content-Type': 'text/html'});     
    arquivo.readFile(__dirname+'/pagina.html', 
        function(err, html){             
        if (err) {
            response.write("Arquivo não encontrado!");                   
            response.end();
        } else{
            response.write(html);   
            var fs = require('fs');
            var files = fs.readdirSync(__dirname+'/list/'); //VARIAVEL DA LISTA           
            response.end();

        }      
    });
});
server.listen(3000, function(){       
    console.log('Servidor está rodando!');     
});

pagina.html

<html>
<script type="text/javascript">
    alert(files); //Nome da variavel de lista do NODE
</script>
</hmtL>

1 Resposta 1

5

Você não pode acessar uma variável de uma aplicação server side escrita em Node no client side, diretamente na janela do browser. Apesar da linguagem de programação ser a mesma, são dois runtimes totalmente diferentes.

De qualquer maneira, existem várias maneiras de se alcançar o resultado que você deseja, que é acessar um valor gerado no servidor no lado do cliente.

No PHP, é comum você ver coisas como <p>texto: <?php echo $var; ?> </p>. Quando o código é executado, o HTML é renderizado com o conteúdo dessa variável e o resultado final é exatamente o que você procura (se você inspecionar o HTML no navegador, não vai ver as tags do PHP, só o resultado final). No ecossistema do Node isso é possível usando algum tipo de template engine como, por exemplo, o Jade. O raciocínio é praticamente o mesmo: você renderiza o resultado do lado do servidor, e envia tudo pronto para o lado do cliente. Em ambos os exemplos, as coisas vivem em lugares separados.

Uma outra maneira de fazer isso é usar requisições assíncronas (vulgo AJAX) e o Express para o servidor. Você instancia um servidor já com rotas pré-definidas para acessar os valores que você quiser. Veja este exemplo reduzido e funcional:

server.js

const http      = require('http');
const express   = require('express');
const path      = require('path'); 

const app = express();

let getData = () => {
    //O seu método de leitura do arquivo vem aqui
    return 'qualquer que seja o seu resultado aqui';
}

app.get('/data', (req, res) => {
    res.send(getData());
});

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname+'/index.html'));
});

http.createServer(app).listen(8080, () => {
    console.log('server funcionando');
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $.get('/data', function(res) {
                $('span').html(res);
            })
        });
    </script>
</head>
<body>
    <p>Minha data: <strong><span></span><strong></p>
</body>
</html>

Garanta que server.js e index.html estejam na mesma pasta, instale o Express com $ npm i express --save, inicie o servidor com $ node server.js e veja funcionando. Acredito que este seja um primeiro passo pra atingir o seu objetivo.

EDIT 1

Como apontado nos comentários, o Jade está deprecado. Agora chama-se Pug

EDIT 2

Fica implícito pelo codigo da pergunta que o trabalho com os arquivos vai ser síncrono. Se não for - como bem apontado nos comentários - o fluxo vai ser diferente.

2
  • 1
    O Jade está deprecado, agora chama-se Pug. Convém referir que res.send(getData()); implica que getData() é sincrono, se não fôr precisa de mudar i fluxo. +1
    – Sergio
    Commented 18/04/2017 às 21:31
  • @Sergio eu parti do pressuposto que, no método do OP, ele já usa leituras sincronas, portanto, omiti a informação. Mas, se qualquer maneira, vou editar a resposta Commented 18/04/2017 às 22:45

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 .