在 node.js 服务器中保存和加载数据并将其传递到 html5 文件
Saving and loading data in a node.js server and passing it to an html5 file
所以我是 node.js 和 javascript 的新手,我通过根据请求加载 html 文件,制作了一个运行良好的服务器。这个 html 文件不包含任何它自己的数据,它只是来自互联网并显示我写的一些图像和文本。我决定让网站在打开时播放音频文件。我知道这很容易通过 html5 中的 <audio>
标签完成,但是 src="" 让我从计算机中获取一个文件并将其放在那里,当然当我从另一台计算机打开该站点时该文件显然未找到,因此未播放。我认为音频文件必须作为变量保存在服务器上并传递到 html 文件的 <audio src= >
标记中。我该怎么做呢?这是一个 .mp3(但我可以将其转换为任何其他音频格式)文件,时长约 30 秒。我只是想让它在从另一台计算机(通过互联网)加载网站时播放。另外,我将如何对图片或任何其他我不想从互联网上获取的数据做同样的事情,而是将其作为数据保存在我的服务器中?
var http = require('http');
var fs = require('fs');
var simpleServer = http.createServer(function(request, response){
response.writeHead(200, {"Content-Type":"text/html"});
fs.readFile('./Picture.html', null, function(error, data){
if(error){
response.writeHead(404);
} else{
response.write(data);
}
response.end();
})
});
simpleServer.listen(80, '0.0.0.0', function() {
console.log('Listening to port: ' + 80);
});
console.log("Server running...");
简答
完全绕过 HTML,您也可以简单地提供音频文件而不是 Picture.html:
fs.readFile("./audiofile.mp3", function(error, data) {
if (error) {
response.writeHead(404);
} else {
response.writeHead(200, { "Content-Type": "audio/mpeg"});
response.end(data, 'utf-8');
}
});
注:
您必须将文件名 audiofile.mp3
和内容类型 audio/mpeg
替换为适合您要发送的文件的值。
检查 Mozilla's Complete List of MIME Types 以获取文件扩展名及其相关内容类型的完整列表。
更好的答案:
http 模块相当低级,如果您正在学习,它会不必要地复杂。
您可以使用命令 npm install express --save
.
将 express.js 安装到您的项目
使用 express 将您的代码简化为:
const express = require('express');
const app = express();
const port = 80;
app.get('/', (request, response) => {
response.sendFile(__dirname + '/Picture.html');
});
// Anything put in the public folder is available to the world!
app.use(express.static(__dirname + '/public'));
app.listen(port, () => {
console.log(`Listening on port: ${port}`)
});
然后你只需要将所有文件放入项目目录下名为“public”的文件夹中,你就可以从 HTML!
中调用它们了
所以我是 node.js 和 javascript 的新手,我通过根据请求加载 html 文件,制作了一个运行良好的服务器。这个 html 文件不包含任何它自己的数据,它只是来自互联网并显示我写的一些图像和文本。我决定让网站在打开时播放音频文件。我知道这很容易通过 html5 中的 <audio>
标签完成,但是 src="" 让我从计算机中获取一个文件并将其放在那里,当然当我从另一台计算机打开该站点时该文件显然未找到,因此未播放。我认为音频文件必须作为变量保存在服务器上并传递到 html 文件的 <audio src= >
标记中。我该怎么做呢?这是一个 .mp3(但我可以将其转换为任何其他音频格式)文件,时长约 30 秒。我只是想让它在从另一台计算机(通过互联网)加载网站时播放。另外,我将如何对图片或任何其他我不想从互联网上获取的数据做同样的事情,而是将其作为数据保存在我的服务器中?
var http = require('http');
var fs = require('fs');
var simpleServer = http.createServer(function(request, response){
response.writeHead(200, {"Content-Type":"text/html"});
fs.readFile('./Picture.html', null, function(error, data){
if(error){
response.writeHead(404);
} else{
response.write(data);
}
response.end();
})
});
simpleServer.listen(80, '0.0.0.0', function() {
console.log('Listening to port: ' + 80);
});
console.log("Server running...");
简答
完全绕过 HTML,您也可以简单地提供音频文件而不是 Picture.html:
fs.readFile("./audiofile.mp3", function(error, data) {
if (error) {
response.writeHead(404);
} else {
response.writeHead(200, { "Content-Type": "audio/mpeg"});
response.end(data, 'utf-8');
}
});
注:
您必须将文件名 audiofile.mp3
和内容类型 audio/mpeg
替换为适合您要发送的文件的值。
检查 Mozilla's Complete List of MIME Types 以获取文件扩展名及其相关内容类型的完整列表。
更好的答案:
http 模块相当低级,如果您正在学习,它会不必要地复杂。
您可以使用命令 npm install express --save
.
使用 express 将您的代码简化为:
const express = require('express');
const app = express();
const port = 80;
app.get('/', (request, response) => {
response.sendFile(__dirname + '/Picture.html');
});
// Anything put in the public folder is available to the world!
app.use(express.static(__dirname + '/public'));
app.listen(port, () => {
console.log(`Listening on port: ${port}`)
});
然后你只需要将所有文件放入项目目录下名为“public”的文件夹中,你就可以从 HTML!
中调用它们了