socket.ioを使用したライブ検索

socket.ioを使用してライブ検索を作成するにはどうすればよいですか？socket.ioを使用したライブ検索

私はRethinkDB + Node + Express + Socket.io + Redux + Reactを使用しています。イベントを聞いています（rethinkdbを使って変更フィードを作成しています）。

// Socket.io events for changefeed 

module.exports = function (socket, entityName) { 
    return function (rows) { 
    rows.each(function (err, row) { 
     if (err) { return console.log(err) } else if (row.new_val && !row.old_val) { 
     socket.emit(entityName + ':insert', row.new_val) 
     } else if (row.new_val && row.old_val) { 
     socket.emit(entityName + ':update', row.new_val) 
     } else if (row.old_val && !row.new_val) { 
     socket.emit(entityName + ':delete', { id: row.old_val.id }) 
     } 
    }) 
    } 
}

は、今私は、サーバーにクエリを送信DBに結果を検索し、最初の10件の結果を返し、socket.io

// emit events for changes 

r.table('stackoverflow_questions') 
.changes({ includeInitial: true, squash: true }) 
.limit(10) 
.run(connection) 
.then(changefeedSocketEvents(socket, 'topic'))

でクライアントに送信し、ライブ検索を作成したいです

私はあなたがsocket.ioを使用してそれを達成する方法を考えていません。カスタムクエリごとにカスタムソケットイベントリスナーをオンザフライで作成する必要がありますか？私は解決策を見つけた

出典

2017-03-05 stpoa

ウェブソケットを使用することは少し残忍に思えます。これは、サーバーからの迷惑なメッセージの受信に最適です。検索結果を得ることは迷惑ではなく、おそらくAJAXでより簡単に達成されます。 –

私はいずれかの方法でWebソケットを使用します...私は、AJAX要求よりも速いと思って、私はリアルタイムでデータを更新したいと思います。たぶん、私は残りのAPIを作成し、クライアントに情報のみを送り、新しいデータが利用できるので、ブラウザはHTTPリクエストを送信して更新することができますが、それはパフォーマンスの低いソリューションのようです。 – stpoa

また、meteor.jsでライブ検索を作成しました。これはDDPプロトコルを使用したWebソケット上で動作していました。とてもうまく機能していたので、実行可能でパフォーマンスが高いはずです。 – stpoa

（それは簡単な方法が存在すべきであることを、私が思うに、私にはばかげて聞こえる）、ここでは最低限の例である： -

<!- index.html -> 

<!DOCTYPE html> 
<html> 
<head> 
    <script src="/socket.io/socket.io.js"></script> 
    <script src="./client.js"></script> 
    <title>socket-io-live-search</title> 
</head> 
<body> 
    <div id='search'> 
    <input type ='text' /> 
    </div> 
</body> 
</html>

// server.js 

const express = require('express') 
const app = express() 
const http = require('http') 
const server = http.Server(app) 
const io = require('socket.io')(server) 

app.use(express.static('client')) 

io.on('connection', function(client){ 
    setInterval(() => io.emit('found', 'dfasdfadsfasdfasdf'), 5000) 
    console.log('connected with socket: ' + client.id) 
client.on('search', function (text) { 
    const data = Math.random() 
    io.emit('found', data + text) 
}) 
client.on('disconnect', function(){}) 
}) 

app.get('/') 

server.listen(3000)

// client.js 

var socket = io() 

const loaded =() => { 
    const inputEl = document.querySelector('#search input') 
    inputEl.oninput = (e) => socket.emit('search', e.target.value) 
} 

socket.on('found', (data) => console.log('found: ' + data)) 

document.addEventListener('DOMContentLoaded', loaded, false)

出典

2017-03-18 14:56:43 stpoa

socket.ioを使用したライブ検索

答えて

関連する問題