ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

Node.js を使用して単純な HTTP サーバーを作成する方法について説明します。

著者：Eve Cole 更新時間：2022-06-30 09:29:28
NodeJS を使用して HTTP サーバーを作成するにはどうすればよいですか?次の記事では、Node.js を使用して簡単な HTTP サーバーを作成する方法を紹介します。

1. Node.js を使用して JavaScript スクリプトを直接実行する

node.jsはChromeのv8エンジンに基づいてjsコードを実行するため、ブラウザ環境を取り除き、次のようなjsコードをコンソールで直接実行できますhello world code

console.log('hello world');

コンソールのnodeを使用して直接実行できます。

1.png

2. シンプルな HTTP サーバーを作成します

http createServer node.jsモジュールhttpは、 CommonJS仕様に基づいて、 httpモジュールhttp requireして使用できます。 httpを作成できるモジュール。サーバーはコールバック関数をパラメータとして受け取ります。このコールバック関数は、 requestとresponse 2 つのパラメータを受け取ります。

  • requestは、 url 、リクエストheader 、リクエスト メソッドなど、クライアントによって要求されたすべての情報が含まれます。応答
  • response主に、応答本文に関連するいくつかの操作をカプセル化するために使用されます。たとえば、 response.writeHead本文のヘッダー情報とステータス コードを

処理後に

カスタマイズできます。

createServer関数を使用すると、 response.end()本文をクライアントに送信できますが、 Serverオブジェクトをリッスンできるようにする必要はありません。リッスンするserverオブジェクトのlistenメソッド。実際にサーバーとして listen メソッドの実行を開始できます

  • listen最初のパラメーターはリスニング ポート番号、2 番目のパラメーターはバインドされたホストip 、3 番目のパラメーターはコールバック関数です。
エラーが発生した場合、スローされた例外はコールバック関数の最初のパラメータから取得され、サーバーをより堅牢にするために

例外

  • http処理することができます。

httpモジュールを使用して単純なサーバーを作成します。

const { createServer } = require('http' );
const HOST = 'ローカルホスト';
const ポート = '8080';

const server = createServer((req, resp) => {
  // 最初のパラメータは返されるステータスコードです  
  // 2 番目のパラメータは応答ヘッダー情報です
  resp.writeHead(200, { 'Content-Type': 'text/plain' });  
  
  console.log('サーバーは動作しています...');  
  
  // end メソッドを呼び出して、リクエストが満たされたことをサーバーに通知します
  resp.end('こんにちは、nodejs http サーバー');
});

server.listen(PORT, HOST, (エラー) => {  
if (エラー) {  
  console.log('何か間違っています: ', エラー);   
   戻る;
  }  
  console.log(`サーバーは http://${HOST}:${PORT} でリッスンしています ...`);
});

nodeを使用して直接実行して、独自のサーバーを作成してみることもできます。サーバーが実行されたら、ブラウザは http://localhost:8080 にアクセスしてサーバーにアクセスできます。

2.png

また、nodemon を使用して実行することもできるので、コードが変更されたときにプログラムを手動で終了して
npm i -g nodemon を

nodemon実行する必要がなくなります

。

直接使用できるように、グローバルにインストールすることをお勧めします

。

npx nodemonこれも非常に簡単で、 nodeコマンドをnodemonコマンド

nodemon http-server.js
に変更するだけです。

3.png

3. タイプ プロンプトを追加します

