検索エンジン

Node vueリアルタイムpush_useNode、Vue、ElasticSearchを使用して、リアルタイム検索エンジンを構築します



Node Vue Real Time Push_use Node



nodevueリアルタイムプッシュ

前書き （（ 前書き ）。

サイトを検索しようとして、ページをリロードする必要があることに失望したことはありますか？またはさらに良いことに、プリロードの回転を見ながら、非常に長い時間を待たなければなりませんか？私はそれが悪いことを賭けることができます。



サイトを検索して、リロードする必要のあるページに失望したことがありますか？またはさらに良いことに、事前に張力がかけられた回転を見るのに長い間待たなければなりませんか？これは悪いことだと思います。

あなたは開発者としてあなたのサイトでほぼリアルタイムの検索エンジンを作ることができることを知っていますか？



あなたは開発者として、あなたのウェブサイトでほぼリアルタイムの検索エンジンを作ることができることを知っていましたか？

Elasticsearchは、増え続けるユースケースを解決できる分散型のRESTful検索および分析エンジンです。 Elasticsearchは、高性能のテキスト検索エンジンライブラリであるApacheLuceneの上に構築されています。

Elasticsearchは、ますます多くのユースケースを解決できる分散型のRESTful検索および分析エンジンです。 Elasticsearchは、高性能のテキスト検索エンジンライブラリであるApacheLucene上に構築されています。



今日のレッスンでは、Node.js、Elasticsearch、およびVue.jsを使用してリアルタイム検索エンジンを構築する方法を学習します。そのため、このチュートリアルを実行するには、Vue.jsとNode.js（Express）の基本的な理解が必要です。

今日のコースでは、Node.js、Elasticsearch、Vue.jsを使用してリアルタイム検索エンジンを構築する方法を学びます。したがって、このチュートリアルに従うには、Vue.jsとNode.js（Express）の基本を理解する必要があります。

入門 （（ 入門 ）。

このレッスンの環境のセットアップから始めましょう。 Node.jsを使用するため、開始する最も簡単な方法は、新しいフォルダーを作成してnpm initを実行することです。 elastic-nodeという名前の新しいフォルダーを作成し、ディレクトリーを新しいフォルダーに変更してから、npm initを実行します。

このレッスンの環境のセットアップを始めましょう。 Node.jsが使用されるため、開始する最も簡単な方法は、新しいフォルダーを作成して実行することですnpm init 。 elastic-node新しいフォルダという名前のファイルを作成し、ディレクトリを新しいフォルダに変更してから、npm initを実行します。 ：

//create a new directory called elastic-nodemkdir elastic-node //change directory to the new folder created cd elastic-node //run npm init to create a package.json file npm init

上記のコマンドは、Node.jsライブラリを実行するために必要なpackage.jsonファイルを作成するプロセスを案内します。次に、リアルタイム検索エンジンに必要なライブラリをインストールする必要があります。必要なライブラリは次のとおりです。

上記のコマンドは、Node.jsライブラリを実行するために必要なpackage.jsonファイルを作成するプロセスを案内します。次に、リアルタイム検索エンジンに必要なライブラリをインストールする必要があります。必要なライブラリは次のとおりです。

  • Express：このライブラリはサーバーを実行します。 Express：このライブラリはサーバーを実行します。
  • Body-parser：このライブラリはExpressと連携して、bodyリクエストを解析します。ボディパーサー：このライブラリはExpressと連携して、ボディリクエストを解析します。
  • Elasticsearch：これはElasticsearchの公式Node.jsライブラリであり、リアルタイム検索が構築されるエンジンです。 Elasticsearch：これはElasticsearchの公式Node.jsライブラリであり、リアルタイム検索を構築するためのエンジンです。

これらのライブラリをインストールするには、以下を実行します。

これらのライブラリをインストールするには、以下を実行します。

npm install express body-parser elasticsearch

これで、環境の最初の部分がセットアップされました。ただし、Elasticsearch自体がセットアップに含まれていません。 Elasticsearch自体をインストールする必要があります。 Elasticsearchをインストールするにはさまざまな方法があります。 Debian Linuxオペレーティングシステムを使用している場合は、.debをダウンロードするだけです。ファイルを作成し、dpkgを使用してインストールします。

これで、環境の最初の部分がセットアップされました。ただし、Elasticsearch自体がセットアップに含まれていません。 Elasticsearch自体をインストールする必要があります。 Elasticsearchをインストールするには複数の方法があります。 Debian Linuxオペレーティングシステムを使用している場合は、.debファイルをダウンロードしてdpkgインストールを使用できます。

