Webマップ上のログからリアルタイムで地理情報を視覚化します

あいまいさがないように、本質を示します。 新しい仕事に応募するとき、彼らは私に次のように簡単に説明できるテストタスクをくれました：「カスタムストアオンラインストアに入るユーザーのイベントを地理視覚化するためのグローの類似物を書いてください。」 簡単に言えば、特定のイベントの発生についてシステムログを監視し、これらの場合、ユーザーのIPアドレスによって決定されるマップ上のポイントを表示（この場合）する必要があります。 実装の目的：プレゼンテーションの目的で、見た目を調和と美的快楽のnに浸すことができる、見栄えの良い「おもちゃ」を作成する。 主な条件は、開発プロセスでのJavaテクノロジーのスタックの使用であり、これにより多くの決定が採用されました。 さらに、これを1ページのサイトとして実装することが決定されました。 そして、私は非常に表面的にJavaとWebに精通していたため（主にC / C ++で作成しました）、多くのことを学ぶ必要がありました。 まあ、私たちは一緒にそれを把握します。

この記事は、興味のある人や初心者を対象としていますが、ドキュメントや専門記事を使用して見つけることができる単純なものを「噛む」ことはありません。 最も有用なリソース、ソースへのリンク（ BSDライセンスの下で配布されています ）、および作業バージョンへのリンクは、記事の最後に記載されています。

とにかく、前述のグローのソースを使用してみませんか？ まず、これらはMozillaが操作したデータの量に非常に固有です-起動日にFirefoxがインストールされた回数と、ログシステムが分散化されているという事実を思い出してください。 この例では、ピーク時に1秒あたり約100エントリが単一のログファイルに書き込まれますが、その一部のみを視覚化する必要があります。 第二に、Glowのマップは、見るのが最も楽しいものではありません。 そして第三に、これはテストタスクです:)

クイックルック

ミニシステムには何が必要ですか？

• ログファイルの更新を追跡します（ tail -f
  
  
  
  など）。 さらに、ログファイルは1日1回閉じられ、慎重にアーカイブされ、新しいファイルが代わりに使用されることに注意してください。つまり、これらのアクションを監視し、現在のログに切り替える必要があります。
• ログの各新しいエントリに対応するイベントのタイプを決定し、それをポイントとしてマップ上に表示する必要がある場合は、レコードに含まれるIPアドレスによってポイントの座標を許可（解決）します。
• イベントデータをリアルタイムでクライアントに送信する必要があります（この場合、クライアントのブラウザーのスクリプト）。
• クライアントスクリプトは、対応するイベントのタイプに応じて色付けされたポイントを含むきちんとしたマップの形式で情報の出力を処理する必要があります。

各項目について小規模な調査を行った後、次のことが決定されました。 小さなJavaデーモン（おかしく聞こえますが、よくわかりますが、何もわかりません）は、ログを監視し、レコードを解析し、IPを解決し、HTTP POSTを介してサーバーにデータを送信します。 これにより、システムの個々の部分を頭痛なく簡単に変更できます。 サーバーはサーブレットコンテナの一部にもなり、対応するサーブレットを作成します。 クライアント側は、サーバーと非同期で通信する何らかの種類のマップウィジェット（マップレンダリング）である必要があります。 基本的な方法がいくつかあります（詳細については、記事[1]およびレビュー[2]を参照）。

1. 彗星。 クライアントはサーバーに接続し、サーバーは接続を切断しませんが、接続を開いたままにします。これにより、新しいデータをすぐにクライアントに送信できます（プッシュ）。 オプションとして、 WebSocketテクノロジーを使用します。
2. 頻繁な投票。 特定の頻度でクライアントがサーバーをポーリングして新しいデータを探します。
3. 「長期」ポーリング（長期ポーリング）。 前の2つの方法の間の何か。 クライアントはサーバーに新しいデータを要求し、このデータがまだサーバーにない場合、サーバーは接続を閉じません。 データが到着すると、クライアントに送信され、クライアントは再び新しいデータの要求を送信します。

WebSocketはすべてのブラウザでサポートされているわけではなく 、頻繁にポーリングを行うと、サーバーリソースを利用しながらトラフィックを無駄にするだけなので、選択は長いポーリングに依存します。 さらに、Jetty Webサーバー（パートタイムサーブレットコンテナ）を使用すると、 継続技術を使用して長いポーリングリクエストを処理できます（ [1]を参照）。 しかし、ここでリアルタイムを教えてください。 飛行機用の組み込みシステムではなく、きちんとしたプレゼンテーションマップを作成しているので、ユーザーアクションとオブザーバーマップ上のポイントの1〜2秒表示の遅延はそれほど重要ではありませんか。

マップエンジンの中で、 Leafletは、最も快適な外観とシンプルで使いやすいAPIの1つとして選ばれました。 また、Leafletの優れたブラウザサポートにも注意してください。

