ページ

2010-12-25

HTTP と WebSocket でセッションを共有する

こんにちは、 nodejs.jp@masahirohです。 JavaScript Advent Calendar の最終日です。クリスマスだけど空気を読まずに Node.js の地味な話をします。ごめんなさい。

さて、 Node.js では Socket.IO を使えば、 WebSocket を使ったアプリケーションを割と簡単に作れるわけですが、これを Web フレームワークと一緒に使う場合、どうやってセッションを共有したらいいんだろう?とふと思いました。ユーザ名とパスワードをメッセージにのせたらいいんですかね? いや、セッション ID をメッセージにのせればいいのかな? うーん・・と思いながら Github をうろうろしていたら SessionWebSocket というアプリケーションを見つけました。セッション管理機能を追加する方法が結構参考になったので、コードリーディングをします、の予定だったのですが、動きがおかしかったので、一部書き直しつつ、コードリーディングします。説明の都合上、元のコメントは残していません。


解説に使ったソースコードは ここ の ma-read ブランチにあります。


では、解説していきます。まず、おおまかに言うと、セッション管理の仕組みは次のようになっています。


  1. ユーザが最初にページを開いたときに、クライアントは XHR でセッションのトークンを要求します。
  2. サーバはそのトークンをキーとしてセッションオブジェクトを管理しています。クライアントからの要求に応えて、トークンを返します。
  3. トークンを受け取ったら、 WebSocket のコネクションを開いて、そのトークンを送信します。
  4. WebSocket サーバはトークンを受け取ったら、管理しているセッションの有効期限をチェックし、有効ならセキュアなセッションとみなします。

server.js

では、サーバ側のコードから見ていきます。

依存しているモジュールをインポートしています。インポートしているのは、 Connect, Socket.IO, SessionWebSocket です。
var connect = require("connect");
var io = require("socket.io");
var sws = require("../sws.js")();
まずは Connect で Web サーバをつくります。 Connect は Web アプリケーション用のミドルウェアフレームワークです。決められたインターフェースに従ってつくられたアプリケーションを pluggable なミドルウェアとして扱うことができます。

createServer の引数に渡しているのがミドルウェアです。
var server = connect.createServer(
HTTP のセッションを管理しています。
  connect.cookieDecoder(),
  connect.session(),
今回の主役のひとり。セッションのトークンを発行します。
  sws.http,
これは静的ファイルを扱います。
  connect.staticProvider(__dirname+"/static")
);
サーバをポート 8000 番で起動します。
server.listen(8000);
次に、 WebSocket のサーバを準備します。

さきほどの Web サーバが WebSocket を扱えるようにしてやります。
var socket = io.listen(server);
イベントハンドラを設定します。引数に渡している sws.ws がもうひとりの主役です。 WebSocket 側のセッションを管理しています。こんなふうにコールバックにコールバックを渡すあたりがたまらないですね。
socket.on('connection', sws.ws(function(client) {
認証済みの場合のイベントハンドラです。セッション ID を出力してみます。
  client.on("secure", function() {
    console.log("SECURE");
    console.log(client.session.req.sessionID);
  });
認証が済んでいない場合のイベントハンドラです。
  client.on("insecure", function() {
    console.log("INSECURE ACCESS");
  });
メッセージ受信時のイベントハンドラです。
  client.on("message", function(msg) {
    client.send(msg);
    console.log("MSG:"+msg);
  });
}));

sws.js

var util = require('util');
では、いよいよセッション管理のミドルウェアについて見ていきます。

