使用Node，Vue和ElasticSearch構建實時搜索引擎

GHOST_349178 發布于2019-08-29 15:24 / 2981人閱讀

摘要：建立在之上，它是一個高性能的文本搜索引擎庫。目錄在今天的課程中，您將學習如何使用，和構建實時搜索引擎。接下來，您需要安裝實時搜索引擎所需的庫。這是的官方庫，它是實時搜索的引擎。主要的搜索查詢包含在查詢對象中。但是，可以從客戶端進行搜索。

（譯者注：相關閱讀：node.js,vue.js,Elasticsearch）

介紹

Elasticsearch是一個分布式的RESTful搜索和分析引擎，能夠解決越來越多的用例。 Elasticsearch建立在Apache Lucene之上，它是一個高性能的文本搜索引擎庫。

在今天的課程中，您將學習如何使用Node.js，Elasticsearch和Vue.js構建實時搜索引擎。因此，需要對本教程進行基本的Vue.js和Node.js（Express）理解。

入門

讓我們開始為本課設置環境。由于您將使用Node.js，因此最簡單的入門方法是創建一個新文件夾并運行npm init。創建一個名為elastic-node的新文件夾，將目錄更改為新文件夾，然后運行npm init：

//創建一個名為elastic-node的新目錄
mkdir elastic-node
//將目錄更改為創建的新文件夾
cd elastic-node
//運行npm init來創建一個package.json文件
npm init

上述命令將引導您完成創建package.json文件的過程，該文件是運行任何Node.js庫所必需的。接下來，您需要安裝實時搜索引擎所需的庫。所需的庫是：

Express: 這個庫將運行我們的服務器

Body-parser: 該庫與Express一起使用來分析正文請求。

Elasticsearch: 這是Elasticsearch的官方Node.js庫，它是實時搜索的引擎。

要安裝這些庫，執行：

npm install express body-parser elasticsearch

現在，您的環境的第一部分已經建立。但是，您的設置中缺少Elasticsearch。您將需要安裝Elasticsearch。有不同的方法來安裝Elasticsearch。如果您使用Debian Linux操作系統，則可以下載.deb文件并使用dpkg進行安裝。

//下載deb包
curl -L -O https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.6.4.deb
//使用dpkg安裝deb包
sudo dpkg -i elasticsearch-5.6.4.deb

對于其他發行版/操作系統，您可以在這里找到關于如何安裝Elasticsearch的指南。

Elasticsearch安裝后不會自動啟動。 Elasticsearch可以使用服務命令啟動和停止：

// 啟動Elasticsearch服務
sudo -i service elasticsearch start
// 停止Elasticsearch服務
sudo -i service elasticsearch stop

要將Elasticsearch配置為在系統啟動時自動啟動，請運行：

// 重新加載systemctl守護進程
sudo /bin/systemctl daemon-reload
// enable elastic search so it can be called as a service
sudo /bin/systemctl enable elasticsearch.service

運行上面的命令后，您可以運行以下命令來啟動和停止Elasticsearch：

// 啟動Elasticsearch服務
sudo systemctl start elasticsearch.service
// 停止Elasticsearch服務
sudo systemctl stop elasticsearch.service

檢查Elasticsearch的狀態：

// Elasticsearch的狀態
sudo service elasticsearch status

注意：Google Chrome Elastic工具箱可以幫助您快速查看Elasticsearch的索引和文檔。

在Elasticsearch中索引數據

在根文件夾中創建一個data.js文件并添加：

//data.js
//require the Elasticsearch librray
const elasticsearch = require("elasticsearch");
// 實例化一個Elasticsearch客戶端
const client = new elasticsearch.Client({
   hosts: [ "http://localhost:9200"]
});
// ping客戶端以確保Elasticsearch已啟動
client.ping({
     requestTimeout: 30000,
 }, function(error) {
 // 此時，eastic搜索已關閉，請檢查您的Elasticsearch服務
     if (error) {
         console.error("Elasticsearch cluster is down!");
     } else {
         console.log("Everything is ok");
     }
 });

讓我來解釋一下你在上面的代碼塊中所做的事情：首先，你需要Elasticsearch庫，并建立一個新的Elasticsearch客戶端傳入一個主機的數組。如果您注意到，主機是http：// localhost：9200。這是因為默認情況下，Elasticsearch在端口9200上監聽。接下來，您ping Elasticsearch客戶端以確保服務器已啟動。如果你運行節點data.js，你應該得到一個消息說一切正常。

了解索引

與普通數據庫不同，Elasticsearch索引是存儲相關文檔的地方。例如，您將創建一個名為scotch.io-tutorial的索引來存儲類型為cities_list的數據。這就是Elasticsearch所做的工作：

