Merge pull request azu#44 from azu/connect

connect: サンプルの実装

Author: azu

.eslintrc

@@ -15,7 +15,8 @@
     "semi": [
       2,
       "always"
-    ]
+    ],
+    "no-console": 0
   },
   "env": {
     "es6": true,

.md.eslintrc

@@ -1,8 +1,7 @@
 {
   "rules": {
     "no-undef": 0,
-    "no-unused-vars": 0,
-    "no-console": 0
+    "no-unused-vars": 0
   },
   "plugins": [
     "markdown"

SUMMARY.md

@@ -4,4 +4,5 @@
 * [Introduction](ja/introduction/README.md)
 * [jQuery](ja/jQuery/README.md)
 * [ESLint](ja/ESLint/README.md)
+* [connect](ja/connect/README.md)
 

ja/connect/README.md

@@ -0,0 +1,50 @@
+# Connect
+
+> この文章はConnect 3.4.0を元に書かれています。
+
+[Connect](https://github.com/senchalabs/connect "Connect")はNode.jsで動くHTTPサーバフレームワークです。
+_middleware_という拡張する仕組みを持っていて、connectが持つ機能自体はとても少ないです。
+
+この章ではconnectの_middleware_の仕組みついて見て行きましょう。
+
+## どう書ける?
+
+Connectを使った簡単なEchoサーバを書いてみましょう。
+Echoサーバとは、送られてきたリクエストの内容をそのままレスポンスとして返すサーバのことです。
+
+[import, connect-echo-example.js](../../src/connect/connect-echo-example.js)
+
+このEchoサーバに対して、以下のようなリクエストBodyを送信すると、レスポンスとして同じ値が返ってきます。
+
+```json
+{
+    "key": "value"
+}
+```
+
+`app.use(middleware)` という形で、_middleware_と呼ばれる関数には`request`や`response`といったオブジェクトが渡されます。
+そのため、リクエストみてフィルタリングしたり、任意のレスポンスを返したり出来るようになっています。
+
+Echoサーバでは `req.pipe(res);` という形でリクエストをそのままレスポンスとして流す事で実現されています。
+
+### middlewareをモジュールとして実装
+
+もう少し_middleware_をプラグインらしくモジュールとして実装したものを見てみます。
+
+次の[connect-example.js](#connect-example.js)では、あらゆるリクエストに対して、
+`"response text"`というレスポンスを`"X-Content-Type-Options"`ヘッダを付けて返すだけのものです。
+
+それぞれの処理を_middleware_としてファイルを分けて実装し、`app.use(middleware)`で処理を追加しています。
+
+[import errorHandler.js](../../src/connect/errorHandler.js)
+
+[import nosniff.js](../../src/connect/nosniff.js)
+
+[import hello.js](../../src/connect/hello.js)
+
+[import connect-example.js](../../src/connect/connect-example.js)
+
+基本的にどの_middleware_も`app.use(middleware)`という形で拡張でき、
+モジュールとして実装すれば再利用もしやすい形となっています。
+
+> **Note** _middleware_となる関数の引数が4つであると、それはエラーハンドリングの_middleware_とするという、connectの独自のルールがあります。

package.json

@@ -36,16 +36,19 @@
   ],
   "devDependencies": {
     "babel": "^5.8.23",
+    "connect": "^3.4.0",
     "coveralls": "^2.11.4",
     "eslint": "^1.3.0",
     "eslint-plugin-markdown": "git://github.com/eslint/eslint-plugin-markdown.git",
     "espower-babel": "^3.3.0",
     "gitbook-cli": "^0.3.4",
     "gitbook-plugin-edit-link": "^1.4.1",
+    "gitbook-plugin-include-codeblock": "^1.4.0",
     "gitbook-plugin-richquotes": "0.0.5",
     "gitbook-summary-to-path": "^1.0.1",
     "jsdom": "^6.3.0",
     "mocha": "^2.2.5",
+    "node-fetch": "^1.3.2",
     "npm-run-all": "^1.2.8",
     "power-assert": "^1.0.0",
     "punctuate-coverage": "^1.0.3",

src/connect/connect-echo-example.js

@@ -0,0 +1,34 @@
+"use strict";
+import connect from "connect";
+import http from "http";
+import fetch from "node-fetch";
+import assert from "assert";
+var app = connect();
+// add Error handling
+app.use(function (err, req, res, next) {
+    console.error(err.stack);
+    res.status(500).send(err.message);
+    next();
+});
+// request to response
+app.use(function (req, res) {
+    req.pipe(res);
+});
+//create node.js http server and listen on port
+var server = http.createServer(app).listen(3000, request);
+
+// request => response
+function request() {
+    var closeServer = server.close.bind(server);
+    var requestBody = {
+        "key": "value"
+    };
+    fetch("http://localhost:3000", {
+        method: "POST",
+        body: JSON.stringify(requestBody)
+    })
+        .then(res => res.text())
+        .then(text => {
+            assert.deepEqual(text, requestBody);
+        }).then(closeServer, closeServer);
+}

src/connect/connect-example.js

@@ -0,0 +1,30 @@
+"use strict";
+import errorHandler from "./errorHandler";
+import hello from "./hello";
+import nosniff from "./nosniff";
+import assert from "assert";
+import connect from "connect";
+import http from "http";
+import fetch from "node-fetch";
+const responseText = "response text";
+var app = connect();
+// add Error handling
+app.use(errorHandler());
+// add "X-Content-Type-Options" to response
+app.use(nosniff());
+// respond to all requests
+app.use(hello(responseText));
+//create node.js http server and listen on port
+var server = http.createServer(app).listen(3000, request);
+
+function request() {
+    var closeServer = server.close.bind(server);
+    fetch("http://localhost:3000")
+        .then(res => res.text())
+        .then(text => {
+            assert.equal(text, responseText);
+            server.close();
+        })
+        .catch(console.error.bind(console))
+        .then(closeServer, closeServer);
+}

src/connect/echo.js

@@ -0,0 +1,6 @@
+"use strict";
+export default function () {
+    return function (req, res) {
+        req.pipe(res);
+    };
+}

src/connect/errorHandler.js

@@ -0,0 +1,8 @@
+"use strict";
+export default function errorHandler() {
+    return function (err, req, res, next) {
+        console.error(err.stack);
+        res.status(500).send(err.message);
+        next();
+    };
+}

src/connect/hello.js

@@ -0,0 +1,6 @@
+"use strict";
+export default function (text) {
+    return function (req, res) {
+        res.end(text);
+    };
+}

src/connect/nosniff.js

@@ -0,0 +1,17 @@
+"use strict";
+function setHeaders(res, headers) {
+    Object.keys(headers).forEach(key => {
+        let value = headers[key];
+        if (value !== null) {
+            res.setHeader(key, value);
+        }
+    });
+}
+export default function () {
+    return function (req, res, next) {
+        setHeaders(res, {
+            "X-Content-Type-Options": "nosniff"
+        });
+        next();
+    };
+}

test/connect/hello-test.js

@@ -0,0 +1,97 @@
+// LICENSE : MIT
+"use strict";
+import assert from "power-assert";
+import connect from "connect";
+import errorHandler from "../../src/connect/errorHandler";
+import nosniff from "../../src/connect/nosniff";
+import hello from "../../src/connect/hello";
+import echo from "../../src/connect/echo";
+import http from "http";
+import fetch from "node-fetch";
+describe("connect", function () {
+    var responseText = "test";
+    var server;
+    describe("errorHandler", function () {
+        beforeEach(function (done) {
+            var app = connect();
+            app.use(errorHandler());
+            app.use((req, res, next) => {
+                next(new Error("wrong"));
+            });
+            server = http.createServer(app).listen(3000, done);
+        });
+        afterEach(function () {
+            server && server.close();
+        });
+        it("should return 500 status response", function () {
+            return fetch("http://localhost:3000")
+                .then(res => res.status)
+                .then(status => {
+                    assert(status, 500);
+                });
+        });
+
+    });
+    describe("hello", function () {
+        beforeEach(function (done) {
+            var app = connect();
+            app.use(errorHandler());
+            app.use(hello(responseText));
+            server = http.createServer(app).listen(3000, done);
+        });
+        afterEach(function () {
+            server && server.close();
+        });
+        it("should return response text", function () {
+            return fetch("http://localhost:3000")
+                .then(res => res.text())
+                .then(text => {
+                    assert.equal(text, responseText);
+                });
+        });
+    });
+    describe("sniff", function () {
+        beforeEach(function (done) {
+            var app = connect();
+            app.use(nosniff());
+            app.use(hello(responseText));
+            server = http.createServer(app).listen(3000, done);
+        });
+        afterEach(function () {
+            server && server.close();
+        });
+        it("should return response has `X-Content-Type-Options` header", function () {
+            return fetch("http://localhost:3000")
+                .then(res => {
+                    assert.equal(res.headers.get("x-content-type-options"), "nosniff");
+                });
+        });
+    });
+    describe("echo", function () {
+        beforeEach(function (done) {
+            var app = connect();
+            app.use(echo());
+            server = http.createServer(app).listen(3000, done);
+        });
+        afterEach(function () {
+            server && server.close();
+        });
+        it("should return request as response", function () {
+            var requestBody = {
+                key: "value"
+            };
+            return fetch("http://localhost:3000", {
+                method: "POST",
+                headers: {
+                    "Accept": "application/json",
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(requestBody)
+            }).then(res => {
+                return res.json();
+            }).then(json => {
+                assert.deepEqual(json, requestBody);
+            });
+        });
+    });
+});