関数を exports にセットしています。先ほどアプリケーション側で require したときに呼んでいました。引数からオプションを受け取るために関数にしていたわけですね。
module.exports = function verifier(options)
{
デフォルトの設定です。セッションの生存期間 (ttl = time to live) を設定しています。
  var defaults = {
    ttl: 30*1000 // 30 秒
  };
引数でもらったオプションを反映させています。
  for (var k in options) {
    defaults[k] = options[k];
  }
複数のセッションを扱うためのオブジェクトです。
  var session_jar = {};
この関数は、セッションのトークンを発行するミドルウェアと、 WebSocket 用のセッション管理の関数をプロパティにもつオブジェクトを返します。
  return {
先ほど createServer に渡していたミドルウェアです。 リクエストオブジェクト、レスポンスオブジェクト、next という関数を引数にとる、というのが決められたインターフェースです。
    http:function give_token(req, res, next) {
リクエストのヘッダを参照し、 'x-access-request-token' フィールドが 'simple' だったらトークンを生成します。
      if (req.headers["x-access-request-token"]) {
        if (req.headers["x-access-request-token"].toLowerCase()==="simple") {
          var token = Math.random();
ユニークな値をとれるまで繰り返します。
          while (session_jar[token]) {
            token = Math.random();
          }
トークンをキーとしてセッションデータと発行した日時を保存しています。 req.session は connect.session が生成したものです。
          var tmp = Date.now();
          session_jar[token] = {
            session: req.session,
            date: tmp,
            id: req.sessionID
          };
レスポンスを生成します。トークンと発行日時を JSON で返しています。
          res.writeHead(200);
          res.end('{"x-access-token": "'+token+';'+tmp+'"}');
          return;
        }
      }
'x-access-request-token' フィールドがリクエストのヘッダにない場合は、このミドルウェアはやることがないので、 next を呼んで次のミドルウェアに処理をまかせます。
      if (next) {
        next();
      }
    }
こちらは WebSocket のセッションを管理する関数です。
    , ws: function attach_client(cb) {

      return function route_client(client) {
トークンの有効性をチェックする関数を定義します。
        function verify(token) {
          var tmp = session_jar[token];
セッションの期限切れをチェックしています。認証されたら削除しているので、トークンは1回だけしか使わない仕様になっています。
          if (tmp && tmp.date > Date.now() - defaults.ttl) {
            var session = tmp;
            delete session_jar[token];
            return session;
          }
          return false;
        }
'message' に対するイベントハンドラを設定します。トークンをチェックしています。この関数を実行するのは最初にメッセージを受信したときだけです。
        client.once('message', function first_verify(msg) {
メッセージで渡されたトークンが有効な場合は、クライアントにセッションデータを設定して、'secure' イベントをクライアントに対して発行します。
          var session = verify(msg) || false;
          if (session) {
            client._session = session;
            client.session = session.session;
            client.emit("secure");
セッションが有効だったので、 client.on を元に戻して、退避しておいた 'message' に対するイベントハンドラをバインドします。退避する処理は下の方にでてきます。
            client.on = oldon;
            for (var i = 0, l = onmsgs.length; i < l; i++) {
              client.on('message', onmsgs[i]);
            }
          }
セッションデータがないので 'insecure' イベントをクライアントに対して発行します。
          else {
            client.emit("insecure");
          }
        });
'message' イベントに対するイベントハンドラは、セッションが有効かどうかのチェックが済んだあとから実行されるようにしたいので、 client.on を 'message' イベントのハンドラだけ退避するように書き換えます。
        var onmsgs = [];
        var oldon = client.on;
        client.on = function(name, fn) {
          if (name === "message") onmsgs[onmsgs.length] = fn;
          else oldon.apply(this, arguments);
        };
        
呼び出し元にクライアントを渡します。
        cb(client);
      };
    }
  };
};

client.js

次にクライアント側を見ていきます。

SessionWebSocket で、トークンのやりとりをしてから、 'message' に対するイベントハンドラをバインドします。
SessionWebSocket(function(socket){
 socket.on('message',function(msg){
  console.log("SWS:",msg);
  });
セッションが確立した場合、このメッセージは受信されます。
  setInterval(function() {
    socket.send('Succeed!');
  }, 1000);
});
セキュアでないコネクションを示すための例です。こちらで送信したメッセージは弾かれます。
var socket = new io.Socket()
socket.connect();
socket.send("OH NOES");

sws.js

