DBMSCachéへのターミナルアクセス-ブラウザでも実行可能

Webテクノロジーの開発により、ブラウザウィンドウにはますます便利なサービス、アプリケーション、プログラム、さらにはゲームが登場します。 CachéDBMS ターミナルの時代が来ました 。



カットの下に、アプリケーションのすべての魅力とその開発の歴史の説明があります。

機能性

以下は、Web端末に有効です。

• 任意のコードおよびCachéオブジェクトスクリプトコマンド、ターミナルユーティリティ、プログラムの実行
• データベースにすばやくアクセスできる便利なSQLモード
• Cachéオブジェクトスクリプトキーワードのオートコンプリート：現在のネームスペースのクラスとそのメソッド、プロパティ、パラメータ、グローバル、変数
• グローバルおよびファイルの変更の監視（tail -fなど）
• チームの歴史
• CachéObject Script構文の強調表示
• 略語の定義
• マルチライン編集
• アプリケーションの動作とテーマのカスタマイズ

上記のすべては、WebSocketのサポートが存在するCachéサーバで機能します。 Webアプリケーションへのリンクをたどって、始めてください。



プロジェクトページですべての機能の詳細な説明を見つけることができます 。

安全性

当然、Webアプリケーションの主な目標はセキュリティです。 サーバーとの通信は開いているポートを介して行われるため、後者は保護が必要です。 接続時に端末ポートに入力する必要がある最初のことは、任意の長さのキーです。 間違ったキーを受け取ったサーバーはすぐに切断します。 現在、GUIDが使用されます。これは、メインCSPページにアクセスするたびに、または開いているポートへの接続に失敗した場合に生成されます。 つまり、間違ったキーでソケットに接続しようとするたびに、新しいキーが生成されるなど、選択が不可能になります。 CSPページを呼び出すときにも同じことが起こります。キーがクライアントに与えられ、ソケットへの接続の確立に使用されるようになりました。



簡単に言えば、CSPページで承認を確立するためだけに残っているため、開いているポートの不要な訪問者がキーを受信することを防ぎます。

ソフトウェア実装の歴史

端末を横から見ると、その仕組みが非常に単純であるように見えるかもしれません。 最初はそれもそのように思えた。 これらのタイプのアプリケーションの動作を理解し、Cachéを理解するとともに、多くの興味深い点と困難がありました。これらについては後で説明します。 主なタスクは、ウィンドウが既に2013年であるため、端末をオタクに馴染みやすくすると同時に一般ユーザーにも使いやすくし、新しい機会を提供し、最終的に通常の端末の白黒のグラフィカルインターフェイスを装飾することです。



さらに、主に私がつまずかなければならなかったすくいの報復と、WebまたはCachéに精通しているすべてのプログラマがプログラマであったのと同じものについて説明します。 以下に示す方法と解決策はさらに興味深いものになる可能性があり、方法を知っていれば、聞くのは非常に興味深いでしょう。



新しいソフトウェア製品の作成を開始するには、これがどのように機能するかを考える必要があります。 私はCachéに精通していたので、最初は端末が非常に単純に機能しているという考えで訪問しました。サーバー上でコマンドを実行し、その答えを読むだけです。 前もって作業しなければならなかったので、フロントエンドについてはまったく心配しませんでした。 しかし、開発をさらに掘り下げてすぐに、コマンドを実行するだけでなく、すべての種類の端末ユーティリティ、クライアントからの読み取り情報を構成する必要があることが判明しました（たとえば、読み取りコマンドの処理時）、ストリーミング入力/出力を達成し、他の多くの問題を解決します小さなタスク。



同僚と少し反省した後、WebSocketプロトコルがデータ転送に使用されることが完全に明らかになりました。これは、Web経由でデータを転送する比較的新しく、安定した、信頼できる方法です。 そしてもちろん、クライアント側では、HTML5のすべての楽しみがあります。 これらは、CSSアニメーションと純粋に透明なJavaScriptの両方です。



まず、クライアント側に座って、既製のソリューションを使用したり、フレームワークを適用したりしませんでした。端末は理想的には、JQueryやさまざまな魔法のJavaScriptアニメーションのようなDOMへの高度なアクセスを必要としない軽量アプリケーションです。 いいえ、実際には、アニメーションは便利かもしれませんが、CSS3プロパティの単なる束の形式では、もはやありません。 このアプリケーションは、ブラウザーとユーザーの両方にとって簡単になると約束しました。