//download the deb packagecurl -L -O https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.6.4.deb //install the deb package using dpkg sudo dpkg -i elasticsearch-5.6.4.deb

他のディストリビューション/オペレーティングシステムについては、Elasticsearchのインストール方法に関するガイドを見つけることができます ここに 。

他のディストリビューション/オペレーティングシステムについては、次のことができます ここに Elasticsearchのインストール方法に関するガイドを見つけてください。

Elasticsearchはインストール後に自動的に開始されません。 Elasticsearchは、serviceコマンドを使用して開始および停止できます。

インストール後、Elasticsearchは自動的に起動しません。次のサービスコマンドを使用して、Elasticsearchを開始および停止できます。

// start the Elasticsearchservice sudo -i service elasticsearch start // stop the Elasticsearch service sudo -i service elasticsearch stop

システムの起動時に自動的に起動するようにElasticsearchを構成するには、次のコマンドを実行します。

システムの起動時に自動的に起動するようにElasticsearchを構成するには、次のコマンドを実行します。

//reload the systemctl daemonsudo /bin/systemctl daemon-reload // enable elastic search so it can be called as a service sudo /bin/systemctl enable elasticsearch.service

上記のコマンドを実行した後、次を実行してElasticsearchを開始および停止できます。

上記のコマンドを実行した後、次のコマンドを実行してElasticsearchを開始および停止できます。

// start the Elasticsearchservice sudo systemctl start elasticsearch.service // stop the Elasticsearch service sudo systemctl stop elasticsearch.service

Elasticsearchのステータスを確認するには：

Elasticsearchのステータスを確認するには：

// check status of Elasticsearchsudo service elasticsearch status

注：Elasticsearchを使用する際の優れたツールは、 Google ChromeElasticツールボックス 。インデックスとドキュメントをすばやく確認するのに役立ちます。

注：Elasticsearchで使用する場合、優れたツールは次のとおりです。 Google Chrome Elastic Toolbox 。 インデックスやドキュメントをすばやく表示するのに役立ちます。

Elasticsearchのインデックスデータ （（ Elasticsearchでのデータのインデックス作成 ）。

data.jsを作成しますルートフォルダにファイルを追加し、以下を追加します。

ルートフォルダに1つ作成しますdata.jsファイルして追加します：

//data.js //require the Elasticsearch librray const elasticsearch = require('elasticsearch') // instantiate an Elasticsearch client const client = new elasticsearch.Client({ hosts: [ 'http://localhost:9200'] }) // ping the client to be sure Elasticsearch is up client.ping({ requestTimeout: 30000, }, function(error) { // at this point, eastic search is down, please check your Elasticsearch service if (error) { console.error('Elasticsearch cluster is down!') } else { console.log('Everything is ok') } })

上記のコードブロックで行ったことを説明しましょう。最初に、Elasticsearchライブラリが必要であり、1つのホストの配列を渡す新しいElasticsearchクライアントをセットアップしました。お気づきのように、ホストはhttp://localhost:9200です。これは、デフォルトでは、Elasticsearchがポート9200でリッスンするためです。次に、Elasticsearchクライアントにpingを実行して、サーバーが稼働していることを確認します。 node data.jsを実行した場合Everything is okというメッセージが表示されます。

上記のコードブロックで行ったことを説明しましょう。まず、Elasticsearchライブラリが必要であり、ホストの配列を渡す新しいElasticsearchクライアントをセットアップします。お気づきのように、ホストはhttp://localhost:9200 。これは、デフォルトで、Elasticsearchがポートでリッスンするためです9200 。次に、Elasticsearchクライアントにpingを実行して、サーバーが起動していることを確認します。実行した場合node data.js 、 'Everything is okというメッセージが表示されます。 。

インデックスを理解する （（ インデックスを理解する ）。

通常のデータベースとは異なり、Elasticsearchインデックスは関連ドキュメントを保存する場所です。たとえば、scotch.io-tutorialというインデックスを作成します。タイプcities_listのデータを格納します。 Elasticsearchでは次のように実行されます。

通常のデータベースとは異なり、Elasticsearchインデックスは関連するドキュメントが保存される場所です。たとえば、scotch.io-tutorialインデックスという名前のファイルを作成して 'cities_listを保存します。 'データのタイプ。これがElasticsearchで行われる方法です。

//data.js // create a new index called scotch.io-tutorial. If the index has already been created, this function fails safely client.indices.create({ index: 'scotch.io-tutorial' }, function(error, response, status) { if (error) { console.log(error) } else { console.log('created a new index', response) } })

