ユーザ用ツール

サイト用ツール


kitchen_timer:クライアントサイドスクリプトの開発

クライアントサイドスクリプトの開発

JavaScriptファイル

これも、chatサンプルからコピーして作成すると良いですが、chatサンプルのものは汎用性が高くなるようにつくってあるので、それからほとんどの部分を消すようになります。
以下が必要なスクリプトです。

kitchen_timer.js
var ipc = new Alone.Ipc();
 
(function() {
    // ServerSentEvnetを使って、サーバからのリクエストを処理する。
    // パラメータ
    // action:"ssev"は固定値。
    // ipc:は、サーバー側受付IPC名を指定する。
    var uri = Alone.make_uri({ action:"ssev", ipc:"listen_ssev" });
    var evs = new EventSource( uri );
    evs.onmessage = function( ev ) {
        var data = JSON.parse( ev.data );
        console.log( data );
        if( data.value ) {
            document.getElementById( "time_display" ).textContent = data.value;
        }
        if( data.sound ) {
            document.getElementById( "timeup_sound" ).play();
        }
    }
}).call( this );

ポイントは以下の点です。

  • ipc変数にIPCオブジェクトを生成しておき、ボタンのクリックに備える。
  • ServerSentEventsでは、valueリクエストが来たらそれをtime_displayに表示する。
  • soundリクエストが来たら、先に読み込んであったアラーム音ファイルを再生する。
kitchen_timer/クライアントサイドスクリプトの開発.txt · 最終更新: 2014/11/20 17:14 by hirohito