メッセージ投稿用のエンドポイントを作成してみる。【ver.5.1】

ポートフォリオに追加するメッセージツール用のエンドポイントを作成してみた。

kazmaarakaki.hatenablog.com

Expressを使えばめちゃくちゃ簡単、と思いきやPOSTでクライアントからデータを送るときには追加のモジュールが必要。

body-parserをインストー

github.com

ファイルアップロード用のmulterっていうモジュールもあるみたい。今回は使わないけど。

github.com

npm install body-parser --save

リクエスト処理をサーバーファイルに追加

エンドポイントのURLは少し変えた。

server.js

import express from "express";
import bodyParser from "body-parser";

const app = express();

app.use(bodyParser.json());

app.use(express.static(__dirname + "/build", {
  "setHeaders": (response, path, stat) => {
    switch(path.substr(path.lastIndexOf("."))) {
      case ".html":
      case ".js":
      case ".jpg":
        response.set("Content-Encoding", "gzip");
    }
  }
}));

app.get("/api/portfolio/message/get_all/:channel", (request, response) => {
  console.log(request.params.channel);
});

app.post("/api/portfolio/message/send", (request, response) => {
  console.log(request.body.channel);
  console.log(request.body.text);
});

app.listen(3000, () => {
  console.log("Server is running...");
});

テスト用スクリプト

ブラウザからリクエストを投げるスクリプト

GET /api/portfolio/message/get_all/:channel

fetch("/api/portfolio/message/get_all/hoge").then(response => {
  return response.text();
}).then(data => {
  console.log(data);
});

POST /api/portfolio/message/send

fetch("/api/portfolio/message/post", {
  "method": "POST",
  "headers": (function(headers) {
    headers = new Headers();
    headers.append("Content-Type", "application/json");
    return headers;
  })(),
  "body": JSON.stringify({
    "channel": "hoge",
    "text": "fuga"
  })
}).then(response => {
  return response.text();
}).then(data => {
  console.log(data);
});