pingの後にこのコードを追加します以前に作成した関数。ここで、node data.jsを実行しますここでも、2つのメッセージが表示されます。

あなたの前に書かれましたping関数の後にこのコードを追加してください。もう一度実行してくださいnode data.js 、2つのメッセージが表示されます。

  • すべてが大丈夫すべてが正常です
  • 新しいインデックスを作成しました（Elasticsearchからの応答を使用）新しいインデックスを作成します（Elasticsearchからの応答を使用）

インデックスにドキュメントを追加する （（ インデックスへのドキュメントの追加 ）。

Elasticsearch APIを使用すると、作成済みのインデックスにドキュメントを簡単に追加できます。それは次のように簡単です：

Elasticsearch APIを使用すると、作成したインデックスにドキュメントを簡単に追加できます。それは非常に簡単です：

// add a data to the index that has already been created client.index({ index: 'scotch.io-tutorial', id: '1', type: 'cities_list', body: { 'Key1': 'Content for key one', 'Key2': 'Content for key two', 'key3': 'Content for key three', } }, function(err, resp, status) { console.log(resp) })

上記のコードブロックは説明的なものです。 body scotch.io-tutorialに追加するドキュメントを指しますタイプはよりカテゴリですが、インデックス。ただし、idの場合は注意してくださいキーが省略されている場合、Elasticsearchはキーを自動生成します。

上記のコードブロックは実例です。body追加したいことを意味しますscotch.io-tutorialインデックス内のドキュメントであり、タイプはより多くのカテゴリです。ただし、省略した場合id Keyは、Elasticsearchが自動的に生成することに注意してください。

ただし、このレッスンでは、ドキュメントは世界のすべての都市のリストになります。各都市を1つずつ追加する場合、すべてを完全にインデックス化するには、数週間ではなくても数日かかります。幸い、Elasticsearchにはbulkがありますバルクデータの処理に使用される関数。

ただし、このコースでは、ドキュメントは世界のすべての都市のリストになります。各都市を1つずつ追加する場合は、すべての都市のインデックスを完全に作成するのに数日から数週間かかります。幸い、Elasticsearchにはバルクデータを処理するためのツールがありますbulk機能。

まず、世界のすべての都市を含むJSONファイルを取得します ここに ルートフォルダにcities.jsonとして保存します

まず第一に、 ここに 世界のすべての都市を含むJSONファイルを取得し、都市として保存しますcities.jsonルートフォルダーに保存します

bulkを使用する時が来ました私たちが持っているデータの大きな塊をインポートするためのAPI：

使用する時間ですbulk APIは、次のような多くのデータをインポートします。

//data.js // require the array of cities that was downloaded const cities = require('./cities.json') // declare an empty array called bulk var bulk = [] //loop through each city and create and push two objects into the array in each loop //first object sends the index and type you will be saving the data as //second object is the data you want to index cities.forEach(city =>{ bulk.push({index:{ _index:'scotch.io-tutorial', _type:'cities_list', } }) bulk.push(city) }) //perform bulk indexing of the data passed client.bulk({body:bulk}, function( err, response ){ if( err ){ console.log('Failed Bulk operation'.red, err) } else { console.log('Successfully imported %s'.green, cities.length) } })

ここでは、JSON内のすべての都市をループしています。ファイルを作成し、各ループで、オブジェクトにindexを追加します。およびtypeインデックスを作成するドキュメントのループ中に配列に2回プッシュされることに注意してください。これは、bulkが原因です。 APIは、最初にインデックス定義を含むオブジェクトを想定し、次にインデックスを作成するドキュメントを想定しています。詳細については、以下を確認してください。 ここに

ここでトラバースしましたJSONファイル内のすべての都市、および各サイクルで、オブジェクトはインデックス付けされるドキュメントに添付されますindex with type 。ループ中にアレイに2回プッシュされることに注意してください。これはbulkが理由ですAPIでは、オブジェクトに最初にインデックス定義が含まれ、次にインデックスが作成されるドキュメントが含まれている必要があります。詳細については、次のことができます。 ここを見る

次に、client.bulkに電話しました新しいバルク配列を本体として渡す関数。これにより、すべてのデータがscotch.io-tutorialのインデックスでElasticsearchにインデックス付けされますcities_listと入力します。

次に、client.bulk関数を呼び出し、新しいバッチ配列を本体として渡します。これは、scotch.io-tutorial index of scotch.io-tutorialすべてのデータをElasticsearchにインデックス付けしてcities_listと入力します。 。

