2017-06-05 19 views
0

私はユーザーがユーザー名に基づいて他のユーザーを検索できるライブ検索機能を作成しようとしており、関連する結果がWebページに表示されます。これまでのところ、私はPHPとMySQLのためにこれを行う方法を示すリソースだけに出会いました。 Node.jsとMongoDBではどうすれば実現できますか?私は私のプロジェクトでsocket.ioを使用していますが、これはまったく使用できますか?Live Search with Node.jsとMongoDB

ご協力ありがとうございました。私のコードが必要な場合は、お知らせください。

答えて

1

基本的には、ユーザーが(keyupイベントを使用して)ユーザー名入力フィールドに書き込みを行い、サーバーのsocket.ioを使用して入力フィールドの値をサーバーに送信します。あなたはその値でデータベース(model.findOne in mongoose)のクエリを実行し、存在する場合にはユーザを返します。 ここで重要なのは、ユーザー名フィールドをmongooseで一意にするか、新しいインデックスを手動で作成することにより、高速検索のためにデータベースにユーザー名のインデックスを作成することです。

例:jQueryを使って

フロントエンド:マングースと

$(document).ready(function() { 
    var username = $('#username'); 
    username.keyup(function() { 
     var value = username.val(); 
     socket.emit('find_user', value); 
    }); 
}); 

socket.on('find_user_result', function(user) { 
    // treat result here 
}); 

バックエンド:あなたの条件に

socket.on('find_user', function(value) { 
    User.findOne({username: value}, function(err, user) { 
     if (err) throw err; 
     if (!user) socket.emit('find_user_result', {}); 
     else socket.emit('find_user_result', user); 
    }); 
}) 
+0

私はこのコードを実装しており、約束のライブラリが廃止されたという警告を受けています。私はブルーバード(別の約束のライブラリ)をインストールしましたが、これがあなたが提供したコードをどのように変更するのかはわかりません。何か案は? – jblew

+0

ブルーバードを使用している場合は、mongooseを使ってブルーバードの約束をhttp://mongoosejs.com/docs/promises.htmlにしてください。コードに影響するとは思わない –

+0

約束を使用するには、 findOneをthen関数に変更する –

3

、それがどのバックエンドにあまり依存しませんつかいます。

バックエンドでは、検索リクエストを処理するための残りのAPIを作成するだけです(NodeJSを使用する場合は、https://scotch.io/tutorials/build-a-restful-api-using-node-and-express-4を参照してください)。

フロントエンドでは、XHRリクエストを使用してライブ検索を行うことができ、必要なソケットは不要です。入力時にユーザーが入力するたびに、入力変更イベントを検出し、バックエンドAPIに検索要求を送信します(純粋なjavascript XHR要求で行うことも、JQueryでajaxモジュールを使用することもできます)。応答から結果を取得します、画面に印刷します。 これを実現できたら、リクエストを時間制限することでフロントエンドの検索パフォーマンスを向上させることができます(キーを押すたびにリクエストを送信しませんが、200msごとにこのメソッドは "debounce ")。

+0

XHRリクエストに関する経験はありません。このシナリオではどのように見えるでしょうか? – jblew

+0

私が前に述べたXHRはソケットとの比較のためのものです。あなたの場合、Ajaxを使用してデータを送信および取得する必要があります。 Ajaxは、JavaScriptを使用してXHRリクエストを非同期で送信するのに役立つプログラミング手法です。 XHR [here](https://www.w3schools.com/xml/xml_http.asp)とajax [here](https://www.w3schools.com/xml/ajax_intro.asp)について詳しく知ることができます。 Ajaxに関するチュートリアルについては、googleを参照してください。 –