ＣＤ、ＬＰ管理と音楽のデータベース・システム　RecLib : を用いたセッション維持（keep alive）を試してみた

を用いたセッション維持（keep alive）を試してみた </h2> </header> <div class="item-content entry-content" itemprop="articleBody"> <div class="item-body entry-body"> <p>一般的には、タイムアウトするまでセッションを維持し、何らかの要求があったら、タイムアウトのためのタイマーをリセットする、といった方法を使います。サーバー側の都合ではタイムアウトまでの時間は短くしたい一方、ユーザー側の都合では「十分に」長くしたい。</p> <p>Web ベースアプリの場合、ユーザーはブラウザを使ってアクセスするわけですから、ログアウトせずにタブ、ブラウザを閉じたり、他のサイトへ移動したりできます。問題なのは、そのような操作が行われた事をサーバーが知る方法がない事です。結果、決して使われない「ゴミ・セッション」がタイムアウトまで残ってしまいます。これ、何とかしたい。</p> <p>ブラウザから一定時間間隔で「使っています」シグナルをサーバーに送信し、それを受け取ったサーバーは「このセッションは維持すべき」と判断すればいいのです。一定時間以上「使っています」シグナルが受信できなかった場合、このセッションは不要と判断できます。</p> <p>このような方法を「ハートビート heartbeat」とか「キープアライブ keepalive」などと言います。</p> <p>１分ごとに「使っています」をサーバーに送信するとすれば、サーバー側のタイムアウトは１分強まで短くできます。ネットワークの遅延とか、ブラウザ側の負荷とかを考えても数分まで短縮できるでしょう。もっとも、ハートビートの間隔をあまり短くすると、サーバーはその処理に忙殺されてしまうので、あまり短くはできません。</p> <p>さて、どのように実装するか。必要条件は、ページ本体は更新しないことです。</p> <p>html に <iframe> というのがあります。ブラウザの画面内の画像が一定時間ごとに更新されるなどに使われているのが iframe です。本体ページは更新されず、iframe 内だけが更新されます。</p> <p>setInterval() を用いて一定時間ごとに iframe を再ロードすればＯＫです。iframe 内の表示を更新するならば、「次の画像を下さい」とか要求するのですが、ここでは keepalive のためのサーブレットなどを呼び出します。</p> <p>・タイマーの起動は <body onLoad> で実行するメソッドで行います。<br>　　<body onload="startTimer()"><br> 　　　　function startTimer(){<br> 　　　　　　setInterval(keepAlive, TIME); // TIME は heartbeat 送信間隔<br> 　　　　}</p> <p>・iframe 用の <form> を用意します。<br> <form name="xxx"> ... </form> // これはメインの form</p> <p><form name="KeepAlive" target="HeartBeatFrame"><br>　　　　// これがハートビート用の form。target に iframe の名前を指定します。<br> <input type="hidden" name="HeartBeatInfo" value=....><br> 　　　　// サーバーにパラメータを渡すならば、こんな感じ。セキュリティーのために暗号化しましょう<br> </form></p> <p>・iframe を用意します。<br> <iframe name="HeartBeatFrame" height="0" width="0"><br>　　　　// 表示する必要はないので、高さ、幅は０にします。表示してもいいけど・・・</p> <p>・ハートビート送出<br> function keepAlive(){<br>　　document.KeepAlive.action="KeepAlive...";　　// KeepAlive を行うサーブレットなどの URI<br>　　document.KeepAlive.submit(); // form KeepAlive の target に iframe の名前がセットされているので、iframe だけが更新されます。<br> }</p> <p>これだけだと永遠ハートビートが送出されるので、最大○回までとかの制限が必要でしょう。</p> <p>まだ試していないけど、最大回数近くになったら「まもなくタイムアウトします」などと表示する事もできそうですね。もっとも、ユーザーが放置しているからタイムアウト間近になったわけで、表示しても誰も見ていない可能性が高そうですが・・</p> <p></p> </div> </div> <footer class="item-footer entry-footer"> <ul class="item-footer-meta item-footer-list entry-footer-info"> <li class="item-footer-item item-footer-pubdate"><time class="published" itemprop="datePublished" datetime="2018-04-15T12:14:23+09:00">2018/04/15 12:14</time></li> <li class="item-footer-item item-footer-category"> <ul class="item-footer-category-list item-footer-list"> <li class="item-footer-item item-footer-category-12207277" itemprop="articleSection"><a href="http://reclib.blog.enjoy.jp/.s/blog/cat_8/" rel="tag">インターネット・パソコン</a></li> </ul> </li> </ul>  </footer> </div> <div class="page-navigation entry-navigation content-nav"> <ul class="page-navigation-list"> <li class="page-navigation-list-item page-navigation-prev"> <a href="http://reclib.blog.enjoy.jp/.s/blog/2018/04/post-4fe7.html" title="よろしかったですか" rel="prev"> <span class="navigation-chevron">«</span> <span class="navigation-label">前の記事</span> </a> </li> <li class="page-navigation-list-item page-navigation-next"> <a href="http://reclib.blog.enjoy.jp/.s/blog/2018/04/post-bc73.html" title="３つで￥１９８、６つだと￥３９８" rel="next"> <span class="navigation-label">次の記事</span> <span class="navigation-chevron">»</span> </a> </li> </ul> </div> <div id="entry-comments"> <a href="http://reclib.blog.enjoy.jp/.s/blog/2018/04/keep-alive-d194/comments/" class="entry-comments-link"><data itemprop="interactionCount" value="UserComments:0">コメント(0)</data></a> </div> <aside id="comment-form-area"> <div class="comments-open"> <h3 class="title comments-open-header">コメント投稿</h3> <script src="http://static.blog.enjoy.jp/.shared-enjoy/js/comments.js"></script> <form class="comment-form form" id="comment-form" method="post" action="/.s/.service/comment"> <div class="comments-open-content"> <input type="hidden" name="user_id" value="702635" /> <input type="hidden" name="entry_id" value="58448402" /> <fieldset id="comment-author-set" class="comment-form-item form-item"> <label for="comment-author">名前</label> <input type="text" id="comment-author" name="author" value="" placeholder="名前" /> </fieldset> <fieldset id="comment-email-set" class="comment-form-item form-item"> <label for="comment-email">メールアドレス</label> <input type="email" id="comment-email" name="email" value="" placeholder="メールアドレス" /> </fieldset> <fieldset id="comment-url-set" class="comment-form-item form-item"> <label for="comment-url">URL</label> <input type="url" id="comment-url" name="url" value="" placeholder="URL" /> </fieldset> <fieldset id="comment-text-set" class="comment-form-item form-item"> <label for="comment-text">コメント</label> <textarea id="comment-text" name="text" placeholder="コメント" required="required"></textarea> </fieldset> </div> <div class="comments-open-footer"> <fieldset id="comment-post-set" class="comment-form-item form-item"> <input id="comment-post" class="submit-button" type="submit" name="post" value="投稿" onclick="disableButton(this); return false;" /> </fieldset> </div> </form> </div> </aside> </article> </div> </div> </div> <div id="footer-area"> <aside id="upper-bottom-modules" role="complementary" class="modules"> <section class="module-datebased module-archives module"> <h2 class="module-header"><a href="http://reclib.blog.enjoy.jp/.s/blog/archives.html">アーカイブ</a></h2> <div class="module-content"> <ul class="module-list"> <li class="module-list-item"><a href="http://reclib.blog.enjoy.jp/.s/blog/2022/03/">2022年3月</a></li> <li class="module-list-item"><a href="http://reclib.blog.enjoy.jp/.s/blog/2022/02/">2022年2月</a></li> <li class="module-list-item"><a href="http://reclib.blog.enjoy.jp/.s/blog/2022/01/">2022年1月</a></li> <li class="module-list-item"><a href="http://reclib.blog.enjoy.jp/.s/blog/2021/11/">2021年11月</a></li> <li class="module-list-item"><a href="http://reclib.blog.enjoy.jp/.s/blog/2021/10/">2021年10月</a></li> <li class="module-list-item module-more"><a href="http://reclib.blog.enjoy.jp/.s/blog/archives.html">もっと読む</a></li> </ul> </div> </section> <section class="module-pages module-archives module"> <h2 class="module-header">ウェブページ</h2> <div class="module-content"> <ul class="module-list"> <li class="module-list-item"><a href="http://reclib.blog.enjoy.jp/.s/blog/outline.html">システムの概要・・・こんなシステムです</a></li> <li class="module-list-item"><a href="http://reclib.blog.enjoy.jp/.s/blog/toppage.html">ＣＤ、ＬＰ管理と音楽のデータベース・システムを作りました。</a></li> </ul> </div> </section> </aside> <footer id="bottom-footer" class="modules"> <nav class="module-site-navigation module"> <div class="module-content"> <ul class="module-list"> <li class="module-list-item module-item-profile"> <a href="http://reclib.blog.enjoy.jp/.s/about.html" rel="me">プロフィール</a> </li> <li class="module-list-item module-item-main"> <a href="http://reclib.blog.enjoy.jp/.s/blog/" itemprop="url" >メイン</a> </li> <li class="module-list-item module-item-index"> <a href="http://reclib.blog.enjoy.jp/.s/blog/blog_index.html" rel="index">記事一覧</a> </li> </ul> </div> </nav> <div class="module-switch-view module"> <div class="module-content"> <a id="switch-view-link" href="javascript:void(0)">PC表示に切り替え</a> <script> var _lbbSwitchViewInfo = { baseURL: "http://reclib.blog.enjoy.jp/blog/" }; </script> <script src="/.shared/themes/common/switch-view.js"></script> </div> </div> <div class="module-powered module" itemprop="provider" itemscope itemtype="http://schema.org/Organization"> <div class="module-content"> <span class="module-powered-label">Powered by </span> <a itemprop="url" href="https://www.sixapart.jp/?s=lk_poweredby" title="Six Apart"><span class="module-powered-provider" itemprop="name">Six Apart</span></a> </div> </div> </footer> </div> </div> </div> </div> <script type="text/javascript" id="stats-script"> var done_stats_script = done_stats_script || 0; (function() { if (done_stats_script) return; var extra_happy = Math.floor(1000000000 * Math.random()); document.write('<img src="http://app.blog.enjoy.jp/t/stats?blog_id=516161&entry_id=58448402&user_id=702635&page=' + escape(location.href) + '&referrer=' + escape(document.referrer) + '&i=' + extra_happy + '" width="1" height="1" alt="" style="position: absolute; top: 0; left: 0;" />'); })(); var _lara_site_id = 105024; (function() { if (done_stats_script) return; var ra = document.createElement('script'); ra.type = 'text/javascript'; ra.async = true; ra.src = 'https://analytics.lekumo.jp/ranking.js'; var s = document.getElementById('stats-script'); s.parentNode.insertBefore(ra, s); })(); done_stats_script++; </script> </body> </html>