Node.js+TypeScriptのフレームワークとクライアント側の処理

2019-04-06 13:56:08

 Node.js+TypeScriptのフレームワークのクライアント側の処理を実装を行いました。クライアントはSEO対策のため最終的に出力するJavaScriptはIE11で実行できる範囲に限定しています。しかし今回は非同期処理を簡単にするための手を色々と打っています。


 まず https://www.promisejs.org/polyfills/promise-7.0.4.min.jsからPromise機能を追加、TypeScriptのトランスコード機能でasync/awaitが使えるようになりました。IE11で動作確認済みです。

 現在開発中のフレームワークを使うと、こういう感じでWebAPIの作成と、クライアントからの利用が出来るようになります。

サーバ側
import {Module} from '../ams/Module'

export class Test extends Module{
    JS_set(value){
        this.getSession().setSessionItem("TEST",value)
        return true
    }
    JS_get(){
        return this.getSession().getSessionItem("TEST", 0)
    }
}

クライアント側
async function Main(){
    const adapter = new JSW.Adapter('/')
    const number = await adapter.exec('Test.get')
    await adapter.exec('Test.set',number+1)
    console.log(number)
}
Main()

 クライアント側で通信用のアダプタを作成し、サーバ上のメソッドを名前指定で呼び出すことが出来ます。この名前はセキュリティホールを生まないように、呼び出されるメソッドには「JS_」を付けるようにしてあります。

 アダプター内部でセッション情報を自動生成し、セッションごとのデータをサーバで保存できます。また、ブラウザの更新ボタンを押してもセッションは壊れません。セッションはブラウザ上で共有されるグローバルデータとタブごとに記憶されるセッションデータに分けてサーバに記憶されます。セッションデータを利用すれば、タブを複数開いて作業するときに、別ユーザでログインすることも可能となります。

 このサンプルではサーバから数値を取得して+1し、再びサーバに送るというものです。ブラウザの更新ボタンを押すごとに値が一つ増えていきます。この値はサーバ側に記憶されており、自動生成されるセッションハッシュがキーとなって入出力の権限が管理されます。このセッション情報はユーザ情報と結びつけることによって、WebAPIの認証が簡単に行えるようになります。

 その他、同時期に発生したサーバに送信する命令を自動的に集約し、一回の送受信にまとめるような細工も入れてあります。

 ということで今後開発していくシステムの開発工数の短縮と、応答性能の向上が期待できます。