次に クライアントサイドのモジュールのコードです。トークンを取得して、返ってきたらコネクションを張り直します。
function SessionWebSocket(cb) {
  var xhr = new XMLHttpRequest()
  xhr.open("GET","/?no-cache="+(new Date()+0));
トークンを取得するためのヘッダを設定します。
  xhr.setRequestHeader("x-access-request-token","simple");
レスポンスに対するコールバックを設定します。
  xhr.onreadystatechange = function xhrverify() {
受信完了
    if (xhr.readyState === 4) {
      var tmp;
      try {
トークンが返ってきていたら、新規に WebSocket の接続を開始します。
        if (tmp = JSON.parse(xhr.responseText)["x-access-token"]) {
          var socket = new io.Socket();
          cb(socket);
          socket.connect();
取得したトークンを送っています
          socket.send(tmp.split(";")[0]);
        }
      }
      catch(e) {
        throw new Error("XMLHttpResponse had non-json response, possible cache issue?")
      }
    }
  };
リクエストを送信します。
  xhr.send();
}




以上でおしまいです。個人的には Connect のミドルウェアとしてセッション管理を実装するあたりや、イベントハンドラを一旦避けるあたりの処理が面白かったです。改善の余地がちょこちょこあるので、手を入れていこうと思います。


* このドキュメントは docco をつかってコードから生成しました。

