Laravel'de gerçek zamanlı aramaya ilişkin eksiksiz kılavuz

Informatec Dijital » Ücretsiz Destekler » Laravel'de gerçek zamanlı aramaya ilişkin eksiksiz kılavuz

Laravel ile çalışmaya başladığınızda ve bir anında yanıt veren gerçek zamanlı arama motoruBinlerce olası yaklaşım arasında kaybolmak kolaydır: fetch ile AJAX, jQuery, Alpine.js, Algolia veya Meilisearch ile Scout, ön uç filtreleme, vb. İyi haber şu ki Laravel ekosistemi, denemede ölmeden sorunsuz ve hızlı bir arama kurmak için ihtiyacınız olan hemen hemen her şeyi zaten sağlıyor.

Bu makalede nasıl birleştirileceğini göreceksiniz Laravel'de farklı gerçek zamanlı arama türleriKlasik AJAX otomatik tamamlamadan Laravel Scout ve Algolia, Meilisearch, veritabanının kendisi ve hatta Elasticsearch gibi arama motorlarıyla tam metin aramalarına kadar. Ayrıca, veri hacmi küçük olduğunda verileri doğrudan tarayıcıda filtrelemek için Alpine.js ile hafif alternatifler de göreceksiniz.

Laravel'de gerçek zamanlı arama nedir ve temelleri nasıl çalışır?

Gerçek zamanlı aramanın arkasındaki fikir şudur: kullanıcı bir metin alanına yazarkenBir sorgu tetiklenir ve sonuçlar sayfanın yeniden yüklenmesine gerek kalmadan güncellenir. Teknik olarak bu, üç temel bileşeni içerir: Laravel arka ucu, tarayıcının JavaScript'i ve JSON formatında veri alışverişi.

Por un lado, Laravel sunucu katmanı olarak işlev görür İstekleri almak, arama parametrelerini (girilen metni) yorumlamak, veritabanını sorgulamak ve genellikle JSON biçiminde yapılandırılmış bir yanıt döndürmekten sorumludur. Bu yanıt, başarıyı, hatayı veya sonuç bulunamadığını gösterebilir.

Diğer ucunda, JavaScript, kullanıcı olaylarını dinlemekle sorumludur. Arama girişinde, arka uca eşzamansız istekler (AJAX) gönderin ve döndürülen verileri tarayıcının tam yenileme yapmasına gerek kalmadan sayfada görüntüleyin. Bu, yerel fetch, jQuery AJAX veya Alpine.js gibi küçük reaktif kütüphanelerle yapılabilir.

Bu temel mekanizma ile bir yapı inşa edebilirsiniz Birkaç kayıtla basit otomatik tamamlama, Laravel Scout gibi kütüphaneler ve arama için optimize edilmiş harici arama motorları tarafından desteklenen, alaka düzeyi, sayfalandırma ve filtrelere sahip gelişmiş tam metin arama motoruna kadar.

Temel bir gerçek zamanlı arama motoru için model, rotalar ve denetleyici

JavaScript'e dalmadan önce Laravel tarafının iyi organize edildiğinden emin olmanız gerekir: Arama yapmak için Eloquent bir model, net rotalar ve özel bir kontrolör Arama mantığını gerçek zamanlı olarak yönetmek için.

İlk adım, arama yapacağınız tabloyu temsil eden bir Eloquent modeline sahip olmaktır. Ülkelerden oluşan bir tablo ve şu şekilde adlandırılan bir model hayal edin: ülke Çok basit, zaman damgası olmadan ve toplu atamaya izin verilerek:

Aramalar için minimal bir Eloquent modelinin örneği:

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Pais extends Model
{
use HasFactory;
protected $guarded = [];
public $timestamps = false;
}

Burada modelin belirtildiği gibi Pais, standart Laravel ad alanında bulunurModel'den miras alır ve create() ile korunan diziyi boş bırakarak herhangi bir alanı atamanıza olanak tanır. Zaman damgalarını public $timestamps = false ile devre dışı bırakarak, tabloda created_at ve updated_at sütunları yoksa oluşabilecek sorunları önleyebilirsiniz.

Bir sonraki adım tanımlamaktır hem arama motoru görüntüsünü hem de AJAX isteklerini işleyecek rotalarÇok yaygın bir şema, görünümü görüntülemek için bir GET rotası ile gerçek zamanlı sorguları almak için tasarlanmış bir POST rotasını birleştirir:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BuscadorController;