エクスプレッションミックス （（ Express To The Mix ）。

Elasticsearchインスタンスが稼働しており、Node.jsを使用して接続できます。 Expressを使用してランディングページを提供し、これまでに実行したセットアップを使用するときが来ました。

Elasticsearchインスタンスが稼働しており、Node.jsを使用してインスタンスに接続できます。次に、Expressサービスのランディングページを使用して、これまでに実行した設定を使用します。

index.jsというファイルを作成しますそして追加：

index.jsという名前のファイルを作成し、以下を追加します。

//index.js //require the Elasticsearch librray const elasticsearch = require('elasticsearch') // instantiate an elasticsearch client const client = new elasticsearch.Client({ hosts: [ 'http://localhost:9200'] }) //require Express const express = require( 'express' ) // instanciate an instance of express and hold the value in a constant called app const app = express() //require the body-parser library. will be used for parsing body requests const bodyParser = require('body-parser') //require the path library const path = require( 'path' ) // ping the client to be sure Elasticsearch is up client.ping({ requestTimeout: 30000, }, function(error) { // at this point, eastic search is down, please check your Elasticsearch service if (error) { console.error('elasticsearch cluster is down!') } else { console.log('Everything is ok') } }) // use the bodyparser as a middleware app.use(bodyParser.json()) // set port for the app to listen on app.set( 'port', process.env.PORT || 3001 ) // set path to serve static files app.use( express.static( path.join( __dirname, 'public' ))) // enable CORS app.use(function(req, res, next) { res.header('Access-Control-Allow-Origin', '*') res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS') res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept') next() }) // defined the base route and return with an HTML file called tempate.html app.get('/', function(req, res){ res.sendFile('template.html', { root: path.join( __dirname, 'views' ) }) }) // define the /search route that should return elastic search results app.get('/search', function (req, res){ // declare the query object to search elastic search and return only 200 results from the first result found. // also match any data where the name is like the query string sent in let body = { size: 200, from: 0, query: { match: { name: req.query['q'] } } } // perform the actual search passing in the index, the search query and the type client.search({index:'scotch.io-tutorial', body:body, type:'cities_list'}) .then(results => { res.send(results.hits.hits) }) .catch(err=>{ console.log(err) res.send([]) }) }) // listen on the specified port app .listen( app.get( 'port' ), function(){ console.log( 'Express server listening on port ' + app.get( 'port' )) } )

上記のコードを見ると、次のことに注意してください。

上記のコードを見て、次のことに注意してください。

  • Express、body-parser、およびpathライブラリが必要です。

    Express、ボディパーサー、パスライブラリが必要です。

  • Expressの新しいインスタンスをappという定数に設定します。

    Expressの新しいインスタンスをapp Constantという名前に設定します。

  • bodyParserを使用するようにアプリを設定しますミドルウェア。

    使用するようにアプリケーションを設定しますbodyParserミドルウェア。

  • アプリの静的部分をpublicというフォルダーに設定します（このフォルダーはまだ作成していません）。

    アプリケーションの静的部分をpublicという名前のフォルダーに設定します（このフォルダーはまだ作成していません）。

  • CORSを追加するミドルウェアを定義しましたアプリへのヘッダー。

    willを定義しますCORSヘッダーはアプリケーションのミドルウェアに追加されます。

  • 定義済みGET rootのルート/で表されるアプリのURLこのルートでは、template.htmlというファイルを返しました。 viewsにありますフォルダー（このフォルダーとファイルtemplate.htmlもまだ作成していません）

    for /アプリケーションの表現root URL定義GETルート、このルートでは、template.htmlファイルはviewsフォルダーにあります（このフォルダーとtemplate.htmlファイルも作成します）

  • 定義済みGET /searchのルートクエリオブジェクトを使用して、クエリ文字列を介して渡されたデータの一致を検索するアプリのURL。メインの検索クエリは、クエリオブジェクトに含まれています。このオブジェクトにさまざまな検索クエリを追加できます。このクエリでは、クエリにキーを追加し、探しているドキュメントの名前がreq.query['q']と一致する必要があることを示すオブジェクトを返します。

    クエリオブジェクトに加えて、検索本文には、サイズや差出人など、他のオプションのプロパティを含めることができます。 sizeプロパティは、応答に含めるドキュメントの数を決定します。この値が存在しない場合、デフォルトで10個のドキュメントが返されます。 fromプロパティは、返されるドキュメントの開始インデックスを決定します。これはページ付けに役立ちます。

    アプリケーションの場合/search URL定義GETクエリオブジェクトを使用してクエリ文字列を介して渡されたデータとの一致を検索するルート。メインの検索クエリはクエリオブジェクトに含まれています。このオブジェクトにさまざまな検索クエリを追加できます。このクエリでは、クエリにキーを追加してからオブジェクトを返し、探しているドキュメントの名前が一致する必要があることをオブジェクトに通知できますreq.query['q'] match。

    クエリオブジェクトに加えて、検索本文には、サイズや差出人など、他のオプションの属性を含めることもできます。 size属性は、応答に含めるドキュメントの数を決定します。この値が存在しない場合、デフォルトで10個のドキュメントが返されます。 from属性は、返されるドキュメントの開始インデックスを決定します。これはページングに役立ちます。

