ExpressでWebサーバー3

分散型共有スペース（のようなもの）を作ってみる

1 骨組

2 基本動作の準備

3 少し内容のあるページ

4 クライアントからサーバへの非同期通信

（Web技術の大きな流れについて補足）

• 当初のWeb技術は、リンク（アンカー）をクリックすると、 別のページにジャンプする（「ページ遷移」と呼ぶ）ことで、 情報（ページ単位の）と情報を繋いでいた。
• 最近のWeb技術では、クリックによりページ遷移をせず、 代わりにサーバとちょっとした通信を行う（その結果が画面の一部に反映される）、という動作モデルに基づいている。

ここまでは前回扱った。

5 サーバからクライアントへの通信（ページへのアクセス時）

• これまでに作った図形を、再表示しても維持させるよう改良してみる。
• 前章で 配列aに入っているものをデータとして送信すればいい。
  • その際、jsのコード（server.js) の上にある変数aを、

  • res.render（など）の第２引数（オブジェクトの形式；右図参照）を通じて、

        res.render('1',{a:a})
    

  • テンプレートエンジン pug(や jade)に渡し、
  • その中では引数にしたオブジェクトの属性名を変数のように使い、
  • 用意されたタグ（等）のパターンの中に、
  • 繰り返しの構文（JavaScriptの文法で）を使ったり、
  • 変数展開で値を埋め込む。

• 以下がテンプレートに追加すべき記述の例

    - a.forEach(([x,y])=>{
      div(style=`left:${x}px;top:${y}px;`)
    //- ↑は pugの場合の記法（バッククォートで囲む ES6と同じ記法）
    //- jadeの場合は下のように書く
    // div(style="left:#{x}px;top:#{y}px;")
    - })
  

  • 配列 a（JavaScriptからpugに渡された）の各要素について繰り返しを行うのが、forEach高階メソッドの使われ方。
  • 引数として関数が括弧内に書かれる（functionでも ダブルアロー(=>) 記法でもいい。ここでは後者を使っている。
  • 配列の各要素それぞれがさらに（２要素からなる）配列であるとき、その２つをそれぞれ別の変数に分割して代入する記法を使っている。
• これで、複数のブラウザ（端末）からこのURLにアクセスした場合に、 各画面に同じ絵柄が表示されるようになった筈。
  • ただし、ページを開いた後で追加した図形については、
    他の端末に反映はされない（これについては次の章で）。

• ついでに、端末を区別するための隠しデータもタグとして送っておこう。

    input(type="hidden",name="clientId", value=`${id}`)
    //- ページテンプレートの末尾等に追加
  

  • このデータの使い方は後ほど。

  • なお、pug(jade)で変数 id として扱われる値は、 以下のように res.renderを介して渡す（前出の 呼出しを少し変更）。

    res.render('1',{a:a, id:(new Date).getTime()})
    

    

6 サーバからクライアントへの非同期通信

• （一般論として）Webでは、クライアントからのリクエストがあり それに応える形でしか、通信は成立しない。
  • 今はWebSocketという（いわば両者の間を繋ぎっぱなしにすることで）リアルタイムの双方向通信を実現する技術があるが、
    それについては（各自調べてみて下さい）今ここでは扱わないことにしておく。
• ポーリングを通じて（クライアントが）受け取りたいデータは、
  • 他の端末で生成された図形（の座標値）で、
  • （前回までのポーリングで受け取っていない）新しいもの。
  • これを実現する方法はいくつかあるが（サーバで選別するかクライアントで選別するか、等）、
  • ここではサーバで選別させることにしておき、
  • 必要なデータはクライアントから送ることにする。
