2014-02-22 197 views
19

之間的變量我運行Node.js的一個簡單的HTTP服務器:的Node.js服務器和客戶端

var http = require('http'); 
var fs = require('fs'); 
var index = fs.readFileSync('index.html'); 
var sensor = require('ds18x20'); 
var temp = sensor.get('sensorID'); 

http.createServer(function(req,res) { 
    res.writeHead(200, {'Content-Type': 'text/html'}); 
    res.end(index); 
}).listen(80); 

console.log(temp); 

我index.html文件:

<html> 
    <head> 
    </head> 
<body> 
My temperature: 
//space for variable: temp 
</body> 
</html> 

現在,我想打印服務器-side變量:temp在我的index.html文件中。但我不知道該怎麼做。

也許有人可以幫助我將變量從服務器交換到客戶端。

回答

25

正如你可以在@WebServer的答案中看到的,節點中有各種各樣的模板引擎。
我想給你使用其中一個的例子 - EJS

首先安裝:

npm install ejs 

server.js:

var http = require('http'); 
var ejs = require('ejs'); 
var fs = require('fs'); 

http.createServer(function(req,res) { 
    res.writeHead(200, {'Content-Type': 'text/html'}); 

    //since we are in a request handler function 
    //we're using readFile instead of readFileSync 
    fs.readFile('index.html', 'utf-8', function(err, content) { 
    if (err) { 
     res.end('error occurred'); 
     return; 
    } 
    var temp = 'some temp'; //here you assign temp variable with needed value 

    var renderedHtml = ejs.render(content, {temp: temp}); //get redered HTML code 
    res.end(renderedHtml); 
    }); 
}).listen(80); 

你的看法可能是這樣的:

<html> 
    <head> 
    </head> 
<body> 
My temperature: <%= temp %> 
</body> 
</html> 

EJS也逃脫temp(和其他變量你可以通過視圖傳遞給你),所以你不必擔心XSS攻擊。

編輯

您也可以編譯模板,如果你不想讀對每個請求的文件:

var http = require('http'); 
var ejs = require('ejs'); 
var fs = require('fs'); 

//we are not in a request handler so we may use readFileSync 
var content = fs.readFileSync('index.html', 'utf-8'); 
var compiled = ejs.compile(content); 

http.createServer(function(req,res) { 
    var temp = 'some temp'; 

    res.writeHead(200, {'Content-Type': 'text/html'}); 
    res.end(compiled({temp: temp})); 
}).listen(80); 

編輯2(回答您的評論的問題)

以下是使用Express和AJAX的簡單示例:

server.js:

var http = require('http'); 
var express = require('express'); 
var app = express(); 

app.configure(function() { 
    app.set('view engine', 'ejs'); //tell Express we're using EJS 
    app.set('views', __dirname + '/views'); //set path to *.ejs files 
    app.use(app.router); 
    //put your static files (js, css, images) into /public directory 
    app.use('/public', express.static(__dirname + '/public')); 
}); 

//get some server data for sending it to the client 
var getData = function() { 
    return Math.random().toString(); 
} 

app.get('/', function(req, res) { 
    //render index.ejs file 
    res.render('index', {val: getData()}); 
}); 

app.get('/ajax', function(req, res) { 
    res.send(getData()); 
}); 

http.createServer(app).listen(80); 

的意見/ index.ejs:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="/public/js/request.js"></script> 
</head> 
<body> 

    <h1>Val: <span id="val"><%=val%></span></h1> 

    <button id="loadRequest">Refresh</button> 

</body> 
</html> 

公共/ JS/request.js:

$(function() { 
    $('#loadRequest').click(function() { 
     $.get('/ajax', function(res) { 
      $('#val').text(res); 
     }); 
    }); 
}); 

希望這有助於

+0

非常感謝,這正是我正在尋找的!謝謝謝謝,謝謝 – steke

+1

歡迎:)順便說一句EJS與[Express框架]兼容(https://github.com/visionmedia/express) – Curious

+0

嘿,也許你可以幫我第二次,我看看ejs文檔和我瞭解基礎知識。下一步是刷新我的變量temp,只需點擊我的index.html中的按鈕即可。在這一刻,我用我輸出的server.js中的一個函數解決了這個問題。但我只能通過console.log(temp)在控制檯讀取新的臨時變量。我無法刷新html,我知道它有點複雜。也許你有一個例子,我可以看看。非常感謝 – steke