Route::get('/', function () {
return view('welcome');
});

Route::get('buscador', [BuscadorController::class, 'index']);
Route::post('buscador', [BuscadorController::class, 'buscar']);

Kök rota bir karşılama görünümü döndürürken, URL /search arama işlevi için ayrılmıştırDenetleyicinin index() metodu form ve arama girdisini görüntülerken, search() metodu tarayıcıdan gönderilen asenkron istekleri işler.

Kontrolcüde çok pratik bir desen uygulayabilirsiniz: Hata durumunda varsayılan yanıt dizisini hazırlayın ve yalnızca geçerli bir AJAX isteği olduğunda ve sorgu sorunsuz bir şekilde yürütüldüğünde üzerine yazın.

Kontrolörün bir benzer yapı bu:

namespace App\Http\Controllers;

use App\Models\Pais;
use Illuminate\Http\Request;

class BuscadorController extends Controller
{
public function index()
{
return view('welcome');
}

public function buscar(Request $request)
{
$response = [
'success' => false,
'message' => 'Hubo un error',
];

if ($request->ajax()) {
$data = Pais::where('nombre', 'like', $request->texto.'%')
->take(10)
->get();

$response = [
'success' => true,
'message' => 'Consulta correcta',
'data' => $data,
];
}

return response()->json($response);
}
}

Bu noktada zaten sahip olduğunuz tam arka uç döngüsü: gelen AJAX isteği, AJAX olup olmadığının kontrol edilmesi, where like ile sorgulama ve sonuçların sınırlandırılması Veritabanını aşırı yüklememek için take(10) kullanılarak makul bir sayıya ulaşılır. Yanıt her zaman JSON biçiminde gönderilir, bu da ön ucun işini büyük ölçüde kolaylaştırır.

Reaktif arama için bıçak görünümü ve JavaScript getirme

Model, rotalar ve denetleyici hazır olduğunda, görünür kısmı oluşturmanın zamanı geldi: arama alanı ve sonuçları görüntülemek için bir blok içeren bir formartı arka planda isteklerde bulunmaktan sorumlu JavaScript.

Blade görünümü, aşağıdakilere dayanarak çok basit olabilir: CSRF belirteci Laravel'in POST isteklerini doğrulamak ve kullanımı kolay bir arama girdisine enjekte ettiği:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<strong><meta name="csrf-token" content="{{ csrf_token() }}"></strong>
<title>Laravel</title>
</head>
<body>

<form action="" method="post">
<input type="search" name="texto" id="buscar">
</form>

<div id="resultado"></div>

<script>
window.addEventListener('load', function () {
const buscar = document.getElementById('buscar');
const resultado = document.getElementById('resultado');

buscar.addEventListener('keyup', function () {
fetch('/buscador', {
method: 'post',
body: JSON.stringify({ texto: buscar.value }),
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-Token': document.head.querySelector('[name~="csrf-token"][content]').content,
},
})
.then(response => response.json())
.then(data => {
let html = '';
if (data.success) {
html += '<ul>';
for (let i in data.data) {
html += '<li>' + data.data[i].nombre + '</li>';
}
html += '<ul>';
} else {
html += 'No existen resultados';
}
resultado.innerHTML = html;
});
});
});
</script>

</body>
</html>

Bu örnekte komut dosyası Arama girişindeki keyup olayını dinleyinHer tuş vuruşu, /search yoluna bir getirme isteği tetikler. Alanın geçerli metni JSON biçiminde gönderilir ve AJAX olduğunu belirtmek için X-Requested-With gibi anahtar başlıkları ve Laravel'in yerel korumasını aşmak için CSRF belirteci eklenir.

Cevap geldiğinde JSON'a dönüştürülür ve dinamik olarak üretilir. sonuçların yer aldığı küçük bir HTML listesiveya sorgu hiçbir veri döndürmediğinde "Sonuç bulunamadı" gibi bir mesaj. Tüm bunlar, sayfayı yeniden yüklemeye gerek kalmadan, kullanıcı için doğal bir şekilde gerçekleşir.

Bu desen, küçük UX ayrıntılarıyla daha da geliştirilebilir, örneğin bir gecikme (geri tepme) tuş vuruşları arasında bir yükleyici görüntüleyin veya bir şey başarısız olduğunda arayüzün donmuş görünmesini önlemek için ağ hatalarını işleyin.

jQuery kullanarak Laravel ve AJAX ile canlı arama