// data.js
// 創建一個名為scotch.io-tutorial的新索引。如果索引已經被創建，這個函數會安全地失敗
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，你應該得到兩條消息：

Everything is okay（一切正常）

Created a new index (with the response from Elasticsearch)（創建了一個新的索引（來自Elasticsearch的響應））

將文檔添加到索引

Elasticsearch API使文檔可以輕松添加到已創建的索引中。如下：

// 將數據添加到已創建的索引
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);
 });

上面的代碼塊是解釋性的。正文指的是您要添加到scotch.io-tutorial索引的文檔，而類型更多的是一個類別。但是，請注意，如果id鍵被省略，Elasticsearch將自動生成一個。

但是，在本課中，您的文檔將成為世界上所有城市的列表。如果您要逐個添加每個城市，那么需要幾天時間（如果不是幾周）才能完全索引所有城市。幸運的是，Elasticsearch有一個用于處理批量數據的批量函數。

首先，抓取包含世界上所有城市的JSON文件，并保存到您的根文件夾中作為cities.json

現在是時候使用批量API來導入我們大量數據了：

//data.js
// require the array of cities that was downloaded
const cities = require("./cities.json");
// 聲明一個名為bulk的空數組
var bulk = [];
// 循環遍歷每個城市，并在每個循環中創建并將兩個對象推入數組中
// 第一個對象發送索引和類型，保存數據
// 第二個對象是你想索引的數據
cities.forEach(city =>{
   bulk.push({index:{ 
                 _index:"scotch.io-tutorial", 
                 _type:"cities_list",
             }          
         })
  bulk.push(city)
})
// 對傳遞的數據執行批量索引
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文件中的所有城市，并且在每個循環中，您都會追加一個包含要索引的文檔的索引和類型的對象。請注意，在循環中有兩個推入數組？這是因為批量API需要首先包含索引定義的對象，然后是要索引的文檔。欲了解更多信息，你可以在這里查看。

接下來，您將傳遞給新的批量數組的client.bulk函數作為正文調用。這會將所有數據用scotch.io-tutorial的索引和類型cities_list索引到Elasticsearch中。

引入Express

您的Elasticsearch實例已啟動并正在運行，您可以使用Node.js連接它。現在是時候使用Express來為目標頁面提供服務，并使用迄今為止運行的設置。

創建一個名為index.js的文件并添加：

//index.js
// 需要Elasticsearch librray
const elasticsearch = require("elasticsearch");
// 實例化一個elasticsearch客戶端
const client = new elasticsearch.Client({
   hosts: [ "http://localhost:9200"]
});
//require Express
const express = require( "express" );
// 實例化一個表達式的實例并將其保存在一個名為app的常量中
const app     = express();
// 引入body-parser庫。將用于解析主體請求
const bodyParser = require("body-parser")
//require the path library
const path    = require( "path" );

// ping客戶端以確保Elasticsearch已啟動
client.ping({
     requestTimeout: 30000,
 }, function(error) {
 // 此時，eastic搜索已關閉，請檢查您的Elasticsearch服務
     if (error) {
         console.error("elasticsearch cluster is down!");
     } else {
         console.log("Everything is ok");
     }
 });

// 使用bodyparser作為中間件
app.use(bodyParser.json())
// 設置應用程序偵聽的端口
app.set( "port", process.env.PORT || 3001 );
// 設置路徑來提供靜態文件
app.use( express.static( path.join( __dirname, "public" )));
// 啟用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();
});

// 定義了基本路線并返回一個名為tempate.html的HTML文件
app.get("/", function(req, res){
  res.sendFile("template.html", {
     root: path.join( __dirname, "views" )
   });
})

// 定義應該返回彈性搜索結果的/ search路徑
app.get("/search", function (req, res){
  // 聲明查詢對象以搜索彈性搜索，并從找到的第一個結果中僅返回200個結果。
  // 還匹配其中名稱與發送的查詢字符串類似的任何數據
  let body = {
    size: 200,
    from: 0, 
    query: {
      match: {
          name: req.query["q"]
      }
    }
  }
  // 在索引中執行實際的搜索傳遞，搜索查詢和類型
  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([]);
  });

})
// 監聽一個指定的端口
app .listen( app.get( "port" ), function(){
  console.log( "Express server listening on port " + app.get( "port" ));
} );

看看上面的代碼，注意：

需要Express，body-parser和路徑庫。

將一個新的Express實例設置為常量，命名為app。

設置應用程序以使用bodyParser中間件。

將應用程序的靜態文件放在名為public的文件夾（我尚未創建此文件夾）。

定義了一個將CORS頭添加到應用程序的中間件。

定義一個GET路由在根目錄文件夾里，并且在此路由中，我返回了一個名為template.html的文件，該文件位于views文件夾中（我還尚未創建此文件夾和文件template.html）

