Question

请参阅，我正在使用Node（和TS btw）进行培训，并尝试使用多个请求/响应选项来执行简单的服务器。但我有一个问题，我不知道如何在不使用Express的情况下解决（至少现在我不想使用它）。

我有一个请求图片文件的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的）

观察：我过去常常将HTML文件留在＆＃39; ../ doc /＆＃39;和资源＆＃39; ../ img /＆＃39;然而，似乎HTML使用相对路径，因此我将图像复制到HTML的文件夹中。如果解决方案也是如此，那么我可以将资源留在他们各自的文件夹中，我们将非常感激。

@Edit：现在我使用这个开关/案例请求处理程序。按预期工作，HTML对图像的请求被解释为正常请求（可能不会很好地缩放，idk，但拧紧它）。非常感谢！

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的）

Answer 1

简答：

除非您的服务器知道如何响应对该内容的请求，否则您将无法引用服务器上的特定资源（例如您的图像）。看起来您可以通过将图像src更改为仅http://localhost:8000来使您的示例立即轻松工作。

更长的回答：

使用'doc / kmCNHkq.jpg'作为图片的src告诉您的浏览器，当它加载页面时，它应该转到它从中获取页面的服务器，然后向它询问'doc / kmCNHkq.jpg '资源。如果您指定包含协议的完整URL（http：//），那么它将是绝对的，而不是相对的，因此您可以从服务该页面的服务器请求不同的服务器。

您编写的服务器实际上并未查看请求的文件路径（req.url），实际上它们总是返回相同的内容。如果你连接到http://localhost:80（你上面创建的第三个服务器），并且请求jpg，你仍然会得到相同的页面HTML数据，因为它只是在你的createServer中运行两行在你的例子结束时打电话。您编写的服务器始终返回上面的图像（第一个服务器），只是在不同的端口上运行，这就是上述解决方案有效的原因。

只使用现有服务器是最简单的解决方案。更传统的方法是只在单个端口上运行一个HTTP服务器（而不是您拥有的3个），并使用req.url来决定返回哪些数据。

传统上对于静态内容，这意味着将请求的路径直接映射到磁盘上文件的布局，以便请求doc / abc.jpg在服务器的目录中查找doc文件夹，并从其中返回abc.jpg中的数据。但这根本不是必需的，并且您的服务器可以根据您的喜好解释这些路径，从任何地方返回内容。

（注意，这与TypeScript没有任何关系，甚至与Node.js有很大关系。这实际上只是HTTP服务器和浏览器交互的基本要素，它几乎与其他任何内容完全相同支持技术。如果您希望获得更多有关此问题的背景知识，我会更多地了解一般的HTTP和浏览器详细信息。）

Node.js：我的HTML需要图片

1 个答案: