شرح - باستخدام node.js كخادم ويب بسيط




express shopping (17)

أرغب في تشغيل خادم HTTP بسيط للغاية. يجب أن يحصل كل طلب GET على example.com على index.html على أنه صفحة HTML عادية (أي نفس تجربة قراءة صفحات الويب العادية).

باستخدام الكود أدناه ، يمكنني قراءة محتوى index.html . كيف أعرض index.html كصفحة ويب عادية؟

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);

أحد الاقتراحات أدناه معقد ويتطلب مني كتابة خط get لكل ملف (CSS ، JavaScript ، صور) الذي أريد استخدامه.

كيف يمكنني عرض صفحة HTML واحدة مع بعض الصور ، CSS و JavaScript؟


تصحيح:

Node.js sample app يحتوي Node Chat على الوظيفة التي تريدها.
في انها README.textfile
3. الخطوة هي ما كنت أبحث عنه.

الخطوة 1

  • إنشاء خادم يستجيب مع مرحبا العالم على المنفذ 8002

الخطوة 2

  • قم بإنشاء index.html وتقديمه

الخطوه 3

  • إدخال util.js
  • تغيير المنطق بحيث يتم تقديم أي ملف ثابت
  • عرض 404 في حالة عدم العثور على أي ملف

step4

  • أضف jquery-1.4.2.js
  • اضف client.js
  • change index.html لمطالبة المستخدم باللقب

هنا هو server.js

هنا هو util.js


STEP1 (داخل موجه الأوامر [آمل أن تكونوا قرص إلى npm install express ]): npm install express

الخطوة 2: إنشاء ملف 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);

يرجى ملاحظة ، يجب إضافة WATCHFILE (أو استخدام nodemon) أيضا. فوق الرمز هو فقط لخادم اتصال بسيط.

الخطوة 3: node server.js أو nodemon server.js

توجد الآن طريقة أكثر سهولة إذا كنت ترغب فقط في استضافة خادم HTTP بسيط. npm install -g http-server

وافتح دليلنا واكتب http-server

https://www.npmjs.org/package/http-server


إذا كان لديك عقدة مثبتة على جهاز الكمبيوتر الخاص بك على الأرجح لديك الآلية الوقائية الوطنية ، إذا لم تكن بحاجة إلى NodeJS ، فيمكنك استخدام حزمة العرض لهذا:

1 - قم بتثبيت الحزمة على جهاز الكمبيوتر الخاص بك:

npm install -g serve

2 - خدمة مجلدك الثابت:

serve <path> 
d:> serve d:\StaticSite

سيعرض لك المنفذ الذي يتم عرض مجلدك الثابت ، فقط انتقل إلى المضيف مثل:

http://localhost:3000

إصدار 4.x صريح مطوّل قليلاً ولكن يوفر قائمة الدليل والضغط والتخزين المؤقت وتسجيل الطلبات في عدد قليل من الخطوط

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 !")

النسخة الأبسط التي جئت عبرها هي على النحو التالي. لأغراض التعليم ، من الأفضل ، لأنه لا يستخدم أي مكتبات مجردة.

var http = require('http'),
url = require('url'),
path = require('path'),
fs = require('fs');

var mimeTypes = {
  "html": "text/html",
  "mp3":"audio/mpeg",
  "mp4":"video/mp4",
  "jpeg": "image/jpeg",
  "jpg": "image/jpeg",
  "png": "image/png",
  "js": "text/javascript",
  "css": "text/css"};

http.createServer(function(req, res) {
    var uri = url.parse(req.url).pathname;
    var filename = path.join(process.cwd(), uri);
    fs.exists(filename, function(exists) {
        if(!exists) {
            console.log("not exists: " + filename);
            res.writeHead(200, {'Content-Type': 'text/plain'});
            res.write('404 Not Found\n');
            res.end();
            return;
        }
        var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
        res.writeHead(200, {'Content-Type':mimeType});

        var fileStream = fs.createReadStream(filename);
        fileStream.pipe(res);

    }); //end path.exists
}).listen(1337);

الآن انتقل إلى المتصفح وافتح ما يلي:

http://127.0.0.1/image.jpg

هنا يجب أن يكون image.jpg في نفس الدليل مثل هذا الملف. أمل أن هذا يساعد شخصاما :)


بدلاً من التعامل مع عبارة التبديل ، أعتقد أنه من اللطيف البحث عن نوع المحتوى من القاموس:

var contentTypesByExtension = {
    'html': "text/html",
    'js':   "text/javascript"
};

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';

خادم Simplest Node.js هو فقط:

$ npm install http-server -g

يمكنك الآن تشغيل خادم عبر الأوامر التالية:

$ cd MyApp

$ http-server

إذا كنت تستخدم NPM 5.2.0 أو أحدث ، فيمكنك استخدام http-server دون تثبيته مع npx . لا يُنصح بهذا للاستخدام في الإنتاج ، ولكنه طريقة رائعة للحصول على خادم يعمل على المضيف المحلي بسرعة.

$ npx http-server

أو يمكنك تجربة ذلك ، والذي يفتح متصفح الويب الخاص بك ويمكّن طلبات CORS:

$ http-server -o --cors

لمزيد من الخيارات ، راجع وثائق http-server على GitHub ، أو قم بتشغيل:

$ http-server --help

الكثير من الميزات لطيفة أخرى وتوزيع الدماغ ميتة بسيطة ل NodeJitsu.

ميزة فوركس

بالطبع يمكنك بسهولة أعلى الميزات مع شوكة الخاصة بك. قد تجد أنه قد تم بالفعل في واحد من أكثر من 400 شوكة من هذا المشروع:

خادم Light: بديل منعش تلقائي

بديل لطيف http-server هو http-server light-server . وهو يدعم مشاهدة الملفات والتحديث التلقائي والعديد من الميزات الأخرى.

$ npm install -g light-server 
$ light-server

أضف إلى قائمة سياق الدليل في مستكشف Windows

 reg.exe add HKCR\Directory\shell\LightServer\command /ve /t REG_EXPAND_SZ /f /d "\"C:\nodejs\light-server.cmd\" \"-s\" \"%V\""

خادم JSON REST بسيط

إذا كنت بحاجة إلى إنشاء خادم REST بسيط لمشروع نموذج أولي json-server فقد يكون json-server هو ما تبحث عنه.

التحديث التلقائي المحررين

تتضمن معظم أدوات تحرير صفحات الويب وأدوات IDE الآن خادم ويب يشاهد ملفات المصدر ويقوم تلقائيًا بتحديث صفحة الويب الخاصة بك عند تغييرها.

يتضمن محرر نصوص مفتوحة المصدر Brackets أيضاً ملقم ويب ثابت NodeJS. فقط افتح أي ملف HTML في Brackets ، اضغط على " Live Preview " ويبدأ خادم ثابت ويفتح المتصفح في الصفحة. سيقوم المتصفح ** التحديث التلقائي كلما قمت بتحرير وحفظ ملف HTML. هذا مفيد بشكل خاص عند اختبار مواقع الويب على التكيف. افتح صفحة HTML على عدة أحجام / أجهزة مستعرضة / نافذة. قم بحفظ صفحة HTML الخاصة بك ومعرفة ما إذا كانت الأشياء التكيفية تعمل على أكمل وجه أثناء التحديث التلقائي.

PhoneGap المطورين

إذا كنت تقوم بتشفير تطبيق جوال مختلط ، قد تكون مهتمًا بمعرفة أن فريق PhoneGap قد أخذ مفهوم التحديث التلقائي هذا على متنه باستخدام تطبيق PhoneGap الجديد. هذا تطبيق جوال عام يمكنه تحميل ملفات HTML5 من الخادم أثناء التطوير. هذه خدعة ناعمة للغاية حيث يمكنك الآن تخطي خطوات التجميع / النشر البطيئة في دورة التطوير الخاصة بتطبيقات الجوال المختلطة إذا كنت تقوم بتغيير ملفات JS / CSS / HTML - وهو ما تقوم به في معظم الأوقات. أنها توفر أيضا خادم الويب NodeJS ثابت (تشغيل phonegap serve ) التي تكشف عن تغييرات الملف.

PhoneGap + Sencha Touch Developers

أنا الآن على نطاق واسع تكييفها خادم ثابت PhoneGap و PhoneGap المطور التطبيقات لمطوري Sencha اللمس و jQuery موبايل. تحقق من ذلك في Sencha Touch Live . يدعم - qq QR Code و --localtunnel التي تعمل على إنشاء خادم ثابت من كمبيوتر سطح المكتب إلى عنوان URL خارج جدار الحماية! طن من الاستخدامات. تسريع كبير للهواتف المحمولة الهجينة.

كوردوفا + أيوني الإطار المطورين

يتم خبز ميزات الخادم المحلي والتحديث التلقائي في الأداة ionic . فقط قم بتشغيل ionic serve من مجلد التطبيق الخاص بك. حتى أفضل ... ionic serve --lab لعرض الجانب ionic serve --lab التلقائي من جانب جانب كل من iOS و Android.


كمية هائلة من الإجابات المعقدة هنا. إذا كنت لا تنوي معالجة ملفات nodeJS / قاعدة البيانات ولكنك ترغب فقط في عرض html / css / js / images ثابت كما يقترح سؤالك ، قم ببساطة بتثبيت وحدة pushstate-server أو ما شابه ؛

وهنا "بطانة واحدة" من شأنها إنشاء وإطلاق موقع صغير. ما عليك سوى لصق ذلك الحظر بالكامل في الوحدة الطرفية في الدليل المناسب.

mkdir mysite; \
cd mysite; \
npm install pushstate-server --save; \
mkdir app; \
touch app/index.html; \
echo '<h1>Hello World</h1>' > app/index.html; \
touch server.js; \
echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './app' });" > server.js; \
node server.js

افتح المتصفح وانتقل إلى http: // localhost: 3000 . فعله.

سيستخدم الخادم app dir كجذر لخدمة الملفات منه. لإضافة أصول إضافية ، ضعها داخل هذا الدليل.


لا تحتاج صريح. لا تحتاج الاتصال. Node.js يفعل http NATIVELY. كل ما عليك القيام به هو إرجاع ملف يعتمد على الطلب:

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)    

مثال كامل أكثر يضمن عدم وصول الطلبات إلى الملفات الموجودة أسفل الدليل الأساسي ، ويقوم بمعالجة الخطأ المناسبة:

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)

لست متأكدًا مما إذا كان هذا هو بالضبط ما تريده ، ومع ذلك ، يمكنك محاولة تغيير:

{'Content-Type': 'text/plain'}

الى هذا:

{'Content-Type': 'text/html'}

سيؤدي ذلك إلى عرض عميل المستعرض الملف كملف html بدلاً من النص العادي.


معظم الإجابات المذكورة أعلاه تصف جيدًا كيفية تقديم المحتويات. ما كنت أبحث عنه كإضافة كانت قائمة الدليل بحيث يمكن تصفح محتويات الدليل الأخرى. هنا هو الحل الخاص بي لمزيد من القراء:

'use strict';

var finalhandler = require('finalhandler');
var http = require('http');
var serveIndex = require('serve-index');
var serveStatic = require('serve-static');
var appRootDir = require('app-root-dir').get();
var log = require(appRootDir + '/log/bunyan.js');

var PORT = process.env.port || 8097;

// Serve directory indexes for reports folder (with icons)
var index = serveIndex('reports/', {'icons': true});

// Serve up files under the folder
var serve = serveStatic('reports/');

// Create server
var server = http.createServer(function onRequest(req, res){
    var done = finalhandler(req, res);
    serve(req, res, function onNext(err) {
    if (err)
        return done(err);
    index(req, res, done);
    })
});


server.listen(PORT, log.info('Server listening on: ', PORT));

نسخ الإجابات المقبولة في الأساس ، مع تجنب إنشاء ملف js.

$ node
> var connect = require('connect'); connect().use(static('.')).listen(8000);

وجدت أنها مناسبة جدا.

تحديث

اعتبارًا من أحدث إصدار من Express ، أصبح serve-static وسيطًا منفصلاً. استخدم هذا لخدمة:

require('http').createServer(require('serve-static')('.')).listen(3000)

تثبيت serve-static أولا.


هذا هو واحد من أسرع الحلول التي يمكنني استخدامها لمشاهدة صفحات الويب بسرعة

sudo npm install ripple-emulator -g

من الآن فصاعدا فقط أدخل دليل ملفات أتش تي أم أل الخاص بك وتشغيلها

ripple emulate

ثم غيّر الجهاز إلى منظر Nexus 7.


هناك بالفعل بعض الحلول nodejs server بسيط. هناك حل واحد آخر إذا كنت بحاجة live-reloading أثناء إجراء تغييرات على ملفاتك.

npm install lite-server -g

تصفح الدليل والقيام به

lite-server

سيفتح المتصفح لك مع إعادة تحميل حية.


يمكنني استخدام أدناه رمز لبدء خادم ويب بسيط الذي يجعل ملف HTML الافتراضي إذا لم يكن هناك ملف المذكورة في 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);

سيعرض كل js و css وملف الصورة ، بالإضافة إلى كل محتوى html.

توافق على العبارة " لا يوجد نوع محتوى أفضل من خطأ "


الطريق السريع:

var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/../public')); // ← adjust
app.listen(3000, function() { console.log('listening'); });

طريقك:

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);

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

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

//Just Change The CONTENT TYPE to 'html'




webserver