Javascript 使用socket.io进行实时搜索
如何使用socket.io创建实时搜索 我使用RejectDB+Node+Express+Socket.io+Redux+React,我正在监听事件(它是使用RejectDB创建的changefeed),它会在客户端向我发送10个项目,并使用React显示它们 现在我想创建live search,它将查询发送到服务器,在DB中搜索结果,返回前10个结果,并使用socket.io将它们发送到客户端Javascript 使用socket.io进行实时搜索,javascript,node.js,socket.io,rethinkdb,Javascript,Node.js,Socket.io,Rethinkdb,如何使用socket.io创建实时搜索 我使用RejectDB+Node+Express+Socket.io+Redux+React,我正在监听事件(它是使用RejectDB创建的changefeed),它会在客户端向我发送10个项目,并使用React显示它们 现在我想创建live search,它将查询发送到服务器,在DB中搜索结果,返回前10个结果,并使用socket.io将它们发送到客户端 // emit events for changes r.table('stackoverflow
// emit events for changes
r.table('stackoverflow_questions')
.changes({ includeInitial: true, squash: true })
.limit(10)
.run(connection)
.then(changefeedSocketEvents(socket, 'topic'))
-
我不知道如何使用socket.io实现这一点,是否必须为每个自定义查询动态创建自定义套接字事件侦听器?(我觉得这听起来很可笑,应该有一个简单的方法)我找到了一个解决方案,下面是一个简单的例子:
// 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)
-
使用web套接字似乎有点过分了。它最适合从服务器接收未经请求的消息。获取搜索结果不是主动的,而且可能更简单地通过AJAX实现。。。我想,有比AJAX更快的请求,我想实时更新数据。也许我可以创建rest api,只向客户端发送信息,新数据是可用的,所以浏览器会发送http请求来更新它,但这似乎是一个性能较差的解决方案。此外,我在meteor.js中创建了live search,它使用DDP协议在WebSocket上工作,工作得非常好,所以我认为,它应该是可行的和性能。
// 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)
<!- 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>
// 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)