。以前にcreateServerとrespオブジェクトを使用したときは、いつでも公式nodeドキュメントに従って確認する必要がありましたが、問題ありません。 tsファイルは、構文プロンプト機能を提供するのに役立ちます。開発にはtsを使用していませんが、

  1. プロジェクトの初期化にのみその構文プロンプト機能を使用していることに注意してください -- npm init -y
  2. install @types/node -- pnpm i @types/node -D
  3. プロジェクト ディレクトリにjsconfig.jsonファイルを作成し、 node_modulesを除外します。チェックする必要はありません。
{ "compilerOptions": {
    "checkJs": true
  }、  
  "除外": ["node_modules", "**/node_modules/*"]

上記のコードに実際にはエラーがあることに気づいたでしょうか

?

checkJs型エラーのチェックに役立ちます。チェックをオンにすると、すぐにパラメーターの型の不一致についてのメッセージが表示されます。

4.png

このとき、 listenメソッドの上にマウスを置くと、メソッドのシグネチャが表示されます。

5.png

ご覧のとおり、元のportパラメータは、 number型である必要がありますが、定義したときはstring型であったため、一致しませんでした。これをnumberの8080に変更するだけで、関連するapiドキュメントを直接表示できます。公式nodeを開かずにドキュメントを見つけて確認するのに長い時間がかかりました。

4. 複数の文字列の応答本文を返します

。単純なhttp serverでは 1 つの文しか返されませんでしたが、複数の文を返すことは可能ですか? これには、 respオブジェクトのwriteメソッドを使用する必要があります。代わりに、 writeメソッドを使用して、 end end回呼び出すだけで済みます。パラメータを渡す場合は、応答本文の送信機能のみを完了させてください。

const { createServer } = require("http");
const HOST = "ローカルホスト";
const ポート = 8080;

const server = createServer((req, resp) => {
  resp.writeHead(200, { "Content-Type": "text/plain" });  
  console.log("サーバーは動作しています...");  
  
  // いくつかのローレム文を書きます
  resp.write("Lorem ipsum dolor sit amet consectetur adipisicing elit.n");
  resp.write("オムニス エリゲンディ アペリアム デレクトゥス?n");
  resp.write("ああ、大丈夫!n");

  resp.end();
});

server.listen(PORT, HOST, (エラー) => {
  if (エラー) {    
  console.log("何か間違っています: ", エラー);    
  戻る;
  }  
  console.log(`サーバーは http://${HOST}:${PORT} でリッスンしています ...`);
});

今回は3つの文を書きましたが、結果は次のようになります。

6.png

5. HTML を返すと、

文字列をブラウザに返すだけでなく、 htmlファイルのコンテンツを直接読み取ってブラウザに返すこともできます。これには、別のNode.js組み込みモジュールを使用する必要があります。 fs 、このモジュールはファイル操作の機能を提供します。 fs.readFile使用してファイルを非同期に読み取ることができますが、 promiseオブジェクトは返されないため、ファイルの読み取り後に操作を処理するためにコールバックを渡す必要があります。ファイル読み取りを同期的にブロックすることもできますfs.readFileSyncここでは、非同期読み取り

const { createServer } = require("http");
を選択します。
const fs = require("fs");
const HOST = "ローカルホスト";

const PORT = 8080;const server = createServer((req, resp) => {
  // MIME タイプを text/plain から text/html に変更します
  resp.writeHead(200, { "Content-Type": "text/html" });  
  
  // HTMLファイルの内容を読み込む
  fs.readFile("index.html", (err, data) => { 
     if (エラー) {  
      コンソール.エラー(      
        "HTML ファイルのコンテンツの読み取り中にエラーが発生しました: ",
        エラー
      ); エラーをスローします。
    }    
    console.log("操作は成功しました!");

    resp.write(データ);
    resp.end();
  });
});

server.listen(PORT, HOST, (エラー) => {
  if (エラー) {    
  console.log("何か間違っています: ", エラー);    
  戻る;
  }  
  console.log(`サーバーは http://${HOST}:${PORT} でリッスンしています ...`);
});

現在の結果は次のとおりです。

7.png

html注: ここでは、応答ヘッダーの**Content-Type**を**text/html**に変更して、 **html**ファイルのコンテンツを返すことをブラウザーに通知する必要があります。 **text/plain**を引き続き使用する場合、ブラウザは返されたコンテンツを解析しません。たとえ**html**構文に準拠していても、次のように解析されません。

8.png

6. JSON を返す

インターフェイス データを返すことだけを担当するバックエンド サーバーを作成する必要がある場合、あなたは賢明で、その処理方法を知っていると思いますjson

  1. MIMEをapplication/jsonに設定します
。
  1. application/json
  2. resp.write 、 json文字列が渡されます。 JSON.stringify使用してオブジェクトを処理し、
const { createServer } = require("http");
を返すことができます。
const HOST = "ローカルホスト";
const ポート = 8080;

const server = createServer((req, resp) => { 
 // MIME タイプを application/json に変更します
  resp.writeHead(200, { "Content-Type": "application/json" });  
  
  // オブジェクトを使用して json データを作成します  
  const jsonDataObj = {
      コード: 0、    
      メッセージ: 「成功」、    
      データ： {  
          名前：「粘土」、      
          年齢：20歳、      
          趣味：「コーディング」、
    }、
  };

  resp.write(JSON.stringify(jsonDataObj));
  resp.end();
});

server.listen(PORT, HOST, (エラー) => {
  if (エラー) { 
     console.log("何か間違っています: ", エラー);    
     戻る;
  }  
  console.log(`サーバーは http://${HOST}:${PORT} でリッスンしています ...`);
結果

は次のとおりです。

9.png

7.

PDF ファイルを返すという考え方は、以前のhtmlファイルを返すという考え方に似ていますが、どちらも応答ヘッダーのMIMEタイプを設定し、ファイルを読み取り、ファイルの内容を返すというプロセスです。私たちの考えは、サーバーの実行中に実行することです。PDF pdfを生成するには、 MIMEタイプをapplication/pdfに変更する必要がありますpdf pdfkit 。

pnpm i pdfkit

まず、 pdfファイルを作成する関数を作成しますpdfファイルの作成にはいくつかの書き込み操作も必要です。いつ完了するかはわかりませんが、リクエストはpdfファイルが作成されるまで待つ必要があります。応答を取得するので、それを非同期にしてpromise返す必要があります

/**
 * @description PDF ファイルを作成 */const createPdf = () => {
   return new Promise((解決、拒否) => {
       if (!fs.existsSync("example.pdf")) {      
       // PDFDocument オブジェクトを作成します      
       const doc = 新しい PDFDocument();
       
       // PDF コンテンツをパイプして書き込みストリームを作成します。
       doc.pipe(fs.createWriteStream("example.pdf"));   
        
      // PDF ドキュメントにコンテンツを追加します
      doc.fontSize(16).text("Hello PDF", 100, 100);   
         
      // PDF ファイルの生成操作を完了します。
      doc.end();
    }

    解決(「成功」);
  });
ここでは
、

パイプライン操作を使用して、 PDFDocumentオブジェクトの内容をパイプラインを通じて新しく作成された書き込みストリームに転送します。操作が完了すると、 pdfファイルが作成されたことをresovleを通じて外部に通知し、

const を
呼び出します。
サーバーコード内のサーバー = createServer(async (req, resp) => {
  // MIME タイプを application/pdf に変更します
  resp.writeHead(200, { "Content-Type": "application/pdf" });  
  
  // PDFファイルを作成する  
  createPdf() を待ちます;  
  
  // 作成したPDFファイルを読み込む
  fs.readFile("example.pdf", (err, data) => {
      if (エラー) { 
       コンソール.エラー(        
        "PDF ファイルのコンテンツの読み取り中にエラーが発生しました: ",
        エラー
      );      
      エラーをスローします。
    }    
    console.log("操作は成功しました!");

    resp.end(データ);
  });
});

server.listen(PORT, HOST, (エラー) => {
  if (エラー) {
      console.log("何か間違っています: ", エラー);    
      戻る;
  }  
  console.log(`サーバーは http://${HOST}:${PORT} でリッスンしています ...`);
});

これで、作成されたpdfファイルをブラウザで読み取れるようになります。

10.png

8. オーディオ ファイルを返すという考え方は

同じです。オーディオ ファイルを読み取り、それをパイプライン経由でrespオブジェクトに送信して返します。

const { createServer } = require("http");
const { stat, createReadStream } = require("fs");
const HOST = "ローカルホスト";
const ポート = 8080;

const サーバー = createServer((req, resp) => {
  // MIME タイプを audio/mpe に変更します
  resp.writeHead(200, { "Content-Type": "audio/mp3" });  
  const mp3FileName = "audio.mp3";

  stat(mp3ファイル名, (err, 統計) => {
    if (stats.isFile()) {      
      const rs = createReadStream(mp3FileName);      
      
      // 読み取りストリームを resp にパイプします
      rs.pipe(それぞれ);
    } それ以外 {
      resp.end("mp3 ファイルが存在しません");
    }
  });
});

server.listen(PORT, HOST, (エラー) => {
  if (エラー) {    
  console.log("何か間違っています: ", エラー);    
  戻る;
  }  
  console.log(`サーバーは http://${HOST}:${PORT} でリッスンしています ...`);
});

効果は次のとおりです。

11.png

開くと、オーディオを再生するためのインターフェイスが表示されます。これは、 chromeによって提供されるオーディオ ファイルの表示です。コンソールを開くと、オーディオ ファイルが返されていることがわかります。

11-2.png

注: オーディオ ファイル ストリームをパイプ経由で**resp**に渡した後、 **resp.end()**メソッドを呼び出す必要はありません。これにより、応答全体が閉じられ、オーディオ ファイルが利用できません。

12.png

13.png

9. ビデオ ファイル

とオーディオ ファイルの処理は同じですが、 MIMEタイプをvideo/mp4に変更する必要がある点が異なります。

const { createServer } = require("http");
const { stat, createReadStream } = require("fs");
const HOST = "ローカルホスト";
const ポート = 8080;
const server = createServer((req, resp) => {  
// MIME タイプを audio/mpe に変更します
  resp.writeHead(200, { "Content-Type": "audio/mp4" });  
  const mp4FileName = "ビデオ.mp4";

  stat(mp4ファイル名, (err, 統計) => { 
     if (stats.isFile()) {      
     const rs = createReadStream(mp4FileName);      
     // 読み取りストリームを resp にパイプします
      rs.pipe(それぞれ);
    } それ以外 {
      resp.end("mp4 ファイルが存在しません");
    }
  });
});

server.listen(PORT, HOST, (エラー) => { 
 if (エラー) {    
 console.log("何か間違っています: ", エラー);    
 戻る;
  }  
  console.log(`サーバーは http://${HOST}:${PORT} でリッスンしています ...`);
});

14.png

要約すると、

  • Node使用してhttpサーバーを作成し
  • js
  • html
  • 列の応答本文を返す方法
  • JSON
  • pdfファイルを生成して返す方法
  • を

学びました

。
  • 音声ファイルを返す
  • 方法

内容は簡単ですが、見るだけでは難しいと思わないでください。知っているという意味ではなく、実際に実装して初めて自分自身の問題が見つかります。
関連記事