SearchAPIの応答を理解する （（ SearchAPIの応答を理解する ）。

検索APIからの応答をログアウトする場合、多くの情報が含まれています。

検索APIからの応答をログアウトする場合は、多くの情報が含まれています。

{ took: 88, timed_out: false, _shards: { total: 5, successful: 5, failed: 0 }, hits: { total: 59, max_score: 5.9437823, hits: [ {'_index':'scotch.io-tutorial', '_type':'cities_list', '_id':'AV-xjywQx9urn0C4pSPv', '_score':5.9437823,' _source':{'country':'ES','name':'A Coruña','lat':'43.37135','lng':'-8.396'}}, [Object], ... [Object] ] } }

応答にはtookが含まれます結果を見つけるのにかかったミリ秒数のプロパティtimed_outこれは、最大許容時間_shardsで結果が見つからなかった場合にのみ当てはまります。さまざまなノードのステータス（ノードのクラスターとしてデプロイされている場合）、および検索結果を含むhitsについての情報。

応答にはa took属性のミリ秒数が見つかった結果を取得しますtimed_out 、最大許容時間内に結果が見つからない場合、これが唯一の真です。_shardsさまざまなノードに関する情報（ノードのクラスターとしてデプロイされている場合はステータス情報）およびhits 、検索結果が含まれます。

hits内プロパティには、次のプロパティのオブジェクトがあります。

in hitsプロパティには、次のプロパティを持つオブジェクトがあります。

total一致したアイテムの総数を示します。

total一致の総数を表示します。

max_score見つかったアイテムの最大スコアです。

max_score見つかったアイテムの最高スコアです。

hits見つかったアイテムを含む配列です。

hits見つかったアイテムを含む配列です。

上記の説明は、検索ルートで見つかったドキュメントを格納するresponse.hits.hitsを返した理由です。

上記の説明が検索ルートの理由です、あなたは戻ってきましたresponse.hits.hits 、見つかったドキュメントが含まれています。

HTMLテンプレートを作成する （（ HTMLテンプレートの作成 ）。

まず、ルートフォルダにviewsという名前の2つの新しいフォルダを作成しますおよびpublic上記のセクションで参照しました。次に、template.htmlというファイルを作成しますviewsでフォルダと貼り付け：

まず、前のセクションで参照したルートフォルダーに2つの新しいフォルダーを作成し、それらに名前を付けますviews with public 。次に、viewsという名前のフォルダーを作成しますtemplate.htmlそして貼り付けます：

