Algolia Search
来源:互联网 发布:windows bat 输入密码 编辑:程序博客网 时间:2024/06/06 00:10
在网站开发中,很重要的一个功能那就是搜索了。对于一个访问量很大的网站来说,对于所有的搜索请求直接读取数据库来完成将会造成非常大的负荷。两种办法可以有效地解决以上问题,第一种就是缓存,memcached
,redis
等都很有名气,在这里就不予赘述了。
那么第二种就是使用云搜索。什么是云搜索?类似于CDN
,我们把数据库内可以用于被搜索的信息推送至云端,然后用户在我们的网站进行搜索时,实际上搜索请求并没有发送给我们的服务器,而是被传递到云服务器进行搜索,并返回相应的结果。这样的解决方案可以大大降低网站的延迟,并提高应用的性能。现在比较有名的Algolia
就提供了云搜索的服务。
具体办法是我们将数据库的信息以JSON
的格式上传到Algolia
服务器,然后通过相应的API进行搜索。搜索既可以是实时的(采用Javascript
调用Algolia API
),也可以是后端的(使用PHP
调用Algolia API
)。
图片中可以看到,我使用了javascript
实现了前端实时搜索,这样不仅高效,而且对用户友好。Algolia
的免费许可允许上传10,000
条JSON
数据,每月允许100,000
次操作(包括上传和搜索),还是相当不错的。今天我们将要使用Javascript来实现Algolia
的实时搜索功能,框架我选用的是最新的jQuery
。好了,那我们这就开始。首先前往Algolia
官网:>http://www.algolia.com注册好之后,我们就可以登录dashboard
控制和管理我们的数据了。
注意,我们在上图中左边第三个钥匙按钮中,可以找到我们需要的API Keys
:
我们需要的是Application ID
,Search-Only API Key
和Admin API Key
。注意:Admin API KEY
一定不要放在js
里,因为这个key
是用来上传,删除和操作我们的云端数据的,所以一定要保管好。
有了key之后,当然就要着手开始上传我们的数据了。一个很简单的方法就是先把我们数据库数据导出成JSON
文件后,使用algolia API
的上传功能,直接上传至服务器。不过如果数据进行了更新,并不能实时反应在搜索中。我将会在另一篇文章中介绍如何使用Laravel Scout
来进行数据的实时上传与更新。
首先我们需要把数据库的数据push
到云端服务器。假设我们的数据库里有一个叫contacts
的table
,包含了客户联系人的数据,我们已经将这个table
导出成JSON
形式的文件:contacts.json
。有了这个JSON
文件后,我们就可以着手开始push
数据到云端了。现在我们新建一个js
文件,并填入以下代码:
var index = client.initIndex('contacts');var contactsJSON = require('./contacts.json');index.addObjects(contactsJSON, function(err, content) { if (err) { console.error(err); }});
可以看到,以上的代码中,我们要建立一个叫contacts
的索引,这个索引名称将在以后的搜索中使用到,每次搜索contacts table
中的数据时,我们都需要先call
一次client.initIndex('contacts')
。
剩余的代码就是将我们的JSON
文件上传到algolia
服务器。
好了,数据库的数据我们已经上传到服务器端了,现在我们就可以开始搜索了!首先我们需要引入algolia
的js
库:
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
接着我们新建一个叫instant-search
的js
文件,然后添加以下代码:
var client = algoliasearch("Application ID", 'Search-Only API Key'); var contact_index = client.initIndex('contacts'); var search_input_string = 'some-contacts-to-search'; contact_index.search(search_input_string, function (err, contacts) { for (var i = 0; i < contacts.hits.length; i++) { // Code to deal with each contact } });
我们可以看到,首先我们需要我们的Application ID
及Search-Only API Key
来初始化,接着我们使用contacts
这个索引来搜索。search_input_string
在这里为了方便说明我用的是固定的字符串,而实际上我们应该动态获取搜索框中的字符串来进行实时搜索。contact_index.search
这个函数会将搜索到的结果放在contacts.hits
中,所以我们可以使用一个loop来处理每一个返回的结果,比如把每一个结果添加上相应的<a></a>
并加入到搜索结果的list
中。
我在CodePen
上做好了一个instant-search
的template
:
https://codepen.io/lgyaxx/project/full/XmYyBX/
方便大家观看效果。另外我把代码上传到github
了,包括了instant-search
的逻辑。大致的概念就是每当搜索框有新的input
,那么记录下这个input
,等待一定的时间(例如1s或者2s),再次获取input
,看跟之前的搜索串是否有不同,如果有不同,那么就搜索新的字符串,如果没有不同,那么就搜索旧的字符串。这样的延时机制可以有效地避免用户在搜索字符串还没打完的时候就进行多次搜索了。
https://github.com/lgyaxx/eagolia-search
当然,我使用了jQuery
框架并且结合了Bootstrap 4
,大家可以自己发挥来实现所需的UI。还有需要注意的是,Algolia
免费版需要把logo
放在搜索结果旁边,这是官方要求,切记。
- Algolia Search
- Gitbook algolia
- Algolia的分布式搜索网络架构
- Algolia的分布式搜索网络架构
- NexT主题集成Algolia搜索插件
- Laravel 全文检索 Scout集成Algolia
- Search
- search
- search
- search
- search
- Search
- search
- Search
- Search
- search
- search
- Search
- 软件磁盘阵列RAID的设置
- TPshop商城怎么样添加插件
- hadoop-2.7+hive-2.1.1+mysql 集群配置
- 【NumPy基础】100道numpy练习——初学与入门篇
- JS-箭头函数中的this的指向
- Algolia Search
- fflush()
- 【精华分享】【Unity&独立游戏】有启发的游戏制作视频系列集合
- 软件功能测试
- 【android】searchView注意点
- DoubleAgent: Zero-Day Code Injection and Persistence Technique
- 酷酷的单词
- spring8
- 【NumPy基础】100道numpy练习——进阶篇