Pilnīgs ceļvedis reāllaika meklēšanai Laravel vidē

Informatec Digital » Resursi » Pilnīgs ceļvedis reāllaika meklēšanai Laravel vidē

Kad sākat strādāt ar Laravel un jums ir nepieciešama reāllaika meklētājprogramma, kas reaģē uzreiz , ir viegli apmaldīties starp tūkstoš iespējamām pieejām: AJAX ar fetch, jQuery, Alpine.js, Scout ar Algolia vai Meilisearch, front-end filtrēšana utt. Labā ziņa ir tā, ka Laravel ekosistēma jau nodrošina praktiski visu nepieciešamo, lai izveidotu vienmērīgu un ātru meklētājprogrammu, nepārslogojot sevi.

Šajā rakstā jūs uzzināsiet, kā ieviest dažādus reāllaika meklēšanas veidus Laravel vidē , sākot no klasiskās AJAX automātiskās pabeigšanas līdz pilna teksta meklēšanai, izmantojot Laravel Scout un tādas meklētājprogrammas kā Algolia, Meilisearch, pašu datubāzi vai pat Elasticsearch. Jūs arī izpētīsiet vieglas alternatīvas ar Alpine.js datu filtrēšanai tieši pārlūkprogrammā, strādājot ar nelielām datu kopām.

Kas ir reāllaika meklēšana Laravel valodā un kā darbojas tās pamati?

Reāllaika meklēšanas ideja ir tāda, ka, lietotājam ierakstot tekstu teksta laukā , tiek aktivizēts vaicājums un rezultāti tiek atjaunināti, neielādējot lapu atkārtoti. Tehniski tas ietver trīs galvenos komponentus: Laravel aizmugursistēmu, pārlūkprogrammas JavaScript un datu apmaiņu JSON formātā.

No vienas puses, Laravel darbojas kā servera slānis, kas atbild par pieprasījumu saņemšanu, meklēšanas parametru (ievadītā teksta) interpretāciju, vaicājumu veikšanu datubāzē un strukturētas atbildes atgriešanu, parasti JSON formātā. Šī atbilde var norādīt uz panākumiem, kļūdu vai to, ka rezultāti netika atrasti.

No otras puses, JavaScript apstrādā lietotāja notikumu uzklausīšanu meklēšanas ievades rezultātos, asinhronu pieprasījumu (AJAX) nosūtīšanu uz servera serveri un atgriezto datu renderēšanu lapā, nepieprasot pilnīgu pārlūkprogrammas atsvaidzināšanu. To var izdarīt, izmantojot vietējo ielādētāju, jQuery AJAX vai mazas reaģējošas bibliotēkas, piemēram, Alpine.js.

Ar šo pamata mehānismu var izveidot jebko, sākot ar vienkāršu automātisko pabeigšanu ar dažiem ierakstiem un beidzot ar uzlabotu pilna teksta meklētājprogrammu ar atbilstību, lappušu numerāciju un filtriem, paļaujoties uz tādām bibliotēkām kā Laravel Scout un ārējām meklētājprogrammām, kas ir optimizētas meklēšanai.

Modelis, maršruti un kontrolieris pamata reāllaika meklētājprogrammai

Pirms iedziļināties JavaScript, ir nepieciešama labi organizēta Laravel puse: Eloquent modelis meklēšanai, skaidri maršruti un kontrolieris, kas paredzēts meklēšanas loģikas apstrādei reāllaikā.

Pirmais solis ir izveidot Eloquent modeli, kas attēlo tabulu, kurā veiksiet meklēšanu. Iedomājieties valstu tabulu un ļoti vienkāršu modeli ar nosaukumu Country (Valsts) bez laika zīmogiem un ar atļautu masveida piešķiršanu:

Minimāla Eloquent modeļa piemērs meklēšanai :

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;
}

Tas norāda, ka Pais modelis atrodas standarta Laravel vārdtelpā , manto no Model un ļauj piešķirt jebkuru lauku ar create() funkciju, atstājot aizsargāto masīvu tukšu. Atspējojot laika zīmogus ar public $timestamps = false, jūs izvairīsieties no problēmām, ja tabulā nav created_at un updated_at kolonnu.

Nākamais solis ir definēt maršrutus, kas apstrādās gan meklētājprogrammas attēlošanu, gan AJAX pieprasījumus . Ļoti izplatīta shēma apvieno GET maršrutu skata attēlošanai un POST maršrutu, kas paredzēts vaicājumu saņemšanai reāllaikā:

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']);

Saknes maršruts atgriež apsveikuma skatu, savukārt /search URL ir rezervēts meklēšanas funkcionalitātei . Kontroliera index() metode parāda formu un meklēšanas ievadi, savukārt search() metode apstrādā no pārlūkprogrammas nosūtītos asinhronos pieprasījumus.

