webix + databoomの「スピーディな」束を取り込んだのはスピードのためでした。
webixを使用して、フロントエンドを開発し、データブームがバックエンドとして機能します。
結果はどうなりますか？ 2人（またはそれ以上）のユーザーがパラノイアを食べずに情報を交換できるアプリケーション。
要素のセットは次のとおりです。
- メッセージテキストフィールド
- 別名フィールド
- メッセージ送信ボタン
- メッセージリスト自体
- 追加オプション
フロントエンドから始めましょう
webixを接続し、将来のアプリケーションのマークアップを配布します
webix.ui( {rows:[ {view:'toolbar', cols:[ // ]}, // , {view: 'resizer'}, {view:'form', elements:[ {cols:[ // {rows:[ // (), // ]} ]} ]} ]} )
これまでのところ、すべてがシンプルです。 上記のコードを使用して、アプリケーションのマークアップを作成します。
webixライブラリを接続した後、webixオブジェクトのui（）メソッドで初期化が行われます。
パラメータとして、アプリケーションの構造の説明を持つオブジェクトを取ります。
すべての名前は、rowsは文字列の配列、colsは列の配列、viewはwebixコンポーネントです。
ここで、コメントの代わりに、必要なwebixのコンポーネントを挿入する必要があります。上から下に進みましょう。
ツールバーは、ツールバー要素のコレクションです。 ボタンのみが必要です。
{view:'toolbar', cols:[ {view:'button', value:'', align:'right', width:100, click:function(){}}, {view:'button', value:' ', width:200, click:function(){}} ]}
後でそれらの機能について説明しますが、ここでは必要なすべての要素を画面に表示します。
メッセージを出力するのに最適（バンドルにdataboomが与えられた場合）
{view:"datatable", id:'datatableCblp', url: data, select:'row', multiselect:true, columns:[ {id:'from', header:[' ']}, {id:'msg', header:['']} ]}
selectパラメーターでは、選択のタイプ（行、セル、列、この例では行）を示します。これは、メッセージを削除して選択的に復号化する機能を実装するために必要です。
multiselectパラメーターは、複数の行を選択する機能（暗号化を使用）を担当します。
columns配列は、テーブルに含まれる列を示します。 最も簡単なオプションとして、送信者の名前とメッセージのテキストについて説明します。
フォーム要素（フィールドとボタン）をペイントしません。すべてが非常に単純です
{view:'form', elements:[ {cols:[ { view:"textarea", label:"", id:'Message'}, {rows:[ { view:"text", label:"", id:'NickName'}, { view:"text", label:"", id:'CryptoKey'}, { view:"button", value:"", click:function(){}} ]} ]} ]}
視覚的な部分のマークアップを終了し、問題の技術面の実装に進みます。
DataBoom
データベースの使用を開始するには、 サイトに登録する必要があります。その後、データベースの管理パネルへのリンクが記載された手紙を受け取ります。
ここで、いくつかの操作を行う必要があります。
- すべてのユーザーがデータベースからデータを読み取れるようにします
- 全部
最初の段落を実装するために、匿名ユーザーグループの条件を設定します
{"GET":{"*":true},"PUT":{"*":true},"DELETE":{"*":true}}
すべてが可能であり、すべてが真実です。
アプリケーションからデータベースを管理するには、スクリプトを接続する必要があります
https://databoom.space/databoom.js
接続したら、データベースオブジェクトを作成します
db = databoom(config.baseHost, config.baseName);
この段階で必要なパラメータは、「ホスト」と「ベース名」です。
レターで、databoomはデータベースへのリンクを送信しました。私の場合は次のようになります。
Database URL: https://t014.databoom.space/api1/b014
ホストは、「http（s）」を含むドメインです。 そして、ベースの名前は最後に書かれており、「b014」です。
データベースオブジェクトが初期化された後、サーバーにメッセージを送信する機能を説明できます。
{ view:"button", value:"", click:function(){ var newData = {}; newData.from = $$('NickName').getValue() newData.msg = $$('Message').getValue() db.save(config.collection, newData); }}
Webixオブジェクトには、$$を使用してアクセスし、IDでセレクターを作成します。セレクターは、コンポーネントの説明を示します（このIDは、DOM要素のIDとは関係ありません）。
db.save（）は、データベースにデータを保存します。 指定する最初のパラメーターは「コレクション」です。 必要に応じて、データベース内のテーブルの名前を考慮してください。 感心するのは、databoom管理パネルまたはスクリプトから作成する必要がないという事実です。 どれでも。 コレクションとして、任意の（ほぼ）行を指定できます。主なことはそれを覚えておくことです。引き続き参照します。
さて、メッセージはサーバーに送信されました。今度はそれを読みます。 これを行うには、datatableコンポーネントのurlパラメーターを使用します
data = webix.proxy("databoomtree", config.basePath); {view:"datatable", id:'datatableCblp', url: data, select:'row', multiselect:true, columns:[ {id:'from', header:[' ']}, {id:'msg', header:['']} ]}
urlパラメーターで、webixプロキシオブジェクトを指定します。引数は、目的のコレクションへのパスです（暗号と呼びます）
https://t014.databoom.space/api1/b014/collections/crypto
そして今、私たちはすでにサーバーに保存されたメッセージを受信しています。 少し暗号を導入して、敵を少し混乱させましょう。 任意のキー暗号化アルゴリズムを使用できますが、私は単純なものの1つを使用しました。
コード
define([''], function(){ var aesar = function (text, key, decode) { var textLetter, keyLetter, result = "", conv = decode ? -1 : 1; key = key ? key : " "; for (textLetter = keyLetter = 0; textLetter < text.length; textLetter++, keyLetter++) { if (keyLetter >= key.length) keyLetter = 0; result += String.fromCharCode( text.charCodeAt(textLetter) + conv * key.charCodeAt(keyLetter) ); } return result } var crypt = { on: function(text, key){ return aesar(text, key); }, off: function(text, key){ return aesar(text, key, true); } } return crypt; });
もちろん、サーバーに送信する前に暗号化します（データベースに保存します）。 キー入力フィールドを追加して、いくつかの変更を加えます。
{ view:"button", value:"", click:function(){ var newData = {}; newData.from = crypt.on($$('NickName').getValue(), $$('CryptoKey').getValue()); // crypt newData.msg = crypt.on($$('Message').getValue(), $$('CryptoKey').getValue()); // crypt db.save(config.collection, newData); }}
（/ msgから）データベースに書き込むキーは、データテーブルの列のIDと一致することに注意してください。
理解して読む
対話者が使用する暗号化キーがわかっているため（これがアイデアです）、サーバーから受信した暗号化されたメッセージを読み取ることができます。 「選択された復号化」ボタンの機能を説明しましょう。
{view:'button', value:' ',width:200, click:function(){ var sel = $$("datatableCblp").getSelectedId(); // if(!Array.isArray(sel)){ var row = $$("datatableCblp").getItem(sel.row); // row['msg'] = crypt.off(row.msg); // row['from'] = crypt.off(row.from); // $$("datatableCblp").updateItem(sel.row, row); // }else{ // } }}
おわりに
最も野心的なものではないものを作成することは非常に簡単であると確信していることを願っています。
とりわけ、異なるユーザーが1つのメッセンジャーを介して通信し、互いに干渉しないようにすることができました。 「1234」キーが最もクールだと誰もが判断しない限り。
たくさん練習してください（初心者向け）。
素材
謝辞
- @databoomは、webixとのバンドルの最も便利な実装です（保存する前に情報の中間処理を考慮して複雑にしなければなりませんでした）
- Googleドライブを介したこの種のアプリケーションの公開に関するチュートリアルの@Skaner