Aku ingin lari yang sangat sederhana HTTP server. Setiap MENDAPATKAN permintaan untuk example.com
harus bisa index.html
bertugas untuk itu tapi seperti biasa halaman HTML (yaitu, pengalaman yang sama seperti ketika anda membaca halaman web normal).
Menggunakan kode di bawah ini, saya dapat membaca isi index.html
. Bagaimana saya melayani index.html
seperti biasa web page?
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end(index);
}).listen(9615);
Salah satu saran di bawah ini adalah rumit dan membutuhkan saya untuk menulis sebuah mendapatkan
line untuk masing-masing sumber daya (CSS, JavaScript, gambar) file yang ingin saya gunakan.
Bagaimana saya dapat melayani satu halaman HTML dengan beberapa gambar, CSS dan JavaScript?
Anda dapat menggunakan Connect dan Namun dengan Node.js untuk ini:
$ npm install menghubungkan melayani-statis
var menghubungkan = require('menghubungkan'); var namun = require('melayani-statis'); connect().menggunakan(namun(__dirname)).mendengarkan(8080, function(){ konsol.log('Server yang berjalan pada 8080...'); });
$ node server.js
Sekarang anda dapat pergi ke http://localhost:8080/yourfile.html
Sederhana Node.js server adalah:
$ npm install http-server -g
Sekarang anda dapat menjalankan server melalui perintah berikut:
$ cd MyApp
$ http-server
Jika anda're menggunakan NPM 5.2.0 atau yang lebih baru, anda dapat menggunakan http-server
tanpa menginstal itu dengan npx
. Ini isn't direkomendasikan untuk digunakan dalam produksi, tetapi adalah cara yang bagus untuk cepat mendapatkan server yang berjalan pada localhost.
$ npx http-server
Atau, anda dapat mencoba ini, yang membuka browser web anda dan memungkinkan CORS permintaan:
$ http-server -o --cors
Untuk opsi lebih lanjut, check out dokumentasi untuk http-server
di GitHub, atau menjalankan:
$ http-server --help
Banyak fitur bagus lainnya dan otak-mati-sederhana penyebaran ke NodeJitsu.
Fitur Garpu
Tentu saja, anda dapat dengan mudah top up fitur dengan garpu. Anda mungkin menemukan itu's sudah dilakukan di salah satu dari yang ada 800+ garpu dari proyek ini:
Cahaya Server: Auto Alternatif Yang Menyegarkan
Alternatif yang bagus untuk http-server
adalah cahaya-server
. Mendukung file menonton dan auto-menyegarkan dan banyak fitur lainnya.
$ npm install -g light-server
$ light-server
Tambahkan ke direktori anda menu konteks di Windows Explorer
reg.exe add HKCR\Directory\shell\LightServer\command /ve /t REG_EXPAND_SZ /f /d "\"C:\nodejs\light-server.cmd\" \"-o\" \"-s\" \"%V\""
Sederhana JSON REST server
Jika anda perlu untuk membuat sederhana SISANYA server untuk prototipe proyek kemudian json-server mungkin apa yang anda're looking for.
Auto Menyegarkan Editor
Sebagian besar halaman web editor dan IDE yang sesuai sekarang termasuk sebuah web server yang akan menonton anda sumber file, dan auto refresh halaman web anda ketika mereka berubah.
Saya menggunakan Live Server dengan Kode Visual Studio.
Tombol open source teks editor tanda Kurung juga termasuk NodeJS statis web server. Hanya membuka file HTML di dalam Kurung, tekan "Live Preview" dan itu dimulai server statis dan membuka browser anda di halaman ini. Browser akan *auto refresh setiap kali anda mengedit dan menyimpan file HTML. Hal ini terutama berguna ketika pengujian adaptif situs web. Membuka halaman HTML anda pada beberapa browser/ukuran jendela/perangkat. Menyimpan halaman HTML anda dan langsung melihat jika anda adaptif hal-hal bekerja seperti mereka semua* auto refresh.
PhoneGap Developer
Jika anda're coding hybrid mobile app, anda mungkin akan tertarik untuk mengetahui bahwa PhoneGap tim ini auto refresh konsep di papan dengan mereka baru PhoneGap App. Ini adalah generik aplikasi mobile yang dapat memuat HTML5 file dari server selama pengembangan. Ini adalah sangat licin trik karena sekarang anda dapat melewatkan lambat mengkompilasi/menyebarkan langkah-langkah dalam siklus pengembangan aplikasi mobile hybrid jika anda're mengubah JS/CSS/HTML file — yang adalah apa yang anda're lakukan sebagian besar waktu. Mereka juga menyediakan statis NodeJS web server (run phonegap melayani
) yang mendeteksi perubahan file.
PhoneGap + Sencha Touch Pengembang
I've sekarang secara luas disesuaikan dengan PhoneGap server statis & PhoneGap Developer App untuk Sencha Touch & jQuery Mobile pengembang. Check it out di Sencha Touch Live. Mendukung --qr QR Codes dan-localtunnel bahwa proxy anda statis server dari komputer desktop anda ke URL di luar firewall anda! Ton menggunakan. Besar speedup untuk mobile hybrid devs.
Cordova + Ionic Framework Pengembang
Server lokal dan auto refresh fitur dipanggang ke dalam ion
alat. Hanya menjalankan ionic melayani
dari folder aplikasi. Bahkan lebih baik ... ionic melayani-lab
untuk melihat mobil-menyegarkan berdampingan pandangan dari kedua iOS dan Android.
Check out ini inti. I'm mereproduksi itu di sini untuk referensi, tapi inti telah diperbarui secara teratur.
Node.JS file statis web server. Meletakkannya di jalan anda untuk api up server dalam direktori apapun, mengambil opsional port argumen.
var http = require("http"),
url = require("url"),
path = require("path"),
fs = require("fs"),
port = process.argv[2] || 8888;
http.createServer(function(request, response) {
var uri = url.parse(request.url).pathname
, filename = path.join(process.cwd(), uri);
fs.exists(filename, function(exists) {
if(!exists) {
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
return;
}
if (fs.statSync(filename).isDirectory()) filename += '/index.html';
fs.readFile(filename, "binary", function(err, file) {
if(err) {
response.writeHead(500, {"Content-Type": "text/plain"});
response.write(err + "\n");
response.end();
return;
}
response.writeHead(200);
response.write(file, "binary");
response.end();
});
});
}).listen(parseInt(port, 10));
console.log("Static file server running at\n => http://localhost:" + port + "/\nCTRL + C to shutdown");
Update
Intinya tidak menangani css dan js file. I've digunakan sendiri. Menggunakan membaca/menulis di "biner" modus isn't masalah. Itu hanya berarti bahwa file isn't diartikan sebagai teks dengan file perpustakaan dan tidak berhubungan dengan content-type dikembalikan dalam respon.
Masalah dengan kode anda anda're selalu kembali konten-jenis "text/plain". Kode di atas tidak kembali setiap konten-jenis, tetapi jika anda're hanya menggunakan itu untuk HTML, CSS, dan JS, browser dapat menyimpulkan mereka baik-baik saja. Tidak ada konten-jenis yang lebih baik dari yang salah.
Biasanya content-type adalah konfigurasi dari server web anda. Jadi saya'm maaf jika ini doesn't memecahkan your masalah, tapi itu bekerja untuk saya sebagai seorang yang sederhana, pengembangan server dan pikir mungkin membantu beberapa orang lain. Jika anda perlu konten yang benar-jenis respon, anda juga perlu secara eksplisit mendefinisikan mereka sebagai joeytwiddle memiliki atau menggunakan perpustakaan seperti Terhubung yang memiliki default masuk akal. Hal yang baik tentang ini adalah bahwa hal itu's sederhana dan self-contained (tidak ketergantungan).
Tapi saya merasa masalah anda. Jadi di sini adalah solusi gabungan.
var http = require("http"),
url = require("url"),
path = require("path"),
fs = require("fs")
port = process.argv[2] || 8888;
http.createServer(function(request, response) {
var uri = url.parse(request.url).pathname
, filename = path.join(process.cwd(), uri);
var contentTypesByExtension = {
'.html': "text/html",
'.css': "text/css",
'.js': "text/javascript"
};
fs.exists(filename, function(exists) {
if(!exists) {
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
return;
}
if (fs.statSync(filename).isDirectory()) filename += '/index.html';
fs.readFile(filename, "binary", function(err, file) {
if(err) {
response.writeHead(500, {"Content-Type": "text/plain"});
response.write(err + "\n");
response.end();
return;
}
var headers = {};
var contentType = contentTypesByExtension[path.extname(filename)];
if (contentType) headers["Content-Type"] = contentType;
response.writeHead(200, headers);
response.write(file, "binary");
response.end();
});
});
}).listen(parseInt(port, 10));
console.log("Static file server running at\n => http://localhost:" + port + "/\nCTRL + C to shutdown");
Anda don't perlu express. Anda don't perlu terhubung. Node.js apakah http NATIVE. Semua yang perlu anda lakukan adalah mengembalikan file yang tergantung pada permintaan:
var http = require('http')
var url = require('url')
var fs = require('fs')
http.createServer(function (request, response) {
var requestUrl = url.parse(request.url)
response.writeHead(200)
fs.createReadStream(requestUrl.pathname).pipe(response) // do NOT use fs's sync methods ANYWHERE on production (e.g readFileSync)
}).listen(9615)
Lebih lengkap contoh yang menjamin permintaan dapat't mengakses file-file di bawah dasar-direktori, dan tidak tepat penanganan kesalahan:
var http = require('http')
var url = require('url')
var fs = require('fs')
var path = require('path')
var baseDirectory = __dirname // or whatever base directory you want
var port = 9615
http.createServer(function (request, response) {
try {
var requestUrl = url.parse(request.url)
// need to use path.normalize so people can't access directories underneath baseDirectory
var fsPath = baseDirectory+path.normalize(requestUrl.pathname)
var fileStream = fs.createReadStream(fsPath)
fileStream.pipe(response)
fileStream.on('open', function() {
response.writeHead(200)
})
fileStream.on('error',function(e) {
response.writeHead(404) // assume the file doesn't exist
response.end()
})
} catch(e) {
response.writeHead(500)
response.end() // end the response so browsers don't hang
console.log(e.stack)
}
}).listen(port)
console.log("listening on port "+port)
Step1 (dalam command prompt [saya harap anda cd KE FOLDER]) : npm install express
Langkah 2: Buat sebuah file server.js
var fs = require("fs");
var host = "127.0.0.1";
var port = 1337;
var express = require("express");
var app = express();
app.use(express.static(__dirname + "/public")); //use static files in ROOT/public folder
app.get("/", function(request, response){ //root dir
response.send("Hello!!");
});
app.listen(port, host);
Harap dicatat, anda harus menambahkan WATCHFILE (atau menggunakan nodemon) juga. Kode di atas adalah hanya untuk koneksi server.
LANGKAH 3: node server.js
atau nodemon server.js
Sekarang ada banyak metode yang mudah jika anda hanya ingin menjadi tuan rumah sederhana HTTP server.
npm install-g http-server
dan buka direktori kami dan ketik http-server
Cara cepat:
var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/../public')); // ← adjust
app.listen(3000, function() { console.log('listening'); });
Cara:
var http = require('http');
var fs = require('fs');
http.createServer(function (req, res) {
console.dir(req.url);
// will get you '/' or 'index.html' or 'css/styles.css' ...
// • you need to isolate extension
// • have a small mimetype lookup array/object
// • only there and then reading the file
// • delivering it after setting the right content type
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('ok');
}).listen(3001);
Daripada berurusan dengan pernyataan switch, saya pikir itu's lebih rapi untuk pencarian jenis konten dari kamus:
var contentTypesByExtension = {
'html': "text/html",
'js': "text/javascript"
};
...
var contentType = contentTypesByExtension[fileExtension] || 'text/plain';
Ini pada dasarnya adalah versi terbaru dari jawaban yang diterima untuk terhubung versi 3:
var connect = require('connect');
var serveStatic = require('serve-static');
var app = connect();
app.use(serveStatic(__dirname, {'index': ['index.html']}));
app.listen(3000);
Saya juga menambahkan opsi default sehingga index.html disajikan sebagai default.
jika anda memiliki node yang terpasang pada PC anda mungkin anda memiliki NPM, jika anda don't perlu NodeJS hal-hal, anda dapat menggunakan sajikan paket ini:
1 - Install paket pada PC anda:
npm install -g serve
2 - Melayani anda statis folder:
serve <path>
d:> serve d:\StaticSite
Ini akan menunjukkan kepada anda yang port statis folder yang disajikan, hanya menavigasi ke host seperti:
http://localhost:3000
Anda don't perlu menggunakan NPM modul untuk menjalankan simple server, ada's sangat kecil perpustakaan yang disebut "NPM Gratis Server" untuk Node:
50 baris kode, output jika anda meminta sebuah file atau folder dan memberikan warna merah atau hijau jika gagal untuk bekerja. Kurang dari 1KB dalam ukuran (minified).
Saya menemukan menarik perpustakaan pada npm yang mungkin berguna untuk anda. It's disebut mime(npm install mime
atau https://github.com/broofa/node-mime) dan dapat menentukan tipe mime dari file. Berikut ini's contoh dari sebuah webserver yang saya tulis ini:
var mime = require("mime"),http = require("http"),fs = require("fs");
http.createServer(function (req, resp) {
path = unescape(__dirname + req.url)
var code = 200
if(fs.existsSync(path)) {
if(fs.lstatSync(path).isDirectory()) {
if(fs.existsSync(path+"index.html")) {
path += "index.html"
} else {
code = 403
resp.writeHead(code, {"Content-Type": "text/plain"});
resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
}
}
resp.writeHead(code, {"Content-Type": mime.lookup(path)})
fs.readFile(path, function (e, r) {
resp.end(r);
})
} else {
code = 404
resp.writeHead(code, {"Content-Type":"text/plain"});
resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
}
console.log("GET "+code+" "+http.STATUS_CODES[code]+" "+req.url)
}).listen(9000,"localhost");
console.log("Listening at http://localhost:9000")
Ini akan melayani setiap teks biasa, atau file gambar (.html, .css, .js, .pdf, .jpg, .png, .dan m4a .mp3 ini adalah ekstensi I've diuji, tetapi teori ini harus bekerja untuk segala sesuatu)
Berikut adalah contoh output yang saya punya dengan itu:
Listening at http://localhost:9000
GET 200 OK /cloud
GET 404 Not Found /cloud/favicon.ico
GET 200 OK /cloud/icon.png
GET 200 OK /
GET 200 OK /501.png
GET 200 OK /cloud/manifest.json
GET 200 OK /config.log
GET 200 OK /export1.png
GET 200 OK /Chrome3DGlasses.pdf
GET 200 OK /cloud
GET 200 OK /-1
GET 200 OK /Delta-Vs_for_inner_Solar_System.svg
Melihat unescape
fungsi dalam konstruksi jalan. Ini adalah untuk memungkinkan nama file dengan spasi dan karakter dikodekan.
Node.js contoh aplikasi Node Chat memiliki fungsi yang anda inginkan. Dalam hal ini's README.textfile 3. Langkah apa yang anda cari.
step1
- membuat server yang merespon dengan hello world pada port 8002
step2
- membuat index.html dan melayani
step3
- memperkenalkan util.js
- mengubah logika sehingga setiap file statis disajikan
- show 404 dalam kasus tidak ada file yang ditemukan
step4
- tambahkan jquery-1.4.2.js
- tambahkan client.js
- mengubah index.html meminta pengguna untuk panggilan
Berikut ini adalah server.js
Berikut ini adalah util.js
Cara yang saya lakukan itu adalah untuk pertama-tama install node statis server secara global melalui
npm install node-static -g
kemudian arahkan ke direktori yang berisi file html anda dan mulai statis server dengan statis
.
Pergi ke browser dan ketik localhost:8080/"yourHtmlFile"
.
Pada dasarnya menyalin jawaban yang diterima, tapi menghindari membuat file js.
$ node
> var connect = require('connect'); connect().use(static('.')).listen(8000);
Ternyata sangat convinient.
Sebagai versi terbaru dari Express, melayani-statis telah menjadi terpisah middleware. Gunakan ini untuk melayani:
require('http').createServer(require('serve-static')('.')).listen(3000)
Install melayani-statis
pertama.
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
// change the to 'text/plain' to 'text/html' it will work as your index page
res.end(index);
}).listen(9615);
Saya pikir anda mencari ini. Di index.html hanya mengisinya dengan normal html - apa pun yang anda ingin membuat di atasnya, seperti:
<html>
<h1>Hello world</h1>
</html>
Saya menggunakan kode di bawah ini untuk memulai sebuah web server sederhana yang membuat default file html jika tidak ada file yang disebutkan dalam Url.
var http = require('http'),
fs = require('fs'),
url = require('url'),
rootFolder = '/views/',
defaultFileName = '/views/5 Tips on improving Programming Logic Geek Files.htm';
http.createServer(function(req, res){
var fileName = url.parse(req.url).pathname;
// If no file name in Url, use default file name
fileName = (fileName == "/") ? defaultFileName : rootFolder + fileName;
fs.readFile(__dirname + decodeURIComponent(fileName), 'binary',function(err, content){
if (content != null && content != '' ){
res.writeHead(200,{'Content-Length':content.length});
res.write(content);
}
res.end();
});
}).listen(8800);
Itu akan membuat semua js, css dan file gambar, bersama dengan semua konten html.
Setuju pada pernyataan "Tidak ada content-type adalah lebih baik daripada salah satu"
I'm tidak yakin jika ini adalah apa yang anda inginkan, namun, anda dapat mencoba mengubah:
{'Content-Type': 'text/plain'}
untuk ini:
{'Content-Type': 'text/html'}
Ini akan memiliki browser client menampilkan file html bukan teks biasa.
Sedikit lebih verbose express 4.x versi, tetapi yang menyediakan daftar direktori, kompresi, caching dan permintaan log in minimal jumlah baris
var express = require('express');
var compress = require('compression');
var directory = require('serve-index');
var morgan = require('morgan'); //logging for express
var app = express();
var oneDay = 86400000;
app.use(compress());
app.use(morgan());
app.use(express.static('filesdir', { maxAge: oneDay }));
app.use(directory('filesdir', {'icons': true}))
app.listen(process.env.PORT || 8000);
console.log("Ready To serve files !")
Anda hanya bisa mengetik mereka dalam shell anda
sh npx melayani