Node(とTS btw)を使って訓練していて、複数のリクエスト/レスポンスオプションを持つ簡単なサーバーを作ろうとしました。しかし、私は問題を抱えています.Expressを使わなければ解決する方法がわかりません(少なくとも今のところは使いたくありません)。Node.js:私のHTMLに画像が必要です
イメージファイルをリクエストするHTMLファイルがあります。 IDEでは、すべてが機能するように見えますが、サーバーが稼働しているときはイメージが見つかりません。理由は分かります.HTMLは、サーバーが処理方法を知らないという要求を出します。つまり、私はドキュメントがサーバーと話す必要なく他のファイルを参照できると思った。
私の問題にはどのようなエレガントで実用的な解決策がありますか?
ありがとうございます。
import * as http from 'http'
import * as fs from 'fs'
fs.readFile('doc/kmCNHkq.jpg', function (err, data) {
let binaryimg = new Buffer(data).toString('base64');
if (err) throw err;
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'image/jpeg'});
res.end(data);
console.log("Delivered the jpeg");
}).listen(8000);
http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end(binaryimg);
console.log("Delivered base64 string");
}).listen(8124);
console.log("Unless bug, both servers are listening");
});
fs.readFile('doc/index.html', function(err, data) {
http.createServer(function(req,res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(data)
}).listen(80);
console.log("HTML server is running")
})
(main.ts;ターゲットES6)
<html>
<head>
</head>
<body>
<img src="doc/kmCNHkq.jpg"/>
</body>
</html>
(index.htmlを)
観察:私は '../doc/' でHTMLファイルを残すために使用され、リソース'../img/'ではHTMLが相対パスを使用しているようですので、イメージをHTMLのフォルダにコピーしました。解決策がそれを作ったならば、彼らのそれぞれのフォルダにリソースを残すことができました。それは非常に高く評価されます。
@Edit: このスイッチ/ケース要求ハンドラを使用しています。期待どおりに動作し、画像に対するHTMLの要求は通常の要求と解釈されます。どうもありがとう!
import * as http from 'http'
import * as fs from 'fs'
var stream: fs.ReadStream,
folder = __dirname.substr(0, __dirname.length - 3);
http.createServer(function(req,res) {
switch (req.url){
case('/jpeg'):
stream = fs.createReadStream(folder + 'img/kmCNHkq.jpg');
stream.pipe(res);
console.log("Delivering the jpeg");
break;
case('/base64'):
fs.readFile('img/kmCNHkq.jpg', function (err, data) {
let img64 = new Buffer(data).toString('base64');
if (err) throw err;
res.end(img64);
console.log("Delivered base64 string");
})
break;
case('/html'):
stream = fs.createReadStream(folder + 'doc/index.html');
stream.pipe(res);
console.log("Sending the docs");
break;
default:
console.log("Shit happens");
}
}).listen(80)
(main.ts)
<html>
<body>
<img src="jpeg"/>
</body>
</html>
(index.htmlを)
まさに私が探していたものです。参照してください、私はTSとノードを引用したので、人々はコードの読み方を知ることができます。しかし、その解決策は構造的なものでした。私は、複数のポートがかなり不器用だったことを知っていたので、 'IncomingMessage.url'のアドバイスが本当に役に立ちました。コードがどのように終わったかをお見せしましょう。まだ改善の余地がありますが、確かに良いです。 – eduardogbg