from electron 2 web

インターネットのリソースを無駄遣いして検索におけるUXを下げてごめんなさい

圧倒的文章力のNASAでゴミみたいなチラ裏のようなメモを量産してしまい全ての"Web開発者"にごめんなさい

卒研で使ったnode.jsのexpressのミドルウェア(ライブラリ)・Tips等

この記事はothlotechアドベントカレンダーの7日目の記事です。

久しぶりにweb系の記事を書こうと思う。

というのも前の方がJSのこと書いてたのでね。

ちなみに珍しく公開はしてない(途中までgithubに上げてたがデプロイにherokuToolbeltを使ってるのでそれぞれが分かれてるのでめんどくさくなってやめた)

package.jsonはこんな感じ。

  "dependencies": {
    "body-parser": "^1.15.1",
    "cookie-parser": "^1.4.3",
    "cors": "^2.7.1",
    "eslint": "*",
    "eslint-plugin-node": "^1.5.1",
    "express": "*",
    "express-session": "^1.13.0",
    "express-validator": "*",
    "imgur": "^0.1.7",
    "mocha": "*",
    "mysql": "^2.11.1",
    "nodemailer": "^2.4.2",
    "passport": "^0.3.2",
    "passport-facebook": "^2.1.1",
    "passport-google": "^0.3.0",
    "passport-twitter": "^1.0.4",
    "socket.io": "*",
    "supertest": "^1.2.0"
  },
  "main": "express.js",
  "scripts": {
    "test": "mocha test",
    "start": "node express.js",
    "lint": "eslint main.js express.js router.js socketinit.js sql.js utils.js"
  },

はいじゃあ行きます.

express

まあこいつが本体。こいつにバリバリ依存している。(メテオとかkoaとかあるけどどのくらい変わるんだろうな?

express.Routerで肥大化を防ごう!

express-session

expressにセッションをつけるやつ。かなり便利だが概念が理解しにくいかもしれない。また、初期化が多少めんどくさいかも。

req.session.任意の値=任意のデータ

でセッションごとにlocalstrageを使えるような感じ。(この説明いいな

body-perser

postデータをreq.bodyで取ってくるときに必要。なんとこれがないとpostデータがとってこれない(自分でパースする変態は知らないです)

req.queryのほうはそんなのなしでも行けるのにね。

メール系ライブラリ

nodemailerとあともう一つあったがnodemailerのほうが良かった。こいつもexpressのミドルウェア

流石にメール投げるので初期化がめんどくさい。

helmet

レスポンスヘッダーにセキュリティ系のヘッダを自動でつけたりしてくれたり、HSTSしてくれたりする。

かなり良さみがあふれる

nocacheオプションもあるのでこいつonにすれば「あれ・・・治らない・・・キャッシュ効いてるだけだったorz」という心配もなくなる

P.S. helmetではcsrfトークンの実装はされていないのでcsrfの対策をするにはcsurfというライブラリを使うとよさそう。使ってみる

socket.io

websocketを作るときに使う。

websocketは仕様であって実装ではない。そのためいくつもの実装(ライブラリ)がある。

というのもsocket.ioとexpressの連携が死ぬほど大変だったのにほかの実装だと簡単に連携できてたからね・・・

passport

twitterとかと連携するやつ。こいつもexpressのミドルウェアとして使用することもできた(気がする)

バリデーション系

node-validatior(validator.js)、express-validatorの2つがある。validator.jsをnpmで入れるときの名前がnode-validator。

express-validatorはvalidator.jsのラッパーライブラリ。(express特化

express-validatorのほうはexpressのミドルウェアとして使用する。

validator.jsのほうはサーバーサイドだけでなくクライアントサイドでも使用できる。

ミドルウェア同士の連携

ホントに説明したかったのはここ。

ミドルウェア同士で連携ができる。

例えば・・・

  • express-session+websocket+express

websocketとexpressでセッションを共有できる。死ぬほど大変だった。2~3週間かけた。ミドルウェアまでデバッグしたりした。

ページを開くごとにセッションは作られるが、セッションストアは極力省メモリーな設計なので実際にセッションに値が含まれない限り、セッションストアにlocalストレージは作られない

e.g.

var express = require("express");
var session = require("express-session");
var socket = require("socket.io");
var app = express();

var cookiep=require("cookie-parser")//cookie-parser
var memoryS=session.MemoryStore;
//console.log(memoryS.get)//出ない・・・
var sessionStore=new memoryS();
var sess=session({secret:"test",store:sessionStore})
//console.log(sessionStore.get)
app.use(sess)
app.use(cookiep());
app.get("/",(req,res)=>{
    res.send({"data":"helloworld"})
})

app.get("/sendc",(req,res)=>{
    ws.sockets.emit("server2client",{"aaa":"eeeeeeeeeeee"})
    res.send("sended")
})

app.get("/sends",(req,res)=>{
    req.session.user="hello"+Math.random()
    //res.send("added")
    res.sendfile("./test/index.html")
})

app.get("/send_only",(req,res)=>{
    ws.to(arr[0]).emit("server2client",{"test":"helloworld"})
    res.send("sended")
})

app.get("/session_add",(req,res)=>{
    req.session.user="hello"
    res.send("added")
})

app.get("/session_see",(req,res)=>{
    res.send("session is "+req.session.user)
})

app.get("/store/see",(req,res)=>{
    
    sessionStore.get(req.query.aaa,function(err,session){
        console.log(err)
        console.log(session)
        res.send(sessionStore);
    })
})

var ws = socket.listen(app.listen("3001"))
var arr=[]
ws.sockets.on("connection",function(socketin){
arr.push(socketin.id)
console.log(arr)

    socketin.on("client2server",function(data){
        console.log(socketin.handshake.headers.cookie)
        //取ってきたcookieを頑張ってパースする
        //ここの処理ができるミドルウェア誰か知らないですか・・・?
        sessionStore.get(parsedcookie,function(err,session){
            console.log(err)
            console.log(session)
            res.send(sessionStore);
        })
    })

    console.log("connect");
})

console.log("listened.")

  • express-session+何らかのDB

通常express-sessionはMemoryStoreに保存するけどDBを使うこともできる。

ちなみにMemoryStoreオブジェクト、公式にも解説がなくて死ぬほど大変だった

  • express-session+passport

passportで認証した情報をセッションに保存するようなこともできる。

e.g.を載せようと思ったがどっかに消えてた

Node.js+Express+Passportで認証情報をセッションに保存する方法 - Qiita

conclusion

vueでssrとかしたいし、もっとすらすらnode書けるようになりたい。webpackとかもがりがり使えるようになりたいし、mocha+supertestももっとすらすら書けるようになりたい