私は長い間情報の表示を気にしませんでした-それは等幅フォント、軽量ブロックレイアウト、おなじみのスタイルです。 しかし、情報を入力するフィールドについて考える必要がありました。構文の強調表示を実装する必要がありました。 多くのプラグインソリューションが破棄されたため、最後のオプションはHTML5の簡潔で編集可能なdivのようでした。 しかし、そこにもいくつかの魅力がありました-コンテンツをHTMLからプレーンテキストに、またはその逆に翻訳し、キャレット位置を設定して取得し、元の装飾されていないテキストをバッファにコピーする必要がありました-これらのタスクは数行で完了するにはほど遠いです。 さらに、点滅する端末キャリッジをテキストに挿入し、通常のシステムCtrl-C、Ctrl-V、右クリック+貼り付け、挿入などを実装する必要もあります...



入力フィールドでの「バックライトとキャリッジ」の実装オプションは、非常にトリッキーでシンプルでした。 実際、テキストを強調表示し、キャリッジを挿入するだけです。 プレーンで強調表示されたテキストがあるとします。 最初のものは最も典型的なテキストエリアに含まれ、強調表示されたものはまったく同じサイズのブロックにあります。 捕まえた？ そのように、いくつかのCSSトリックを使用して、透明なフォントで入力フィールドを透明にし、その下にテキストを強調表示したブロックを配置します。 その結果、テキストの選択範囲が表示され、編集の自由度が高まります。 ここでは、いつものように、Internet Explorerのみが際立っています。他のブラウザで透明な場合、その中のキャリッジはまだ表示されたままです。 そのため、通常の点滅するターミナルキャリッジを放棄しなければなりませんでした。



キーストロークの処理でも興味深い点が生じました-入力データを強調表示する必要がありました。つまり、入力フィールドの内容を処理することでした。 はい、ただし、このフィールドの内容を押す瞬間に正確に取得することはできません（より正確には可能ですが、最後の「押された」記号がありません）-D​​OMにはキーダウン、キープレスイベントが実行される前に更新する時間がなく、キーアップによって入力の可視部分を更新することはまったく面白くないですまた別の方法。 2番目の方法は、文字列に文字を手動で追加することです。 ただし、Ctrl + Vの場合、後者はすぐに消えます。 3番目のメソッドを作成しましょう-クリック自体の1ms後のクリックのハンドラー関数を呼び出します。 はい、入力を受け取りましたが、ハンドラーに渡されるイベントを制御する機能、たとえば、キーのデフォルトのアクションを禁止する機能はなくなりました。 出力は、2つのイベント（イベントとその組み合わせ自体の処理を押すことによる、および1ミリ秒後）のクリックの内訳で、入力したテキストを更新しました。



入力の解析、構文の強調表示、キャリッジのフォームへの貼り付けは簡​​単に実装できました。まず、HTMLの書式設定を損なう可能性のあるもの、つまり文字「<」、「>」、「＆」を対応する「<」、「>」、 「＆」。 次に- 超正規表現（実際にはタグのみをテキストに挿入します）による構文強調表示を実行し、次にキャリッジを挿入して、その「実際の」位置（タグとHTMLエンティティを除く）を決定します。一つの方法。 はい、上記のすべてはこの順序でのみ行われます。そうしないと、キャリッジ自体が強調表示されるか、破損したHTMLマークアップが多くなります。



しかし、オートコンプリートを使用するのは面白かったです。 3回コピーしました。 そして、アルゴリズムの進捗は次のとおりでした。

1. キャリッジから最も近い左のセパレーターまたはスペースまでの行を取得し、すべてのオプションの配列で使用可能なオプションと一致するものを探します。
2. 「$」、「％」、「##」などの文字を含む同じ文字列を探して、「カテゴリ」に分割された特別なオブジェクトの追加のタイプを決定します。
3. 「マスク」によってキャリッジの左側の部分全体を解析します。これは、「ターミナルディクショナリ」の特別に構造化されたオブジェクトに含まれる正規表現の逆です。

3番目の方法がだれにも馴染みがあるかどうかはわかりませんが、徐々に近づいてきましたが、最もシックで最速の結果を示したのは彼でした。



それでは、どのように機能しますか？ とても簡単です。 ほぼすべてのタイプのオートコンプリートを作成するために必要なのは、辞書のオブジェクト内で適切に構成された正規表現です。 これは次のようなものです。





言語内の各オブジェクトは、特別なオブジェクトプロパティ「！Autocomplete」を持つことができます。 存在する場合、オートコンプリートパーサーはこのオブジェクトに注意を払います。つまり、そのプロパティreverseRegExpおよびchildを読み取ります。