為應用程序的/ search URL定義了一個GET路由，該路徑使用查詢對象來搜索通過查詢字符串傳遞給它的數據的匹配。主要的搜索查詢包含在查詢對象中。您可以向此對象添加不同的搜索查詢。對于這個查詢，你在查詢中添加一個關鍵字并返回一個對象，告訴它你正在查找的文檔的名字應該與req.query ["q"]匹配。

Besides the query object, the search body can contain other optional properties, including size and from. The size property determines the number of documents to be included in the response. If this value is not present, by default ten documents are returned. The from property determines the starting index of the returned documents. This is useful for pagination.

了解搜索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] ] } }

響應中包含一個用于查找結果的毫秒數的奪取屬性timed_out，如果在最大允許時間內未找到結果，則返回true; _shards用于獲取有關不同節點狀態的信息（如果部署為節點集群）以及包含搜索結果的匹配。

在hits屬性中，我們有一個對象具有以下屬性：

總數顯示匹配項目的總數。

max_score是找到的項目的最高分數。

命中包含找到的項目的數組。

以上是搜索路由的前提，您返回了response.hits.hits，其中包含找到的文檔。

創建HTML模板

首先，在上面的部分中引用的名為views和public的根文件夾中創建兩個新文件夾。接下來，在views文件夾中創建一個名為template.html的文件并粘貼：





    
        
            Search Cities around the world
        
    
    
        
            
                
                    Search
                    
                    
                
            
        
    
    
        
            
                
                
                    {{ result._source.name }}, {{ result._source.country }} 
                
                
                
                    lat:{{ result._source.lat }}, long: {{ result._source.lng }}.

在上面的代碼片段中，有兩個主要部分：

HTML代碼：在本節中，您首先需要三個不同的庫，分別是1.）Bootstrap CSS，用于設置頁面樣式。 2.）Axios js，用于向我們的服務器發送HTTP請求，以及3）Vue.js，一個您將用于我們的視圖的簡約框架。

CSS代碼：在這里，您將懸停在搜索圖標上的樣式應用于隱藏和顯示搜索輸入。

接下來，為您指定其v模型進行查詢的搜索框有一個輸入（這將由Vue.js使用）。在此之后，您循環遍歷所有結果（此循環和結果變量將由Vue.js提供）。請注意，在此循環時，您必須訪問數據的__source屬性。基于彈性搜索返回的響應，這看起來很熟悉。

運行node index.js命令，瀏覽到http：// localhost：3001 /，接下來，在你的template.html文件中添加一個腳本標簽，添加：

// template.html
// 創建一個新的Vue實例
var app = new Vue({
    el: "#app",
    // 聲明組件的數據（容納結果的數組以及包含當前搜索字符串的查詢） search string)
    data: {
        results: [],
        query: ""
    },
    // 在這個Vue組件中聲明方法。這里只定義了一種執行搜索的方法
    methods: {
        // 使用當前搜索查詢向服務器發出axios請求
        search: function() {
            axios.get("http://127.0.0.1:3001/search?q=" + this.query)
                .then(response => {
                    this.results = response.data;

                })
        }
    },
    // declare Vue watchers
    watch: {
        // 注意查詢字符串中的更改并調用搜索方法
        query: function() {
            this.search();
        }
    }

})

Vue.js代碼：在本節中，您聲明了一個Vue的新實例，將其掛載到具有應用程序ID的元素上。您聲明了數據屬性，其中包括1）查詢您已附加到搜索輸入，和2）結果，這是所有找到的結果的數組。

在方法配置中，只有一個稱為搜索的函數，它會觸發搜索路徑的GET請求，以傳遞搜索框中的當前輸入。然后會返回一個響應，然后在HTML代碼塊中循環。

最后，您使用Vue.js中的所謂觀察者，在任何時候都可以監視數據以查看更改。在這里，您正在觀察查詢數據中的更改，并且一旦它發生更改，就會觸發搜索方法。

從客戶端搜索

每次搜索發生時，如果我不想將請求發送到服務器，該怎么辦？我可以直接從客戶端搜索Elasticsearch引擎嗎？是。

盡管上述方法有效，但有些開發人員可能并不習慣于每次搜索條件都使用他們的服務器，有些則認為從服務器端進行搜索更安全。

但是，可以從客戶端進行搜索。 Elasticsearch提供了可以進行搜索的瀏覽器版本。讓我通過一個快速示例。

首先，將一條新路線添加到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路由，并且您在此路由中所做的所有操作都將返回一個名為template2.html的靜態HTML文件，該文件將很快創建。

接下來，您需要在這里下載Elasticsearch的客戶端庫。下載后，將elasticsearch.min.js提取并復制到應用程序根目錄中的公用文件夾。