Kontrolierī var ieviest ļoti praktisku modeli: sagatavot noklusējuma atbildes masīvu kļūdas gadījumā un pārrakstīt to tikai tad, ja tas faktiski ir derīgs AJAX pieprasījums un vaicājums tiek izpildīts bez problēmām.

Kontrolierim varētu būt līdzīga struktūra :

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);
}
}

Šajā brīdī ir pilns servera cikls: ienākošais AJAX pieprasījums, pārbaude, vai tas patiešām ir AJAX, vaicājums, izmantojot `where like`, un rezultātu skaita ierobežošana līdz saprātīgam daudzumam, izmantojot `take(10)`, lai izvairītos no datubāzes pārslodzes. Atbilde vienmēr tiek nosūtīta JSON formātā, kas ievērojami vienkāršo servera darbu.

Blade skats un JavaScript ielāde reaktīvai meklēšanai

Kad modelis, maršruti un kontrolieris ir gatavi, ir pienācis laiks izveidot redzamo daļu: veidlapu ar meklēšanas lauku un bloku rezultātu attēlošanai , kā arī JavaScript, kas atbild par pieprasījumu veikšanu fonā.

Blade skats var būt ļoti vienkāršs, balstoties uz CSRF marķieri , ko Laravel ievada POST pieprasījumu validēšanai, un uz ērti lietojamu meklēšanas ievadi:

<!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>

Šajā piemērā skripts meklē ievades laukā notikumu keyup , tāpēc katrs taustiņsitiens aktivizē datu iegūšanas pieprasījumu uz /search ceļu. Pašreizējais lauka teksts tiek nosūtīts JSON formātā, un ir iekļautas atslēgas galvenes, piemēram, X-Requested-With, lai norādītu, ka tas ir AJAX, kā arī CSRF marķieris, lai apietu Laravel iebūvēto aizsardzību.

Kad atbilde tiek saņemta, tā tiek pārveidota JSON formātā un tiek dinamiski ģenerēts neliels HTML saraksts ar rezultātiem vai arī, ja vaicājums neatgriež datus, tiek parādīts ziņojums, piemēram, "Rezultāti nav atrasti". Tas viss notiek bez lapas atkārtotas ielādes, lietotājam dabiskā veidā.

Šo modeli var vēl vairāk uzlabot ar nelielām lietotāja pieredzes detaļām, piemēram, pievienojot atsitienu starp taustiņsitieniem, parādot ielādētāju vai apstrādājot tīkla kļūdas, lai novērstu saskarnes sasalšanu kļūmes gadījumā.

Tiešraides meklēšana ar Laravel un AJAX, izmantojot jQuery

Lai gan fetch ir ieguvis ievērojamu popularitāti, jQuery AJAX joprojām ir ļoti populārs mantotos projektos vai komandās, kurās tas jau ir integrēts. Ideja ir tieši tāda pati: uztvert lietotāja rakstīto, veikt asinhronu pieprasījumu un atsvaidzināt DOM.

Tipiska darbplūsma ar jQuery Laravel vidē tiešsaistes meklēšanai parasti ietver šīs pamata darbības: konkrēta maršruta definēšana, īpaša kontrollera izveide, Blade skata izveide ar meklēšanas ievadi un visbeidzot jQuery koda pievienošana, kas aktivizē AJAX, kad tas tiek rakstīts.

Process darbojas šādi: kad lietotājs sāk rakstīt, jQuery nosūta serverim vaicājumu ar meklēšanas virkni. Laravel filtrē informāciju datubāzē, atgriež JSON objektu ar atbilstošajiem rezultātiem, un jQuery atjaunina HTML konteineru lapā, lai atspoguļotu atbilstības, un tas viss milisekundēs.

jQuery izmantošanas priekšrocība ir tā, ka tā ievērojami vienkāršo AJAX sintaksi un ir ļoti viegli lasāma, ja jūsu projektā jau ir bibliotēka. Tomēr tā ievieš papildu atkarību, kas var nebūt nepieciešama, ja varat strādāt ar modernu JavaScript un vietējo ieneses funkcionalitāti.

Reāllaika filtrēšana un meklēšana priekšpusē, izmantojot Alpine.js

Ja attēlojamo datu apjoms ir relatīvi mazs (piemēram, mazāk nekā 50 vienības ), ne vienmēr ir vērts iestatīt servera aizmugursistēmu ar sarežģītām meklēšanām. Šādos gadījumos ļoti ērta iespēja ir filtrēt tieši pārlūkprogrammā, izmantojot Alpine.js , neveicot pieprasījumus serverim, kamēr lietotājs raksta.