Günümüzde getirme çok fazla yol kat etmiş olsa da, jQuery AJAX hala çok popüler Eski projelerde veya halihazırda uygulanmış ekiplerde. Fikir tamamen aynı: Kullanıcının yazdıklarını yakalamak, eşzamansız bir istekte bulunmak ve DOM'u yenilemek.

Laravel'de canlı arama için jQuery ile tipik bir iş akışı genellikle şu temel adımları içerir: belirli bir rota tanımlayın, özel bir denetleyici oluşturun, arama girişiyle Blade görünümünü oluşturun Ve son olarak, yazıldığı anda AJAX'ı tetikleyen jQuery kodunu ekleyin.

Süreç şu şekilde işliyor: Kullanıcı yazmaya başladığında, jQuery sunucuya bir sorgu gönderir Arama dizesiyle. Laravel veritabanındaki bilgileri filtreler, eşleşen sonuçları içeren bir JSON döndürür ve jQuery, sayfadaki bir HTML kapsayıcısını eşleşmeleri yansıtacak şekilde günceller; tüm bunları milisaniyeler içinde gerçekleştirir.

jQuery kullanmanın avantajı şudur: AJAX'ın sözdizimini oldukça iyi özetliyor Ve eğer projenizde zaten kütüphane varsa, okuması oldukça kolaydır. Ancak, modern JavaScript ve yerel getirme (fetch) ile çalışabiliyorsanız, gerekli olmayabilecek ek bir bağımlılık ekliyorsunuz.

Alpine.js ile ön uçta gerçek zamanlı filtreleme ve arama