注意：了解您是否嘗試從客戶端連接Elasticsearch引擎非常重要，您可能會遇到CORS問題。為了解決這個問題，找到你的Elasticsearch配置文件（對于Debian / Ubuntu，可以在/etc/elasticsearch/elasticsearch.yml找到它）。對于其他操作系統，找到它位于的位置，并將以下內容添加到底部文件：

#/etc/elasticsearch/elasticsearch.yml

http.cors.enabled : true
http.cors.allow-origin : "*"

完成之后，重新啟動Elasticsearch實例

// 重新啟動Elasticsearch服務
sudo service elasticsearch restart

接下來，在視圖文件夾中創建一個名為template2.html的文件并添加：





    
        
            Search Cities around the world
        
    
    
        
            
                
                    Search
                    
                    
                
            
        
    
    
        
            
                
                
                    {{ result._source.name }}, {{ result._source.country }} 
                
                
                
                    lat:{{ result._source.lat }}, long: {{ result._source.lng }}.

接下來，在您的template2.html文件中添加一個腳本標記并添加：

//template2.html
// 像你在客戶端上那樣實例化一個新的Elasticsearch客戶端
var client = new elasticsearch.Client({
    hosts: ["http://127.0.0.1:9200"]
});
// 創建一個新的Vue實例
var app = new Vue({
    el: "#app",
    // 聲明組件的數據（容納結果的數組以及包含當前搜索字符串的查詢）
    data: {
        results: [],
        query: ""
    },
    // 在這個Vue組件中聲明方法。這里只定義了一種執行搜索的方法
    methods: {
        // 函數調用彈性搜索。這里查詢對象與服務器的設置一樣。
        // 這里查詢字符串直接從Vue傳遞
        search: function() {
            var body = {
                    size: 200,
                    from: 0,
                    query: {
                        match: {
                            name: this.query
                        }
                    }
                }
                // 搜索傳入索引的Elasticsearch，查詢對象和類型
            client.search({ index: "scotch.io-tutorial", body: body, type: "cities_list" })
                .then(results => {
                    console.log(found ${results.hits.total} items in ${results.took}ms);
                    // 將結果設置為我們擁有的結果數組
                    this.results = results.hits.hits;
                })
                .catch(err => {
                    console.log(err)

                });

        }
    },
    // declare Vue watchers
    watch: {
        // 注意查詢字符串中的更改并調用搜索方法
        query: function() {
            this.search();
        }
    }

})

上面的HTML和JavaScript片段與上面的部分非常相似。唯一的區別是：

您不需要Axios，而是需要elasticsearch.js。

在腳本標記的頂部，您啟動了Elasticsearch客戶端，因為它在服務器端完成。

搜索方法不執行HTTP請求，而是像在服務器端的搜索路徑中那樣搜索Elasticsearch引擎。

原文閱讀：https://scotch.io/tutorials/b...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113302.html

使用Node，Vue和ElasticSearch構建實時搜索引擎

摘要：建立在之上，它是一個高性能的文本搜索引擎庫。目錄在今天的課程中，您將學習如何使用，和構建實時搜索引擎。接下來，您需要安裝實時搜索引擎所需的庫。這是的官方庫，它是實時搜索的引擎。主要的搜索查詢包含在查詢對象中。但是，可以從客戶端進行搜索。（譯者注：相關閱讀：node.js,vue.js,Elasticsearch）介紹 Elasticsearch是一個分布式的RESTful搜索和分析...

jerryloveemily 2019-08-22 17:17 評論0 收藏0
使用Node，Vue和ElasticSearch構建實時搜索引擎

摘要：建立在之上，它是一個高性能的文本搜索引擎庫。目錄在今天的課程中，您將學習如何使用，和構建實時搜索引擎。接下來，您需要安裝實時搜索引擎所需的庫。這是的官方庫，它是實時搜索的引擎。主要的搜索查詢包含在查詢對象中。但是，可以從客戶端進行搜索。（譯者注：相關閱讀：node.js,vue.js,Elasticsearch）介紹 Elasticsearch是一個分布式的RESTful搜索和分析...

JerryC 2019-08-02 10:27 評論0 收藏0
ELK 實時日志分析平臺環境搭建

摘要：簡單介紹，三者組合在一起搭建實時的日志分析平臺，目前好多公司都是這套是個開源分布式搜索引擎，它的特點有分布式，零配置，自動發現，索引自動分片，索引副本機制，風格接口，多數據源，自動搜索負載等。 showImg(https://segmentfault.com/img/remote/1460000012596092?w=1920&h=1270); 簡單介紹 ELK（ElasticSear...

geekidentity 2019-08-16 11:01 評論0 收藏0