6 件のコメント:

  1. Flipkart is Offering Cashback Offers Flipkart AXIS Cashback Offer You will get upto 75% Discount

    Flipkart is Offering Cashback Offers Flipkart YES Cashback Offer You will get upto 75% Discount

    Flipkart is Offering Cashback Offers Flipkart Phonepe Cashback Offer You will get upto 75% Discount

    Flipkart is Offering Cashback Offers Flipkart Cashback Offer You will get upto 75% Discount

    Flipkart is one of the biggest world wide eCommerce Site flipkart cashback offersso

    Flipkart is one of the biggest world wide eCommerce Site Flipkart hdfc offersso

    返信削除
  2. flipkart is Offering Cashback Offers Flipkart hdfc cashback offers You will get upto 75% Discount

    Flipkart is Offering Cashback Offers Flipkart SBI Cashback Offer You will get upto 75% Discount

    Flipkart is Offering Cashback Offers Flipkart AXIS Cashback Offer You will get upto 75% Discount

    Flipkart is Offering Cashback Offers Flipkart YES Cashback Offer You will get upto 75% Discount

    Flipkart is one of the biggest world wide eCommerce Site so here you will getFlipkart big billion day offers

    Flipkart is one of the biggest world wide eCommerce Site so here you will getflipkart bank cashback offersso


    Flipkart cashback offers on mobiles,
    Flipkart cashback offers,
    Flipkart cashback coupons,
    Flipkart upcoming offers on mobiles,
    Flipkart HDFC cashback offers,
    Flipkart SBI cashback offers,
    Flipkart AXIS cashback offers,
    Flipkart Citibank cashback offers,
    Flipkart cashback on mobiles,
    Flipkart cashback offers today,
    Flipkart big billion day cashback offers,
    Flipkart big billion days cashback offers,
    big billion day cashback offers,
    Flipkart big billion days offers,
    flipkart cashback on mobiles,
    flipkart citibank offer,
    sbi credit card offers on flipkart today,
    flipkart upcoming offers on mobiles,
    hdfc credit card offers on flipkart,
    flipkart upcoming big billion day,
    flipkart upcoming sale,
    sbi credit card offers on mobiles,
    flipkart offers today,
    flipkart offers on mobiles,
    flipkart offers today mobile phones,
    flipkart cashback offers,
    flipkart cashback coupons,
    flipkart sale today offer,
    flipkart cashback offers today,
    cashback offers,
    flipkart cashback offer today

    返信削除

  3. Amazon cashback offers 2018Cashback Deals with sbi,hdfc,icici,axis banks,credit&debit card,
    Amazon Cashback Offers 2018 Upto 65% Cashback Deals, AMAZON CASHBACK OFFERS 2018, DISCOUNT COUPON OFFERS 2018, Amazon cashback offers with sbi hdfc icici axis banks credit&debit card offers more. amazon cashback offers2018,amazon india cashback,amazon offers on mobiles,amazon cashback2018,amazon offers 2018



    cashbackoffer amazon coupon code| amazon coupon promo code| amazon offer coupon code|
    amazon coupon code| amazon coupon promo code| amazon offer coupon code


    About Airport Parking,Accor HotelsAffordable Asia,Agoda,Air Asia Go,Akbar Travels,Amoma,Azores Getaways,Big Bus Tours,Booking,CarmelLimo,CatchThatBus,CheapAir,CheapTickets Singapore,Cleartrip,Ctrip English speaking,Etihad Airways,Expedia,Expedia India, Expedia Indonesia Hotels, Flights & Packages,Travel Coupons, Offers: Flights, Hotels, Bus Promo Codes

    CashBack Offers, Discount Coupons, Bank Offers & Promo Codes


    flipkart cashback offer,
    CashBack Offers, Discount Coupons


    Pepperfry, Mobikwik, Firstcry, Fab Hotels, Ebay, Aliexpress, Adidas, Healthkart, Pepperfry, Shoppers Stop, FlipKart, Amazon, Lurap, Giftalove, Reebok, SBI Card, CoolWinks, Housejoy, Shine, Jaypore, netmeds, FabAlley, Prettysecrets, FlowerAura, Clovia, Shopclues, Printvenue, Firstcry, Travelguru, Myntra, Zivame, Jabong, Ferns N Petals,Healthkart, Pepperfry, Shoppers Stop, FlipKart, Amazon


    CashBack Offers, Discount Coupons, Bank Offers & Promo Codes


    CashBack Offers, Discount Coupons, Bank Offers & Promo Codes

    CashBack Offers, Discount Coupons, Bank Offers & Promo Codes

    返信削除
  4. nice post.super article .iam follow your website.


    Flipkart CashBack Offers-SBI, HDFC, ICICI, Citibank Cards&Flipkart HDFC Cards Offers"
    flipkart bank offers,flipkart cash back coupons,flipkart offers 2018,flipkart coupons 2018,flipkart cashback offers 2018,flipkart cashback offers,flipkart cash back offers,flipkart cashback coupons,flipkart cashback,Flipkart Cashback Offers,Flipkart Bank Offers,Flipkart Deals 2018, flipkart upcoming offers on mobiles, hdfc credit card offers on flipkart 2018 flipkart sbi offer big billion day, flipkart hdfc offer, flipkart hdfc offer august 2018 sbi flipkart offer 2018 flipkart icici offer


    FLIPKART CITIBANK OFFER,FLIPKART ICICI OFFER,
    SBI CARD OFFERS ON FLIPKART,
    FLIPKART CASHBACK OFFER TODAY,FLIPKART CREDIT CARD OFFERS,
    ALL BANK CREDIT CARD OFFERS,HDFC CREDIT CARD OFFERS ON FLIPKART,
    AXIS BANK CREDIT CARD OFFERS ON FLIPKART,
    CITIBANK CREDIT CARD OFFERS ON FLIPKART,SBI FLIPKART OFFER



    Flipkart Cashback Offers||Flipkart Bank Offers||Flipkart Deals 2018||flipkart upcoming offers,"
    "Flipkart Cashback Offers || Flipkart Bank Offers || Flipkart Deals 2018 ||" "flipkart upcoming offers on mobiles, hdfc credit card offers on flipkart 2018, sbi credit card offers on flipkart today, flipkart hdfc offer terms and conditions, sbi flipkart offer 2018, flipkart cashback phonepe, flipkart hdfc offer august 2018, flipkart icici offer




    "cashback,vouchers,coupons,discounts,offers,deals,promo codes,&Cashback Offers"
    "cash back coupons "Coupons, Discounts & Offers on 1500+ Shopping Sites in India. Get Extra Cashback Everytime You Shop Online using Coupons of Amazon, Flipkart, Tata CLiQ, Nykaa etc."cashback, vouchers, coupons, discounts, offers, deals, promo codes,Coupons, Promo Codes & Cashback Offers



    Offersable - Cash Back Offers | Discount Coupons | Bank Offers | Promo Codes.
    Find best Discount Coupons, Cashback Offers, Hot Deals Bank Offers for all major e-commerce stores in the India

    返信削除

  • HOME
  • ABOUT
このページの先頭へ