• 準備としての変更：

  1. クライアントに記録するデータ（のための要素）を１つ増やす。HTMLで表現するならば、

        <input type="hidden" name="recentTime">
     

     こうなるが、これを送信するための pugのコードは、

        input(type="hidden", name="recentTime",value=`${id}`)
     

     送信すべきものが id と同じでいいかどうか、 微妙なタイミングの問題があるかどうか、 これについてはあとで考えてみよう。。

  2. 図形生成時にサーバに送信するデータを追加する。
     クライアント側の変更：

        var id=$(':hidden[name="clientId"]').val()
        $.get(`/b/${x}/${y}/${id}`) ')		
     

     サーバ側の変更：

        app.get('/b/:x/:y/:clientId',(req,res)=>{
            var {x,y,clientId}=req.params
     

  3. サーバで配列aに記録するデータを（座標値 x,y に加えて）２つ追加する。 1つは前項で受け取った、clientId, もう１つは、 生成された時刻。

           // 前項の app.getの続き：
           var time=(new Date).getTime() 
           // 追加するデータ（現在時刻を表す数値）
           console.log(`x=${x}, y=${y}, time=${time}, clientId=${clientId}`)
           a.push([x,y,time,clientId])	
           res.send('')
       })
     

  • 現在時刻を現す数値を得る方法は前章でも使ったもの。

• ポーリング（クライアントからの定期的問合せ）を行う （ための、まずは枠組みだけ）。

    function poll() {
        var id=$(':hidden[name="clientId"]').val()
        var recentTime=$(':hidden[name="recentTime"]').val()
        $.get(`/q/${id}/${recentTime}`,(data)=>{
            // ...		
        })
    }
    setInterval(1000,poll)
  

  • その都度の解説を省略してきているが、この種のプログラムで
    • app.xxxx や res.xxxx を呼んでいれば サーバ側のコード
    • $ を多用していれば（jQueryの関数ですね） クライアント側のコード

    という区別ができることは理解しておいて下さい。

  • 先に使った $.get では送信のみ行った（コールバック関数を渡さなかった）が、
    今回は、コールバック関数を使う（まだ枠だけだが）

• このポーリングを受け付けるサーバ側の動作：

    app.get('/q/:clientId/:recentTime',(req,res)=>{
        var {clientId,recentTime}=req.params
        var now=(new Date).getTime() 
        var r=a.filter(([x,y,time,id])=>{
            return time>recentTime and id!=clientId 
        })
        res.json({a:r})			
    })
  

  • 配列 a にあるデータのうち、所定の条件（高階関数filter に渡される無名関数で示したもの）を満たすものを、
  • JSON形式で送信する。
    • a というメンバを１つだけ持つオブジェクト
    • a の値が配列になる
  • 選別の条件は２つ。
  1. クライアントの要求中のrecentTimeパラメータ（クライアントで 生成した最新の図形の登録時刻）よりも新しい。
  2. 当該クライアントで生成されていない

• 次項に備えて、クライアントプログラムを（前に作ったものに対し）変更しておく。

    function bx(x,y){	// ローカルで矩形生成
        $('body').append(
            $('<div/>').css({
                left: x+'px', top: y+'px'
            })
        )
    }
    function sendBox(x,y){	// サーバに通知
        var clientId=$(':hidden[name="clientId"]').val()
        $.get(`/b/${x}/${y}/${clientId}`)
    }
    // 前回 bx() として１つだったものを２つの関数に分けた ので、これを呼ぶ側も
    function c(ev) {
        bx(ev.pageX,ev.pageY)
        sendBox(ev.pageX,ev.pageY)
    } // 別々に呼び出すことになる
  