<link rel='stylesheet' type='text/css' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <script src='https://unpkg.com/axios/dist/axios.min.js'>script> <script src='https://cdn.jsdelivr.net/npm/vue'>script> <div class='container' id='app'> <div class='row'> <div class='col-md-6 col-md-offset-3'> <h1>Search Cities around the worldh1> div> div> <div class='row'> <div class='col-md-4 col-md-offset-3'> <form action='' class='search-form'> <div class='form-group has-feedback'> <label for='search' class='sr-only'>Searchlabel> <input type='text' class='form-control' name='search' id='search' placeholder='search' v-model='query' > <span class='glyphicon glyphicon-search form-control-feedback'>span> div> form> div> div> <div class='row'> <div class='col-md-3' v-for='result in results'> <div class='panel panel-default'> <div class='panel-heading'> {{ result._source.name }}, {{ result._source.country }} div> <div class='panel-body'> <p>lat:{{ result._source.lat }}, long: {{ result._source.lng }}.p> div> div> div> div> div> <style> .search-form .form-group { float: right !important transition: all 0.35s, border-radius 0s width: 32px height: 32px background-color: #fff box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset border-radius: 25px border: 1px solid #ccc } .search-form .form-group input.form-control { padding-right: 20px border: 0 none background: transparent box-shadow: none display: block } .search-form .form-group input.form-control::-webkit-input-placeholder { display: none } .search-form .form-group input.form-control:-moz-placeholder { /* Firefox 18- */ display: none } .search-form .form-group input.form-control::-moz-placeholder { /* Firefox 19+ */ display: none } .search-form .form-group input.form-control:-ms-input-placeholder { display: none } .search-form .form-group:hover, .search-form .form-group.hover { width: 100% border-radius: 4px 25px 25px 4px } .search-form .form-group span.form-control-feedback { position: absolute top: -1px right: -2px z-index: 2 display: block width: 34px height: 34px line-height: 34px text-align: center color: #3596e0 left: initial font-size: 14px } style>

上記のコードスニペットには、次の2つの主要なセクションがあります。

上記のコードスニペットには、2つの主要な部分があります。

  • HTMLコード：このセクションでは、1。）ページのスタイルを設定するためのブートストラップCSSである3つの異なるライブラリを要求することから始めました。 2.）サーバーにHTTPリクエストを送信するためのAxios js、および3.）ビューに使用する最小限のフレームワークであるVue.js。

    HTMLコード：このセクションでは、最初に3つの異なるライブラリが必要です。それらは1です。）ページのスタイル設定に使用されるブートストラップCSS。 2.）サーバーへのHTTPリクエストを行うために使用されるAxios js 3.）Vue.js、これはビューに使用される最小限のフレームワークです。

  • CSSコード：ここでは、検索アイコンにカーソルを合わせると、検索入力が非表示および表示されるようにスタイルを適用しました。

    次に、v-modelを割り当てた検索ボックスへの入力があります。 〜query （これはVue.jsによって使用されます）。この後、すべての結果をループしました（このループとresult変数はVue.jsで利用できるようになります）。ここでループしている間、_sourceにアクセスする必要があることに注意してくださいデータのプロパティ。これは、ElasticSearchが返す応答に基づいて見覚えがあるはずです。

    CSSコード：ここでは、検索アイコンにカーソルを合わせたときに検索入力を表示および非表示にするスタイルを適用しました。

    次に、割り当てる検索ボックスに入力を入力しますv-model続行するquery （Vue.jsはこの入力を使用します）。その後、すべての結果をトラバースします（ループとresult変数はVue.jsによって提供されます）。ここでループするときは、データ_source属性にアクセスする必要があることに注意してください。 Elastic Searchによって返される応答に基づくと、これは見覚えがあるはずです。

実行node index.jsコマンド、http://localhost:3001/を参照すると、次のように表示されます。

実行node index.jsコマンド、参照http://localhost:3001/ 、次のように表示されます。

次に、template.htmlにスクリプトタグを追加しますファイル、追加：

次に、template.htmlスクリプトタグをファイルに追加し、次を追加します。

//template.html // create a new Vue instance var app = new Vue({ el: '#app', // declare the data for the component (An array that houses the results and a query that holds the current search string) data: { results: [], query: '' }, // declare methods in this Vue component. here only one method which performs the search is defined methods: { // make an axios request to the server with the current search query search: function() { axios.get('http://127.0.0.1:3001/search?q=' + this.query) .then(response => { this.results = response.data }) } }, // declare Vue watchers watch: { // watch for change in the query string and recall the search method query: function() { this.search() } } })

Vue.jsコード：このセクションでは、Vueの新しいインスタンスを宣言し、idを使用して要素にマウントしました。 appの。 1を含むデータプロパティを宣言しました。）query検索入力に添付したもの、および2.）resultsこれは、見つかったすべての結果の配列です。

Vue.jsコード：このセクションでは、Vueの新しいインスタンスを宣言し、それを要素にid for appインストールします。 1）query検索入力に接続されている、2）、resultsすべての結果の配列など、宣言するデータの性質。

メソッドquotaには、GETをトリガーするsearchという関数が1つだけあります。 searchへのリクエスト検索ボックスの現在の入力に沿って通過するルート。これにより、応答が返され、HTMLコードブロックでループされます。

メソッドquotaには、searchという名前の関数が1つだけあり、検索ボックスsearch Path GET requestの現在の入力に沿ってペアを渡します。順番に応答を返し、HTMLコードブロックで応答をループします。

最後に、watchersと呼ばれるものを使用しますVue.jsで、データの変更を監視しているときはいつでもアクションを実行します。ここでは、queryの変化を監視していますデータ、およびそれが変更されると、searchメソッドが実行されます。

最後に、いわゆるwatchersプログラムを使用して、watchersデータの変更を監視しながらいつでも操作を実行します。ここでは、データの変化を観察していますquery変更されると、searchメソッドがトリガーされます。

node index.jsを再実行した場合今すぐコマンドを実行してhttp://localhost:3001/を参照すると、次のように機能するはずです。

今すぐ再実行する場合node index.jsコマンドを実行して参照http://localhost:3001/ 、正常に動作するはずです：

クライアントから検索 （（ クライアント側からの検索 ）。

検索が発生するたびにサーバーにリクエストを送信したくない場合はどうなりますか？ Elasticsearchエンジンをクライアント側から直接検索できますか？はい。

検索するたびにサーバーにリクエストを送信したくない場合はどうすればよいですか？クライアントから直接Elasticsearchエンジンを検索できますか？はい。

上記のアプローチは機能しますが、一部の開発者は、検索用語ごとに常にサーバーにアクセスすることに抵抗があるかもしれませんが、サーバー側から検索する方が安全だと感じる開発者もいます。

上記の方法は機能しますが、一部の開発者はすべての検索用語で常にサーバーにアクセスするとは限りませんが、サーバー側から検索する方が安全だと考える開発者もいます。

ただし、クライアント側から検索することは可能です。 Elasticsearchは、検索を行うことができるブラウザービルドを提供します。簡単なサンプルを紹介します。

ただし、クライアントから検索することはできます。 Elasticsearchは、検索可能なブラウザバージョンを提供します。簡単な紹介をさせてください。

まず、Expressファイルに新しいルートを追加し、サーバーを再起動します。

まず、Expressファイルに新しいパスを追加し、サーバーを再起動します。

//index.js // decare a new route. This route serves a static HTML template called template2.html app.get('/v2', function(req, res){ res.sendFile('template2.html', { root: path.join( __dirname, 'views' ) }) })

上記のこのコードブロックでは、/v2にURLの新しいルートを作成しました。このルートで行ったのは、静的なHTMLを返すことだけです。 template2.htmlというファイル間もなく作成されます。

上記のコードブロックでは、/v2 URLに新しいルートを作成しました。このルートで行うのは、template2.html静的HTMLファイルというルートを返すことだけです。ファイルは次のようになります。すぐに作成されます。

次に、Elasticsearchのクライアントライブラリをダウンロードする必要があります ここに 。ダウンロード後、抽出してコピーelasticsearch.min.jsアプリケーションルートのパブリックフォルダに移動します。

次に、あなたはする必要があります ここに Elasticsearchのクライアントライブラリをダウンロードします。ダウンロード後、解凍elasticsearch.min.jsアプリケーションのルートディレクトリの下にあるパブリックフォルダにコピーします。

注：クライアント側からElasticsearchエンジンに接続しようとすると、CORSが発生する可能性があることを知っておくことが重要です。問題。この問題を解決するには、Elasticsearch構成ファイルを見つけます（Debian / Ubuntuの場合は、/etc/elasticsearch/elasticsearch.ymlにあります。他のオペレーティングシステムの場合は、どこにあるかを調べます。 ここに そして、ファイルの最後に以下を追加します。

注：クライアントからElasticsearchエンジンに接続しようとするかどうかを知ることは重要です。そうしないと、CORS問題が発生する可能性があります。 この問題を解決するには、Elasticsearch構成ファイルを見つけます（Debian / Ubuntuの場合は、/etc/elasticsearch/elasticsearch.yml上げることができます。他のオペレーティングシステムの場合は、 ここに その場所を見つけて、ファイルに以下を追加します。

#/etc/elasticsearch/elasticsearch.yml http.cors.enabled : true http.cors.allow-origin : '*'

それが完了したら、Elasticsearchインスタンスを再起動します

完了後、Elasticsearchインスタンスを再起動します

// restart the Elasticsearchservice sudo service elasticsearch restart

次に、template2.htmlというファイルを作成しますあなたのviewsフォルダと追加：

次に、viewsという名前のフォルダを作成しますtemplate2.htmlそして追加します：

<link rel='stylesheet' type='text/css' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <script src='https://unpkg.com/axios/dist/axios.min.js'>script> <script src='https://cdn.jsdelivr.net/npm/vue'>script> <div class='container' id='app'> <div class='row'> <div class='col-md-6 col-md-offset-3'> <h1>Search Cities around the worldh1> div> div> <div class='row'> <div class='col-md-4 col-md-offset-3'> <form action='' class='search-form'> <div class='form-group has-feedback'> <label for='search' class='sr-only'>Searchlabel> <input type='text' class='form-control' name='search' id='search' placeholder='search' v-model='query' > <span class='glyphicon glyphicon-search form-control-feedback'>span> div> form> div> div> <div class='row'> <div class='col-md-3' v-for='result in results'> <div class='panel panel-default'> <div class='panel-heading'> {{ result._source.name }}, {{ result._source.country }} div> <div class='panel-body'> <p>lat:{{ result._source.lat }}, long: {{ result._source.lng }}.p> div> div> div> div> div> <script src='/elasticsearch.min.js'>script> <style> .search-form .form-group { float: right !important transition: all 0.35s, border-radius 0s width: 32px height: 32px background-color: #fff box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset border-radius: 25px border: 1px solid #ccc } .search-form .form-group input.form-control { padding-right: 20px border: 0 none background: transparent box-shadow: none display: block } .search-form .form-group input.form-control::-webkit-input-placeholder { display: none } .search-form .form-group input.form-control:-moz-placeholder { /* Firefox 18- */ display: none } .search-form .form-group input.form-control::-moz-placeholder { /* Firefox 19+ */ display: none } .search-form .form-group input.form-control:-ms-input-placeholder { display: none } .search-form .form-group:hover, .search-form .form-group.hover { width: 100% border-radius: 4px 25px 25px 4px } .search-form .form-group span.form-control-feedback { position: absolute top: -1px right: -2px z-index: 2 display: block width: 34px height: 34px line-height: 34px text-align: center color: #3596e0 left: initial font-size: 14px } style>

次に、template2.htmlにスクリプトタグを追加しますファイルして追加：

次に、あなたのtemplate2.htmlにスクリプトタグをファイルに追加し、以下を追加します。

//template2.html // instantiate a new Elasticsearch client like you did on the client var client = new elasticsearch.Client({ hosts: ['http://127.0.0.1:9200'] }) // create a new Vue instance var app = new Vue({ el: '#app', // declare the data for the component (An array that houses the results and a query that holds the current search string) data: { results: [], query: '' }, // declare methods in this Vue component. here only one method which performs the search is defined methods: { // function that calls the elastic search. here the query object is set just as that of the server. //Here the query string is passed directly from Vue search: function() { var body = { size: 200, from: 0, query: { match: { name: this.query } } } // search the Elasticsearch passing in the index, query object and type client.search({ index: 'scotch.io-tutorial', body: body, type: 'cities_list' }) .then(results => { console.log(`found ${results.hits.total} items in ${results.took}ms`) // set the results to the result array we have this.results = results.hits.hits }) .catch(err => { console.log(err) }) } }, // declare Vue watchers watch: { // watch for change in the query string and recall the search method query: function() { this.search() } } })

上記のHTMLおよびJavaScriptスニペットは、上記のセクションのものと非常に同じです。唯一の違いは次のとおりです。

上記のHTMLおよびJavaScriptコードスニペットは、上記の部分と非常によく似ています。唯一の違いは次のとおりです。

  • Axiosは必要ありませんでした、elasticsearch.jsが必要でした代わりに。必要ありませんAxios 、しかし必要elasticsearch.js 。
  • スクリプトタグの上部で、サーバー側で実行されたようにElasticsearchクライアントを開始しました。 [スクリプト]タブの上部で、サーバー側にあるかのようにElasticsearchクライアントを起動しました。
  • 検索メソッドはHTTPを実行しませんリクエストしますが、サーバー側の検索ルートで行われるようにElasticsearchエンジンを検索します。検索メソッドは実行されませんHTTPリクエストしますが、サーバー側の検索ルートの方法に従ってElasticsearchエンジンを検索します。

http://localhost:3001/v2を参照すると、次のように機能するはずです。

閲覧した場合http://localhost:3001/v2 、次のように機能するはずです。

結論として （（ 結論 ）。

このレッスンでは、Elasticsearchでデータにインデックスを付ける方法とElasticsearchでデータを検索する方法を理解しました。また、Elasticsearchのクライアントライブラリを使用してリアルタイム検索を実装する方法も学習しました。 Elasticsearchについてどう思いますか？コメント欄で議論しましょう。

このコースでは、Elasticsearchでデータにインデックスを付ける方法とElasticsearchでデータを検索する方法をマスターしました。さらに、Elasticsearchクライアントライブラリを使用してリアルタイム検索を実装する方法を学びました。 Elasticsearchについてどう思いますか？コメント欄で議論しましょう。

翻訳元： https://scotch.io/tutorials/build-a-real-time-search-engine-with-node-vue-and-elasticsearch

nodevueリアルタイムプッシュ