Görüntülenecek veriler nispeten küçük olduğunda (örneğin, 50'den az ürün), karmaşık aramalar içeren bir arka uç kurmak her zaman işe yaramaz. Bu gibi durumlarda, çok kullanışlı bir seçenek Alpine.js ile doğrudan tarayıcıda filtrelemeKullanıcı yazarken sunucuya herhangi bir istekte bulunmadan.

Amaç, her bir öğe için (örneğin, küçük harflerle ad, açıklama ve kategori) bir arama dizesini önceden hesaplamak, bunu bir data-search-text özniteliğinde saklamak ve gerisini Alpine.js'ye bırakmaktır. yazılı metne göre öğeleri göster veya gizle Bir arama alanında.

Alpine.js bileşeni aşağıdakine benzer bir yapıya sahip olabilir: filtreÖğeleri

{
search: '',
hasResults: true,
selectedValue: '',
init() {
this.$watch('search', () => this.filterItems());
this.$nextTick(() => this.$refs.searchInput?.focus());
},
filterItems() {
const searchLower = this.search.toLowerCase().trim();
const cards = this.$el.querySelectorAll('.item-card');
let visibleCount = 0;

cards.forEach(card => {
const text = card.dataset.searchText || '';
const isVisible = searchLower === '' || text.includes(searchLower);
card.style.display = isVisible ? '' : 'none';
if (isVisible) visibleCount++;
});

this.hasResults = visibleCount > 0;
},
}

Görünümde, her kart veya veri satırı bir öznitelik taşıyacaktır veri-arama-metni zaten küçük harflerle hazırlanmış metinleBu nedenle, filtre JavaScript'te kısa listeler için çok hızlı olan bir includes() fonksiyonuna indirgenir:

<input type="search" x-model="search" x-ref="searchInput" placeholder="Buscar..." />
<div>
<div class="item-card" data-search-text="formulario contacto simple">
<h3>Formulario de contacto</h3>
<p>Formulario de contacto simple</p>
</div>
</div>

Ek olarak, yalnızca şu durumlarda boş bir durum bloğu görüntüleyebilirsiniz: Mevcut arama terimi için sonuç bulunamadı.Kullanıcıyı metni değiştirmeye veya aramayı boş bir dizeye sıfırlayan bir düğmeyle alanı temizlemeye davet eder.

Bu yaklaşımın belirgin avantajları vardır: Arama sırasında sunucuya herhangi bir çağrı yapılmadı.Etkileşim neredeyse anında gerçekleşir ve mantık son derece yerel kalır ve hata ayıklaması kolaydır. Hızlı seçiciler, öğe seçim modelleri veya Laravel sayfasına gömülü küçük kataloglar için mükemmeldir.

Laravel Scout: Özel motorlarla tam metin araması

İşler ciddileştiğinde ve ihtiyacınız olduğunda hızlı, alakalı ve ölçeklenebilir tam metin aramalarıLaravel'deki doğal yol Laravel Scout'tur. Scout, Eloquent modellerinizi Algolia, Meilisearch gibi arama motorlarına, kendi veritabanınıza, bellek içi koleksiyonlara veya harici denetleyiciler aracılığıyla Elasticsearch'e kolayca bağlamanızı sağlayan bir entegrasyon katmanıdır.

Scout'a başlamak için olağan şey şudur: yeni bir Laravel projesi oluşturun veya mevcut bir projeyi yeniden kullanınBaşlatmak için Docker'ı (örneğin Laravel Sail ile) kullanın ve ardından Composer ile kütüphaneyi yükleyin. İşlem tamamlandıktan sonra, scout.php yapılandırma dosyasını yayınlayın ve ortam değişkenlerini kullanmak istediğiniz sürücüye göre ayarlayın.

Tipik bir iş akışı, Scout'u Composer ile kurmak, yapılandırmasını yayınlamak ve SCOUT_QUEUE=true ile dizinleme kuyruğunu etkinleştirin .env dosyasında, kaynak yoğun işlemlerin arka planda işlendiğinden emin olun; bu, uygulama yanıt sürelerini iyileştirir. Ayrıca, DB_HOST'un kullandığınız veritabanına işaret ettiğinden emin olmalısınız; bu, özellikle Docker kapsayıcıları kullanıyorsanız önemlidir.

Bir modelin İzci aramalarına katılabilmesi için; Aranabilir özelliğini ekleyerek açıkça aranabilir olarak işaretlemek içinÖrneğin, başlık alanına sahip bir tren tablosunu temsil eden bir Tren modeliniz varsa, bunu şu şekilde tanımlayabilirsiniz:

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Laravel\Scout\Searchable;

class Train extends Model
{
use Searchable;

protected $fillable = ['title'];

public function searchableAs()
{
return 'trains_index';
}
}

SearchableAs yöntemi şunu sağlar: arama motorunda dizin adını özelleştirModelden türetilen varsayılan adı kullanmak yerine, Scout devreye girer. Scout, seçilen sürücüye bağlı olarak oluşturma, güncelleme ve silme işlemlerini uzak veya yerel dizinle senkronize eder.

Algolia ile Laravel Scout: Yıldırım hızında SaaS Arama

Algolia, şu konulara odaklanan bir SaaS hizmetidir: büyük veri hacimleri arasında çok hızlı ve alakalı aramalar sunmakİndeksleri, alaka kurallarını, eş anlamlıları vb. yönetmek için bir web paneline sahiptir ve Scout ve resmi PHP istemcisi aracılığıyla Laravel ile çok iyi entegre olur.

Algolia'yı Scout ile kullanmak için, Composer ile PHP istemcisini yüklemeniz, kimlik bilgilerinizi .env dosyasına (Uygulama Kimliği ve Yönetici API Anahtarı) kaydetmeniz ve SCOUT_DRIVER=algolia'yı ayarla Scout'a bu motoru kullanmasını söylemek için. Algolia panelinden hem uygulama kimliğini hem de yönetim anahtarını alabilirsiniz.

Ortam yapılandırıldıktan sonra, şu gibi yöntemleri kullanabilirsiniz: Tren::ara('metin')->sayfalandır(6) Dizinli alanlarda arama yapmak için doğrudan denetleyicilerinize gönderin ve Blade görünümüne aktarılmaya hazır sayfalandırılmış Eloquent biçiminde sonuçlar alın.

ÖrneğinBir kontrol cihazına sahip olabilirsin indeks tüm trenleri listeleyen veya bir titlesearch parametresi alındığında arama gerçekleştiren ve dizine yeni trenler eklemek için bir oluşturma yöntemi:

public function index(Request $request)
{
if ($request->has('titlesearch')) {
$trains = Train::search($request->titlesearch)->paginate(6);
} else {
$trains = Train::paginate(6);
}

return view('Train-search', compact('trains'));
}

public function create(Request $request)
{
$this->validate($request, ['title' => 'required']);
Train::create($request->all());
return back();
}

İlgili görünümde birleştirebilirsiniz yeni trenleri kaydettirmek için bir form ve gönderim anında aramayı tetikleyen bir başlık arama alanına sahip başka bir GET formu. Ardından, Laravel tarafından oluşturulan sayfalama bağlantılarından yararlanarak, tren koleksiyonunda yineleme yapmanız ve alanlarını bir tabloda görüntülemeniz yeterli.

Meilisearch, veritabanı ve koleksiyonlarla keşif yapın

Eğer harici hizmetlerden kaçınmayı tercih ediyorsanız, Meilisearch açık kaynaklı bir arama motorudur Yerel olarak veya altyapınızda dağıtabileceğiniz Scout, Algolia'ya çok benzer bir şekilde Meilisearch ile entegre olur; bunun için sürücüyü değiştirmeniz ve .env dosyasına MEILISEARCH_HOST ve MEILISEARCH_KEY değişkenlerini eklemeniz yeterlidir.

Kullanmak için Meilisearch PHP istemcisini kurun, ayarlayın SCOUT_DRIVER=meilisearch ve MEILISEARCH_HOST'u örnek URL'sine yönlendirin (örneğin, http://127.0.0.1:7700). Daha önce kayıtlarınız varsa, php artisan scout:import "App\Models\Train" komutuyla bunları indeksleyebilirsiniz, böylece motor bunları kullanabilir.

Daha küçük veya orta ölçekli uygulamalarda, ayrıca şunları da seçebilirsiniz: İzci sürücüsü veritabanıBu, MySQL veya PostgreSQL veritabanınızdaki tam metin dizinlerini ve LIKE komutlarını kullanır. Bu durumda harici bir servise ihtiyacınız yoktur; Scout'un arama motoru olarak veritabanını kullanması için SCOUT_DRIVER=database değerini ayarlamanız yeterlidir.

Bir başka ilginç seçenek de bellekteki Eloquent koleksiyonları üzerinde çalışan sürücü koleksiyonuBu motor, sonuçları WHERE ifadeleri ve koleksiyon filtrelemesi kullanarak filtreler ve Laravel tarafından desteklenen tüm veritabanlarıyla uyumludur. `SCOUT_DRIVER=collection` ile etkinleştirebilir veya daha spesifik ayarlar için Scout yapılandırma dosyasını düzenleyebilirsiniz.

Explorer kullanılarak Elasticsearch ile entegrasyon

Eğer arama ihtiyaçlarınız şunları içeriyorsa büyük miktarda veri ve gerçek zamanlı analizle çalışmakElasticsearch klasik bir araçtır. Laravel ekosisteminde, onu Scout ile entegre etmenin modern bir yolu, modelleriniz ile Elasticsearch kümesi arasında köprü görevi gören Explorer denetleyicisini kullanmaktır.

Bunu yapmak için, genellikle Laravel, MySQL, Redis, Meilisearch, vb. gibi tipik servislere ek olarak zengin bir docker-compose dosyasıyla birlikte Docker kullanılır. Elasticsearch ve Kibana kapsayıcılarıDaha sonra Composer aracılığıyla jeroen-g/explorer paketini kurun ve hangi modellerin indeksleneceğini belirtmek için yapılandırma dosyasını yayınlayın.

config/explorer.php dosyasında, örneğin indexes anahtarı altında modellerinizi kaydedebilirsiniz. Uygulama\Modeller\Tren::sınıfAyrıca, .env dosyasında SCOUT_DRIVER=elastic ile Scout sürücüsünü elastic olarak değiştirirsiniz, böylece her şey Elasticsearch'e işaret eder.

Train modeli içerisinde Explored arayüzü uygulanmalı ve metot geçersiz kılınmalıdır. haritalanabilirAsDizine gönderilecek alanların haritasını tanımlayan bir örnek:

use JeroenG\Explorer\Application\Explored;
use Laravel\Scout\Searchable;

class Train extends Model implements Explored
{
use Searchable;

protected $fillable = ['title'];

public function mappableAs(): array
{
return [
'id' => $this->id,
'title' => $this->title,
];
}
}

Şu andan itibaren, Aynı Scout arayüzünü kullanarak Elasticsearch'te arama başlatabilirsiniz., bu motorun çok düşük yanıt sürelerinden ve tam sorgu gücünden yararlanırken, Laravel ekosisteminden ayrılmadan.

Tüm bu yaklaşımlarla—fetch veya jQuery ile temel otomatik tamamlamadan, Alpine.js ile ön uç filtrelemeye, Laravel Scout ve çeşitli sürücülerle tam metin aramalarına kadar— Laravel, gerçek zamanlı aramaları uygulamak için size çok çeşitli seçenekler sunar projenizin büyüklüğüne, ihtiyaç duyduğunuz performansa ve sürdürmeye istekli olduğunuz altyapıya göre uyarlanmıştır.