ご想像のとおり、reversedRegExpは特別な方法でコンパイルされており、現在の「辞書」オブジェクト（以下、単に「辞書」）のプロパティを自動補完に使用することが適切かどうかを判断するのは彼です。 正規表現のストレージブラケットは、ディクショナリプロパティ名（「用語」）に対してチェックされる検索文字列の部分を強調表示するために使用されます。 これにより、任意の構文構造でキーを見つけることができ、使用可能なオプションを選択できます。



クラスでは、タスクはわずかに異なります-クラス名を取得し、それに対応するプロパティを提案する必要があります。 これは、「！Autocomplete」オブジェクトプロパティに、同様の「子」オブジェクトプロパティを追加することで解決しました。これには、reverseRegExpも含まれます。後者は、一致する場合に考慮される親正規表現のプレフィックスです。 検証アルゴリズムは非常に簡単です。 このアルゴリズムが正確にどのように機能するか疑問に思うなら、プロジェクトリポジトリ内で見つけることができます。



このアプローチの利点は明らかです。これは、すべての構文構造の辞書の視覚的構造であり、可能な限りあらゆる方法で拡張できる自動補完のかなり迅速な方法です。 はい。「term」プロパティの値として使用される数値は、「使用頻度」と言われています。 提案されたオプションがソートされるのはこの図です。



サーバー側では、現在のネームスペースのクラスおよびメソッドのオートコンプリートのディクショナリ全体が生成され、オブジェクトのオブジェクトを含むJSONファイルに格納されます。オブジェクトのオブジェクトは、必要に応じてロードされ、メインディクショナリオブジェクト内のクライアントのクラスディクショナリオブジェクトとマージされます。 ここにある。



サーバー自体は、以前はこのことを使用してすべての書き込みをクライアントに直接送信するように教えられていました。 しかし、読み取りのために、判明したように、「+ T」のような単純なものではうまくいきません。 全体的な問題は、ユーザーがターミナルユーティリティを実行しようとしたとき、またはreverend readサーバーでスクリプトを作成しようとしたときに、xecutで処理するだけで入力データがハングアップするか台無しになることです。



さて、端末を入力で標準ターミネーターの処理モード（「+ T」）にして、クライアントから送信するとします。 さて、readはフリーズしませんが、別の状況が発生します-本体ではなく、クライアントから受信したパケットを読み取ります。 パッケージ自体には、「ゴミ」が少し含まれています。これらは、ヘッダーとして機能する最初の数バイトです。 彼らはどういうわけか廃棄しなければなりませんでした。



必要なものとその発生方法を想像しやすくするために、サーバー上で提案された「読み取り、書き込み、書き込み」コマンドのシーケンスを検討してください。

• クライアントからコマンドを受信する
• ターミナルアプリケーションのランタイムへの移行-I / Oを「直接」設定
• Xecuteコマンド転送
• read a ：ターミネータで終わるクライアントからデータを読み取ります
• 読み取りパッケージの本体を取得し、
• aを書く：クライアントに値を送る
• 実行モードの完了

しかし、余分なバイトが（WebSocketパッケージのヘッダー）に入らないように、同じ方法でこの本体を取得する方法は？ 論理的には、何らかの読み取りハンドラを作成する必要があります。 はい、単純ではありませんが、システムレベルで：端末ユーティリティも読み取りを使用します。



幸いなことに、経験豊富なsql.ruフォーラムの担当者は、Cachéのドキュメント化されていないすばらしい機能-I / Oリダイレクトについて教えてくれました。 その助けを借りて、必要なことを正確に行うことができました-到着/出発するすべてのデータを独自の方法で処理しました。 入力リダイレクトは、##クラス（％Device）.ReDirectIOがオンになっているときにプリミティブの読み取りおよび書き込みコマンドの機能を引き受ける7つのサブルーチンを作成することによって行われます。 このチャームの詳細な実装が興味深い場合、 このスレッドが役に立つかもしれません。



上記の経験が、誰かにとって間違いなく便利になり、端末そのものよりも有用になることを願っています。 コンセプトから既に機能するアプリケーションへの途中で、多くの新しいアイデアが登場しましたが、これは制限ではありません-ここでは想像力のみに制限できます。 GitHubでプロジェクトの開発をフォローまたは参加し、アイデアを提案し、議論してください。フィードバックは役に立ちます。 素晴らしい管理をしてください！