Como já mencionado, o node roda server-side, logo ele não irá rodar dentro de uma html client-side. Pense que as variáveis do Node estão em um contexto separado do javascript que irá rodar no front. Como já falaram, você teria que fazer uma requisição para o seu server para buscar os dados do lado do node. Ou também, injetar as variáveis no HTML e então enviar para o client.
Pensando no seu comentário sobre querer usar como "<p><?php $varContendoSaidaTraduzida ?> </p>"...
, acho que o mais perto disso seria usar uma Template Engine.
A template engine irá permitir que você introduza pedaços de código no meio da sua HTML. Como por exemplo, utilizando EJS:
<body>
<h1> Hello world! <%= message %> </h1>
</body>
Baseado no que você já tem, vou te dar um exemplo usando template engine e também fazendo uma chamada ao node(server) com Fetch. É bem simples, na verdade. O primeiro passo para você, seria escutar pelas requisições e devolver um html:
var http = require('http');
const translate = require('google-translate-api');
var server = http.createServer(function(req, res) {
var url = req.url;
//Escutando em localhost:1337/translate
if(url ==='/translate'){
translate('We did it!', {to: 'pt'}).then(response => {
var translated = response.text;
res.write('<h1>'+translated+'<h1>');
res.end(); //end the response
}).catch(err => {
console.error(err);
});
}else{
res.write('<h1>Not found!<h1>');
res.end(); //end the response
}
});
server.listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
Isso irá fazer com que você veja a mensagem traduzida quando acessar pelo navegador o localhost:1337/translate.
Agora o que precisamos fazer é instalar a template engine e criar um HTML para renderizar assim que recebermos um request, e então envia-lo de volta.
Primeiro, instale o EJS: npm install ejs
Agora crie um arquivo chamado home.ejs
no mesmo nível do seu app.js (ou o nome que tiver dado para o seu servidor node), com o seguinte código:
<head>
<meta charset="UTF-8">
</head>
<body>
<h1> Tradutor </h1>
<p> <%= message %> </p>
<p> <%= translation %> </p>
<p id='test'></p>
</body>
<script>
//chamada para /fetchdata do client-side para o server-side
fetch('/fetchdata').then(response => {
return response.json();
}).then(data => {
document.getElementById('test').innerHTML = data.example;
}).catch(err => {
console.log(err);
});
</script>
Agora, finalmente, mude seu app.js para o seguinte:
var http = require('http');
var ejs = require('ejs');
var fs = require('fs');
const translate = require('google-translate-api');
var server = http.createServer(function(req, res) {
var url = req.url;
//chamada para root
if(url ==='/'){
res.write('<h1>Welcome!</h1>');
res.end();
}
//chamada para /translate
else if(url ==='/translate'){
translate('We did it!', {to: 'pt'}).then(response => {
var translated = response.text;
//ler o arquivo home.ejs
var html = fs.readFileSync(__dirname + '/home.ejs', 'utf8');
//json para injetar na view
var json = {
message: 'Olá!',
translation: translated
}
//injetar json e rendizar com ejs (template engine)
var htmlRenderizado = ejs.render(html, json);
//envia para o client
res.write(htmlRenderizado);
res.end();
}).catch(err => {
console.error(err);
});
}
//chamada para /fetchdata
else if(url === '/fetchdata'){
var data = {
example: 'Data from fetch!'
}
res.writeHead(200, { 'Content-Type': 'application/json' });
res.write(JSON.stringify(data));
res.end();
}
else{
res.write('<h1>Not found!<h1>'); //write a response
res.end(); //end the response
}
});
server.listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
Agora você tem um exemplo de como utilizar uma Template Engine e também de como fazer uma requisição do html para o node! Aconselho fortemente a dar uma olhada no Expressjs, ele irá facilitar muito o uso das rotas (que nesse exemplo está bem simplificado).
REST
fazendo uma requisição comAJAX
ouFetch
... você pode usarJSON.stringy()
para tornar este dado em uma{String}
e acomodar ao seuHTML
para devolver ao usuário e buscar noDOM
este dado simplesmente fazendoJSON.parse()
ou pode modificar seujavascript
para devolver este dado. Existem várias formas, você deves apenas pensar na "menos custosa" e que atenda suas necessidades. Como achas que deve ser?{String}
? Esta enviando esta{String}
viaPOST
para o servidor? Se for este o caso, isto éREST
...basta apenas devolver o resultado. É isso que procuras?