Ideja ir iepriekš aprēķināt katra elementa meklēšanas virkni (piemēram, nosaukumu, aprakstu un kategoriju ar mazajiem burtiem), saglabāt to atribūtā data-search-text un ļaut Alpine.js apstrādāt elementu rādīšanu vai slēpšanu, pamatojoties uz meklēšanas laukā ievadīto tekstu .

Alpine.js komponentam var būt līdzīga struktūra: filterItems

{
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;
},
}

Skatā katrai kartītei vai datu rindai būtu atribūts data-search-text ar jau sagatavotu tekstu mazajiem burtiem , tāpēc filtrs tiek reducēts līdz includes() JavaScript valodā, kas ir ļoti ātri īsiem sarakstiem:

<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>

Turklāt tukšu statusa bloku var parādīt tikai tad, ja pašreizējam meklēšanas terminam nav rezultātu , aicinot lietotāju modificēt tekstu vai notīrīt lauku ar pogu, kas vienkārši atiestata meklēšanu uz tukšu virkni.

Šai pieejai ir acīmredzamas priekšrocības: meklēšanas laikā nav servera izsaukumu , mijiedarbība ir praktiski momentāna, un loģika joprojām ir ļoti lokāla un viegli atkļūdojama. Tā ir ideāli piemērota ātriem selektoriem, elementu atlases modālajiem logiem vai nelieliem katalogiem, kas iegulti Laravel lapā.

Laravel Scout: pilna teksta meklēšana ar specializētām dzinējiem

Kad situācija kļūst nopietna un nepieciešama ātra, atbilstoša un mērogojama pilna teksta meklēšana , dabiskais risinājums Laravel vidē ir Laravel Scout. Scout ir integrācijas slānis, kas ļauj viegli savienot Eloquent modeļus ar tādām meklētājprogrammām kā Algolia, Meilisearch, jūsu datubāzi, atmiņā esošajām kolekcijām vai pat Elasticsearch, izmantojot ārējos kontrollerus.

Lai sāktu darbu ar Scout, parasti tiek izveidots jauns Laravel projekts vai atkārtoti izmantota esoša programma , palaists to, izmantojot Docker (piemēram, izmantojot Laravel Sail), un pēc tam instalēta bibliotēka, izmantojot Composer. Kad tas ir izdarīts, publicējiet konfigurācijas failu scout.php un pielāgojiet vides mainīgos atbilstoši draiverim, kuru vēlaties izmantot.

Tipiska darbplūsma būtu instalēt Scout ar Composer, publicēt tā konfigurāciju un iespējot indeksēšanas rindu ar `SCOUT_QUEUE=true` `.env` failā, lai resursietilpīgas darbības tiktu apstrādātas fonā, uzlabojot lietojumprogrammu atbildes laikus. Turklāt jums jāpārliecinās, ka `DB_HOST` norāda uz izmantoto datubāzi, kas ir īpaši svarīgi, ja izmantojat Docker konteinerus.

Lai modelis piedalītos Scout meklēšanā, tam jābūt skaidri atzīmētam kā meklējamam, pievienojot pazīmi “Meklējams” . Piemēram, ja jums ir “Vilciena” modelis, kas attēlo vilcienu tabulu ar lauku “Nosaukums”, varat to definēt šādi:

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';
}
}

Metode `searchableAs` ļauj pielāgot indeksa nosaukumu meklētājprogrammā , nevis izmantot no modeļa atvasināto noklusējuma nosaukumu. Pēc tam Scout sinhronizē izveides, atjaunināšanas un dzēšanas darbības ar attālo vai lokālo indeksu atkarībā no izvēlētā draivera.

Laravel Scout ar Algolia: zibensātra SaaS meklēšana

Algolia ir SaaS pakalpojums, kas koncentrējas uz ļoti ātru un atbilstošu meklēšanu lielos datu apjomos . Tam ir tīmekļa panelis indeksu, atbilstības noteikumu, sinonīmu un citu elementu pārvaldībai, un tas nemanāmi integrējas ar Laravel, izmantojot Scout un oficiālo PHP klientu.

Lai izmantotu Algolia kopā ar Scout, jums būs jāinstalē tā PHP klients, izmantojot Composer, jāreģistrē savi akreditācijas dati .env failā (lietojumprogrammas ID un administratora API atslēga) un jākonfigurē SCOUT_DRIVER=algolia, lai norādītu Scout izmantot šo dzinēju. Gan lietojumprogrammas ID, gan administratora atslēgu varat iegūt Algolia informācijas panelī.

Kad vide ir iestatīta, varat izmantot tādas metodes kā Train::search('text')->paginate(6) tieši kontrolleros, lai veiktu meklēšanu indeksētajos laukos, saņemot rezultātus lappušu Eloquent formātā, kas ir gatavs nosūtīšanai uz Blade skatu.