さあ、始めましょう。入場の問題を解決します。

ログからデータを取得する

定期的なアーカイブ作成を考慮して、ログの更新を監視する方法は？ たとえば、よく知られているApache CommonsライブラリのTailer



クラスを使用できますが、部分的には同じ方法で独自の方法で進めます。 TailReader



クラスTailReader



、ログが置かれているディレクトリ、ログファイルの名前を記述する通常の TailReader



（変更できるため）、および更新期間（ログ内の新しいエントリを定期的にチェックする時間）によって初期化されます。 クラスインターフェイスは標準の入力/出力ストリームでの動作に似ていますが、ログに新しいエントリが表示されない場合、 nextRecord()



呼び出されたときに実行プロセスをブロックします。 （ロックせずに）新しいエントリを確認するには、 hasNext()



メソッドを使用できます。 ログは個別のスレッド（I / O、スレッドと混同しないように）で監視されるため、フローを制御するためのstart()



およびstop()



メソッドがあります。 ファイルストリームが閉じられた場合（ログがアーカイブ用に送信された場合）、指定された回数の読み取りを試行した後、クラスオブジェクトは新しいログを開く時間であると判断します。 ログはgetLogFile()



指定されたルールに従って検索されます。

  /** *      - * @return -  null    */ private File getLogFile() { File logCatalog = new File(logFileCatalog); File[] files = logCatalog.listFiles(new FileFilter() { @Override public boolean accept(File pathname) { return pathname.canRead() && pathname.isFile() && pathname.getName().matches(logFileNamePattern); } }); if (0 == files.length) return null; if (files.length > 1) Arrays.sort(files, new Comparator<File>() { @Override public int compare(File o1, File o2) { return (int) (o1.lastModified() - o2.lastModified()); } }); return files[files.length - 1]; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ログの更新を監視することを学んだ後、これらの更新で何かをする必要があります。 まず、このイベントのタイプを判別する必要があります。マップに表示する必要がある場合は、クライアントIPを引き出して、地理座標に解決します。

ごRecordParser



、 RecordParser



クラスは正規表現を使用してログファイルの行を分析します。 LogEvent parse(String record)



メソッドは、イベントタイプとIPアドレスをカプセル化する単純なオブジェクトを返します。このログエントリが関心を持たない場合はnull



返します（これは、Java開発の世界でのベストプラクティスとはほど遠い-Nullパターンを使用する方が良いオブジェクト ）。 同時に、検索ロボットからのリクエストからもレコードがフィルターされます（実際にはストアユーザーではありませんよね？）。

最後に、 IpToLocationConverter



クラスIpToLocationConverter



、 Maxmindサービス（ Java APIの場合 ）およびIpGeoBase （ XML APIを介してアクセスされ、そのロジックはパッケージcom.ecwid.geowid.daemon.resolvers



カプセル化されます）を使用して、IPアドレスを対応する地理座標にIpToLocationConverter



ます） Maxmindはロシアの住所をかなりお粗末に解決するため、さらにIpGeoBase'omを使用します。 Maxmind APIは簡単で、解決はローカルにあるデータベースファイルを介して行われます。 リゾルバーはIpGeoBase用に作成され、明らかな理由でサービス呼び出しをキャッシュします。

サーバーをロードしないために、1つのパックのレコードが時間的にわずかに異なることがないように、データをいくつかのピースのパックで送信します。 これを行うために、マップ上の視覚化のために蓄積されたポイントオブジェクト（ Point



クラス）はバッファーに保存されますPointsBuffer



クラスのオブジェクトで、JSON形式でサーバーに入力されると「破棄」されます（ Gsonを使用してオブジェクトをシリアル化します）。

悪魔のロジックはすべてGeowidDaemon



クラスにあります。 デーモンの設定はXMLで保存されます（私の側では下品で、properies-filesやYAMLを使用できますが、 XMLからObjectへのマッピングを試してみたかったのです）。 に注意してください

  <events> <event> <type>def</type> <pattern>\b((?:\d{1,3}\.){3}\d{1,3})\b\s+script\.js</pattern> </event> <event> <type>mob</type> <pattern>\b((?:\d{1,3}\.){3}\d{1,3})\b\s+mobile:</pattern> </event> <event> <type>api</type> <pattern>\b((?:\d{1,3}\.){3}\d{1,3})\b\s+api:</pattern> </event> </events>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

イベントの種類：def-「通常の」カスタママーを開く、mob-モバイルカスタママーを開く、 api



-APIサービスを呼び出す タイプは、IPがグループに割り当てられている特定のレギュラーに対応するサブストリングのログエントリ内の場所によって決定されます。

ネットワークの広大さでデーモンを起動するすばらしいスクリプトが見つかりました。

お客様とデータを共有します

さあ、Jetty APIの自慢の継続についてはどうでしょう（第7バージョンのサーバーを使用することに同意します）。 これは、コード例を含むドキュメント[3]に非常によく書かれています。 それらを使用します。 GeowidServlet



サーブレットGeowidServlet



最小限のものです。デーモンからデータを受信し、クライアントに提供できます。 次のコードは、この点で最も興味深いものです。

  @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { synchronized (continuations) { for (Continuation continuation : continuations.values()) { continuation.setAttribute(resultAttribute, req.getParameter(requestKey)); try { continuation.resume(); } catch (IllegalStateException e) { // ok } } continuations.clear(); resp.setStatus(HttpServletResponse.SC_OK); } } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String reqId = req.getParameter(idParameterName); if (null == reqId) { resp.sendError(HttpServletResponse.SC_BAD_REQUEST, "Request ID needed"); logger.info("Request without ID rejected [{}]", req.getRequestURI()); return; } Object result = req.getAttribute(resultAttribute); if (null == result) { Continuation continuation = ContinuationSupport.getContinuation(req); synchronized (continuations) { if (!continuations.containsKey(reqId)) { continuation.setTimeout(timeOut); try { continuation.suspend(); continuations.put(reqId, continuation); } catch (IllegalStateException e) { logger.warn("Continuation with reqID={} can't be suspended", reqId); resp.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR); } } else if (continuation.isExpired()) { synchronized (continuations) { continuations.remove(reqId); } resp.setContentType(contentType); resp.getWriter().println(emptyResult); } else { resp.sendError(HttpServletResponse.SC_BAD_REQUEST, "Request ID conflict"); } } } else { resp.setContentType(contentType); resp.getWriter().println((String) result); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで何が起こっていますか？

クライアントが新しいデータを取得するとき、GETリクエストのパラメーターに一意の識別子が存在するかどうかを確認します（実際には、疑似一意です。クライアント部分の実装、 getPseudoGUID()



関数を参照 ） getPseudoGUID()



がない場合、クライアントを「送信」します。 これは、特定のクライアントに関連付けられた継続を正しく識別するために必要です。 次に、必要なデータを含む属性がこのリクエストに設定されているかどうかを確認します。 当然、クライアントが私たちに初めて来た場合、データについて話すことはできません。 したがって、指定されたタイムアウトで継続を作成し、一時停止して、保存用のハッシュテーブルに入れます。 ただし、継続タイムアウトが期限切れになったが、データもなかった場合があります。 この場合、 if (continuation.isExpired())



条件をチェックすると、渡すときにサーブレットがクライアントにJSONの空の配列を与え、指定されたクライアントに対応する継続を不必要にテーブルから削除します。

データ属性が設定されている場合、このデータをクライアントに返すだけです。 このデータはどこから来たのですか？ もちろん、POST要求ハンドラーで。 デーモンがデータを送信するとすぐに、サーブレットは「中断」継続テーブルを実行し、各属性にデータを設定し、各属性を再開（再開）してから、テーブルをクリアします。 この時点で、 doGet()



メソッドが各継続に対して再入力されますが、ユーザーは必要なデータを使用します。

たとえば、負荷のかかったプロファイラーを使用して、これらの非常に継続的な不思議な力を測定できます。 このために、著者はVisualVMとSiegeを使用しました。 著者からは、テスターは平凡なので、テストは非常に人工的なものに見えました。 JVMは約1時間「ウォームアップ」し、15MBのヒープスペースに落ち着きました。 その後、Siegeを使用して、サーバーに毎秒3000リクエストを並行してロードします（開いているファイルなどの制限を引き上げるためにシステム内を移動したくありませんでした）。 JVMは約250Mbのヒープスペースを消費し、プロセッサコアに約10〜15％の負荷をかけました。 初心者には良い結果だと思います。

可視化サー

すぐに予約します。おそらく、JavaScriptコードは、プロのフロントエンド開発者の観点からは「非標準的」に見えるでしょう。 私のコードを理解する人を判断するには:)

そこで、リーフレットを使用します。 地図上にポイントをどのように表示しますか？ 標準マーカーは不適切に見えます。 pngまたは、W3C、gifを禁止すると、ポイントのアニメーションで素晴らしい画像を実現できません。 2つの方法があります。

1. SVGによるアニメーション。 このテーマに関する優れた記事が最近ハブに掲載されました 長所：Leafletには、優れたRaphaëlライブラリを使用した優れたプラグインがあり （ページ下部のデモに注意してください）、このライブラリによりIE6（より正確にはVML ）でもSVGを描画できます。 短所：SVGの詳細のため、その上でのアニメーションは非常にリソース集約型の操作です（ブラウザーの代わりに自分自身を想像してください：ほとんどの場合、XMLを解析し、その変更に従ってグラフィックをレンダリングする必要があります）。
2. HTML5の . , , , ( www.html5canvastutorials.com KineticJS). : , . : .