• これのレスポンスを受け取ったクライアントの動作：
  (関数pollの中で $.getに渡したコールバック関数の部分のみ以下に書く）

    (data)=>{
        data.a.forEach(([x,y,time,dmy])=>{
            bx(x,y)
        })
        var time=
            Math.max(...data.a.map(e=>e[2]).concat(recentTime))
        $(':hidden[name="recentTime"]').val(time)
    }
  

  • data.a でサーバから受け取った配列にアクセスする。
  • 配列の各要素（それぞれがまた長さ4の配列）から添字2の要素（各図形の登録時刻）を取り出して、それを連ねた新しい配列を作らせるために map を呼んでいる。
  • その値に、recentTimeを concat(配列の連結）するのは、配列が空だった時のために備えたもの。

7 補足解説

データの流れ

プログラムの理解を助けるため、ここで 右図に沿って整理しておく。

このアプリケーションでは３種類のHTTP呼び出しが行われる。

1. 初期画面：/1
   • 通常のページ遷移を伴う呼び出し。
   • ページの枠組みと、すでに生成済みの図形が送信される。
2. データ生成通知：b/:x/:y/:clientId
   • クライアントからサーバへの通知のみ行う。
     （応答のデータは空っぽ）
   • この通知はリアルタイムに（クライアントでイベントが発生するとすぐに）行われる。
3. 最新データの要求：/q/:clientId/:recentTime
   • （従来のWebでは）下向きのデータの流れを、サーバ発信で生成でいないため、
     クライアントからサーバへの定期的問合せを用いる。
   • このプログラムでは1000ミリ秒ごとに問合せをしているが、 この間隔が
     長すぎると動作がぎこちなくなり、短すぎるとサーバが過負荷になる可能性があるので、ほどよい値の調整は必要。
   • ここでデータの重複（何度も同じデータの授受を行うなど）を防ぐために前章に述べたような工夫を行い、 clientId, recentTime といったパラメータをやりとりすることが必要になった、という次第である。

コーディング技術

• （参考情報）上のプログラム（の一部）を当初は以下のように書いていた。

    var time=
        Math.max.apply(null,data.a.map(e=>e[2]))||recentTime
  

  が、これでは動作が不安定になるようだ。

  • Math.max.apply は、複数の引数の最大値を求めるメソッド（Math.max）を配列に適用する書き方（として知られていた）。
    • 配列が空の時に nullを返すとしたら、
    • その時はrecentTimeを使うように、
    • || を使って代替の値を与えるようにしていた。
    • もちろん上記の … で書いていい。
    • 実際には、配列が空の時のMath.maxは値-Infinity を返すので、
    • 結果的にはすべてのデータがこの値（生成時刻）よりも新しいことになり、
    • 同じ図形を何度も生成してしまうことになる。
• 上記の、最大値を求める手順について、
  • 現在は、サーバ側で、（配列に、pushで追加しているので）データは生成順に並んでいるので、 maxをとる必要はない（最後のデータの値を使うことができる）が、 サーバでのやり方が変わる可能性もあるので、
    念のため受け取り側でmaxを算出している。
  • もっとさかのぼれば、maxの算出すらサーバ側で行う こともできる（そのときは、{a:r, recentTime:time} のような形のJSONを作って応答として送ることができる。

  • 配列が空かどうかの判別、配列に対する繰り返し、など、 従来のプログラミング技術でも書ける

        if(a.length>0) {
            for(i=0;i<a.length;i++) {
                var time=a[i][2]
        ...
    

    が、いい機会なのですっきりする書き方を学んでおこう。

• 改良（リファクタリング）の余地は多々あるだろう。たとえば
  • サーバからクライアントにデータを渡す方法として
    タグに密かにデータを埋め込む以外に、Cookieによる方法もある
  • 受け取った値（ClientIdなど）を、必要のあるときに 毎回タグから $関数で取り出すのでなく、
    最初に（$(()=>{}の中で）変数に取り込んでおいて、
    以降はその変数に読み書きするのもありだろう。

  • 例えば recentTime という変数があったとき、

        data.a.forEach(([x,y,time,dmy])=>{
            bx(x,y)
            recentTime=Math.max(time,recentTime)
        })
    

    のように１つずつ処理していく書き方もできるだろう。

  • DIV要素（図形）の生成を、
    1. 初期画面を生成するサーバ側
    2. 更新データを受信したクライアント側

    の２か所で行っているが、
    生成する要素がもっと複雑になったときに、 プログラムの変更すべき箇所が２か所あることは 望ましいことではない。対策としては、

    1. サーバ側でHTML(の一部分としてのタグ文字列） を生成して送信する（要素生成のコードをサーバ側にまとめる）。
    2. 画面の初期化時にも図形データをAjaxで送信する （図形生成のコードはクライアント側にまとめる）。

    といった可能性があるだろう。

今後に向けて

• これから各自でテーマを設定して、 自分で研究を進めてみる期間としましょう。
• おおむね一か月をめどに、 テーマを設定して下さい。
  • （テーマのヒントについては、おらほねっとのトピ（またはこのファイル）を参照）
  • 今日、それを宣言して下さい。