express-sessionを利用してセッション機能を実装してみます。
セッション自体については、下記の関連ページもご覧下さい。
セッションを利用する[SESSION][PHPSESSID]
本記事ではExpressを利用しています。「app.js」「index.ejs」ファイルの作成、またフォームからのPOST処理については下記の関連ページをご参照下さい。
関連ページ
Body Parser（body-parser）でPOST処理をおこなう
express-sessionモジュールを利用します。
|
1 |
npm install --save express-session |
package.jsonのdependenciesの項目にexpress-sessionが追加されます。
|
1 2 3 4 5 |
"dependencies": { "ejs": "^2.6.1", "express": "^4.16.4", "express-session": "^1.15.6" } |
今回作成する画面の動作は以下のようになります。
フォームに文字（例：こんにちわ）を入力し送信ボタンを押すと、その文字列がフォームの上に表示されます。次に「セッション確認」リンクをクリックすると「最新のメッセージ：入力文字列（例：こんにちわ）」と表示されます。10秒経って再度「セッション確認」リンクをクリックすると、メッセージなしと表示されます。
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
const express = require('express') const ejs = require('ejs') const bodyParser = require("body-parser") const session = require("express-session"); const app = express() app.set('ejs', ejs.renderFile) app.use(bodyParser.urlencoded({ extended: false })) app.use(session({ secret: "sikounoha", resave: false, saveUninitialized: true, cookie: { maxAge: 10 * 1000 } })); app.get('/', (req, res) => { let message = 'メッセージなし' if (req.session.message != undefined) { message = "最新のメッセージ：" + req.session.message; } res.render('index.ejs', { message: message }) }) app.post("/", (req, res) => { let message = req.body.message req.session.message = message res.render('index.ejs', { message: message }) }); app.listen(3000, () => { console.log('start') }) |
16行目
セッションのタイムアウト時間を10秒に設定しています。
31,32行目
「req.session.キー」でキー（上記ではmessage）を元に、データ（上記ではPOSTされてきたデータ「req.body.message」）を保存しています。
index.ejs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p> <%=message %> </p> <form action="/" method="post"> <input type="text" name="message"> <button type="submit" name="button">送信</button> </form> <a href="/">セッション確認</a> </body> </html> |
参照文献