Piemēram , jums varētu būt indeksa kontrolieris , kas uzskaita visus vilcienus vai veic meklēšanu, ja tiek nodots parametrs titlesearch, un metode create, lai indeksā ievietotu jaunus vilcienus:

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();
}

Atbilstošajā skatā varat apvienot jaunu vilcienu pievienošanas veidlapu un citu GET veidlapu ar nosaukuma meklēšanas lauku, kas aktivizē meklēšanu pēc iesniegšanas. Pēc tam vienkārši atkārtojiet vilcienu kolekciju un parādiet to laukus tabulā, izmantojot Laravel ģenerētās lappušu saites.

Izlūkošana ar Meilisearch, datubāzi un kolekcijām

Ja vēlaties izvairīties no ārējiem pakalpojumiem, Meilisearch ir atvērtā koda meklētājprogramma , ko varat izvietot lokāli vai savā infrastruktūrā. Scout integrējas ar Meilisearch ļoti līdzīgi kā Algolia, vienkārši mainot draiveri un pievienojot MEILISEARCH_HOST un MEILISEARCH_KEY mainīgos .env failam.

Lai to izmantotu, instalējiet Meilisearch PHP klientu, iestatiet SCOUT_DRIVER=meilisearch un norādiet MEILISEARCH_HOST uz instances URL (piemēram, http://127.0.0.1:7700). Ja jums jau ir ieraksti, varat tos indeksēt ar komandu php artisan scout:import "App\Models\Train", lai tie būtu pieejami dzinējam.

Mazākām vai vidēja lieluma lietojumprogrammām varat izvēlēties arī Scout datubāzes draiveri , kas jūsu MySQL vai PostgreSQL datubāzē izmanto pilna teksta indeksus un LIKE paziņojumus. Šajā gadījumā jums nav nepieciešams ārējs pakalpojums; vienkārši iestatiet SCOUT_DRIVER=database, lai Scout izmantotu pašu datubāzi kā meklētājprogrammu.

Vēl viena interesanta iespēja ir kolekciju draiveris, kas darbojas ar atmiņā esošajām Eloquent kolekcijām . Šis dzinējs filtrē rezultātus, izmantojot `where` un kolekciju filtrēšanas metodes, un tas ir saderīgs ar jebkuru Laravel atbalstītu datubāzi. To var aktivizēt ar `SCOUT_DRIVER=collection` vai pielāgojot Scout konfigurācijas failu, ja vēlaties kaut ko specifiskāku.

Integrācija ar Elasticsearch, izmantojot Explorer

Ja jūsu meklēšanas vajadzības ietver darbu ar milzīgiem datu apjomiem un reāllaika analītiku , Elasticsearch ir klasika. Laravel ekosistēmā mūsdienīgs veids, kā to integrēt ar Scout, ir izmantot Explorer kontrolieri, kas darbojas kā tilts starp jūsu modeļiem un Elasticsearch klasteri.

Tas parasti ietver darbu ar Docker un bagātīgu docker-compose failu, kas palaiž papildus parastajiem pakalpojumiem (Laravel, MySQL, Redis, Meilisearch utt.) arī Elasticsearch un Kibana konteinerus . Pēc tam, izmantojot Composer, jūs instalējat jeroen-g/explorer pakotni un publicējat tās konfigurācijas failu, lai norādītu, kuri modeļi ir jāindeksē.

Failā config/explorer.php varat reģistrēt savus modeļus ar atslēgu indexes, piemēram, pievienojot App\Models\Train::class . Turklāt .env failā varat mainīt draiveri no Scout uz Elasticsearch ar SCOUT_DRIVER=elastic, lai viss norādītu uz Elasticsearch.

Vilciena modeļa ietvaros ir jāievieš Explored saskarne un jāpārraksta mappableAs metode , kas definē indeksam nosūtāmo lauku karti. Minimāls piemērs būtu:

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,
];
}
}

No šejienes jūs varat sākt meklēšanu pakalpojumā Elasticsearch, izmantojot to pašu Scout saskarni , gūstot labumu no ļoti zemā atbildes laika un šī dzinēja pilnās vaicājumu jauda, ​​bet neizejot no Laravel ekosistēmas.

Ar visām šīm pieejām — sākot ar pamata automātisko pabeigšanu ar fetch vai jQuery un beidzot ar front-end filtrēšanu ar Alpine.js, kā arī pilna teksta meklēšanu ar Laravel Scout un dažādiem draiveriem — Laravel piedāvā plašu iespēju klāstu, lai ieviestu reāllaika meklēšanu, kas pielāgota jūsu projekta lielumam, nepieciešamajai veiktspējai un infrastruktūrai, kuru esat gatavs uzturēt.