Costruisci un sistema di commenti live di Laravel

Per creare fiducia nella tua comunità o blog online, un elemento cruciale che vorrai è un sistema di commenti live di Laravel ben progettato.

Tuttavia, non è facile farlo bene al primo tentativo a meno che non ti affidi a sistemi di commento auto-ospitati come Disqus o Commento, ognuno dei quali presenta una serie di svantaggi. Possiedono i tuoi dati, offrono design e personalizzazioni limitati e, soprattutto, non sono gratuiti.

Con queste limitazioni, se l'idea di costruire il tuo sistema di commenti in tempo reale, con i vantaggi di controllare i tuoi dati, progettare e personalizzare l'aspetto grafico per adattarlo al tuo blog, ti attira, continua a leggere.

Questo articolo ti insegnerà come sviluppare un sistema di commenti ben progettato e in tempo reale con diverse funzionalità di commento. Seguendo i principi della creazione di un'applicazione di chat in tempo reale con Vue.js e Socket.io, utilizzeremo Laravel, Pusher e React per sviluppare il sistema di commenti in tempo reale.

Immergiamoci!

Cosa costruiremo

Costruiremo un sistema di commenti in tempo reale che può essere integrato in qualsiasi sito Web o blog per creare fiducia nella comunità.

Panoramica dei blocchi predefiniti: Laravel, Pusher e Vue

Prima di immergerci nello sviluppo, discutiamo delle tecnologie che utilizzeremo per sviluppare il nostro sistema di commenti in tempo reale.

Laravel

Laravel è un framework PHP open source orientato a MVC. Viene utilizzato per creare applicazioni Web PHP da semplici a complesse note per la loro sintassi elegante. Imparare cosa Laravel è essenziale per costruire questo sistema di commenti.

spintore

Pusher consente agli sviluppatori di creare funzionalità in tempo reale su larga scala. Questo articolo combinerà Laravel Echo per creare un evento di trasmissione in tempo reale sul server Pusher e visualizzare il contenuto sul frontend con Vue.js.

Vue.js

Vue.js è il nostro framework frontend preferito. Vue.js è un framework front-end JavaScript progressivo noto per il suo approccio semplice e di facile apprendimento allo sviluppo del front-end. Useremo Vue.js per sviluppare il nostro sistema di commenti in tempo reale.

Costruire il sistema di commento

Se il sistema di commenti che abbiamo delineato sopra suona come quello che vuoi, passiamo a costruirlo.

1. Installa e configura Laravel, Pusher ed Echo

L'installazione e la configurazione di Laravel, Echo e Pusher sono semplici poiché Laravel ha svolto tutte le attività in background impostando e configurando Laravel Echo per funzionare perfettamente con Pusher.

In primo luogo, inizieremo installando e configurando Laravel, il nostro framework PHP di back-end. Puoi prendere una nuova istanza di Laravel con questo comando, a condizione che tu abbia installato Laravel CLI a livello globale:

 laravel new commenter

La tua nuova istanza di Laravel verrà installata in una cartella chiamata commenter. Apriamo la cartella nel nostro VSCode e navighiamo ad essa nel nostro terminale:

 cd commenter code .

Prima di avviare il nostro server di sviluppo, installiamo e configuriamo alcuni pacchetti necessari che verranno utilizzati per il progetto.

Esegui questo comando per installare Pusher PHP SDK:

 composer require pusher/pusher-php-server

Esegui questo comando per installare i pacchetti NPM necessari per il frontend Vue.js:

 npm install --save laravel-echo pusher-js

Successivamente, configureremo Laravel Echo e Pusher. Apri il tuo file resources/js/bootstrap.js e incolla i seguenti script:

 window._ = require("lodash"); window.axios = require("axios"); window.moment = require("moment"); window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"; window.axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; window.axios.defaults.headers.common.crossDomain = true; window.axios.defaults.baseURL = "/api"; let token = document.head.querySelector('meta[name="csrf-token"]'); if (token) { window.axios.defaults.headers.common["X-CSRF-TOKEN"] = token.content; } else { console.error("CSRF token not found"); } /** * Echo exposes an expressive API for subscribing to channels and listening * for events that Laravel broadcasts. Echo and event broadcasting * allows your team to build robust real-time web applications quickly. */ import Echo from "laravel-echo"; window.Pusher = require("pusher-js"); window.Echo = new Echo({ broadcaster: "pusher", key: process.env.MIX_PUSHER_APP_KEY, cluster: process.env.MIX_PUSHER_APP_CLUSTER, forceTLS: true });

Noterai dallo script sopra che stiamo solo configurando l'istanza Axios con le nostre configurazioni predefinite. Successivamente, configureremo Laravel Echo per utilizzare Pusher e le sue configurazioni.

2. Configurazione e migrazione del database

Successivamente, creeremo e configureremo il nostro database per archiviare i commenti per la persistenza. Useremo SQLite, anche se puoi usare qualsiasi client di database di tua scelta.

Crea un file database.sqlite all'interno della cartella del database e aggiorna il tuo file .env come segue:

 DB_CONNECTION=sqlite DB_DATABASE=/Users/all/paths/to/project/commenter_be/database/database.sqlite DB_HOST=127.0.0.1 DB_PORT=3306 DB_USERNAME=root DB_PASSWORD=

Quindi, esegui questo comando per creare la migrazione dei commenti e aggiornala con i seguenti script:

 php artisan make:migration create_comments_table

Apri il file database/migrations/xxxx_create_comments_table_xxxx.php e incolla questo codice:

 <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateCommentsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('comments', function (Blueprint $table) { $table->id(); $table->string('content'); $table->string('author'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('comments'); } }

Questo creerà una nuova tabella del database dei commenti e aggiungerà il contenuto e le colonne dell'autore.

Infine, per creare la migrazione, eseguire questo comando:

 php artisan migrate

3. Creazione di modelli

In Laravel, i modelli sono importanti: sono il modo più sicuro per comunicare con il nostro database e gestire la gestione dei dati.

Per creare un modello in Laravel, eseguiremo il seguente comando:

 php artisan make:model Comment

Quindi, apri il file app/models/Comment.php e incolla il codice seguente:

 <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Comment extends Model { use HasFactory; protected $fillable = ['content', 'author']; } L'array $fillable ci consente di creare e aggiornare il modello in massa.

4. Creazione di controller

I controller sono fondamentali perché ospitano tutta la logica, il business e altro, delle nostre applicazioni, quindi creiamone uno per gestire la logica di commento:

 php artisan make:controller CommentController

Quindi, apri il file app/Http/Controllers/CommentController.php e incolla il codice seguente:

 <?php namespace App\Http\Controllers; use App\Models\Comment; use App\Events\CommentEvent; use Illuminate\Http\Request; class CommentController extends Controller { // public function index() { return view('comments'); } public function fetchComments() { $comments = Comment::all(); return response()->json($comments); } public function store(Request $request) { $comment = Comment::create($request->all()); event(new CommentEvent($comment)); return $comment; } }

Il controller ha tre diversi metodi: restituire una visualizzazione commenti, recuperare tutti i commenti e memorizzare un nuovo commento, rispettivamente. Ancora più importante, attiviamo un evento ogni volta che memorizziamo un nuovo commento, che il frontend ascolterà per aggiornare la pagina pertinente con il nuovo commento in tempo reale usando Pusher e Laravel Echo.

5. Creazione di percorsi

Per configurare correttamente i nostri percorsi, dovremo aggiornare molti file, quindi iniziamo.

Innanzitutto, aggiorneremo il file api.php nella cartella dei percorsi. Apri il file e aggiungi il seguente codice:

 use App\Http\Controllers\CommentController; //... Route::get('/', [CommentController::class, 'index']); Route::get('/comments', [CommentController::class, 'fetchComments']); Route::post('/comments', [CommentController::class, 'store']);

Quindi, apri il file channels.php nella stessa cartella e aggiungi il seguente codice per autorizzare l'evento che abbiamo attivato in precedenza:

 Broadcast::channel('comment', function ($user) { return true; });

Quindi, apri il file web.php nella stessa cartella e aggiungi il seguente codice per reindirizzare la nostra richiesta alla home page, dove Vue.js la raccoglierà:

 use App\Http\Controllers\CommentController; //... Route::get('/', [CommentController::class, 'index']);

Infine, creeremo un nuovo file blade nella cartella resources/views chiamato comments.blade.php e aggiungeremo il seguente codice:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Commenter</title> <meta name="csrf-token" content="{{ csrf_token() }}"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" /> <style> .container { margin: 0 auto; position: relative; width: unset; } #app { width: 60%; margin: 4rem auto; } .question-wrapper { text-align: center; } </style> </head> <body> <div> <div class="container"> <div class="question-wrapper"> <h5 class="is-size-2"> What do you think about <span>Dogs</span>?</h5> <br> <a href="#Form" class="button is-medium has-shadow has-text-white">Comment</a> </div> <br><br> <comments></comments> <new-comment></new-comment> </div> </div> <script async src="{{mix('js/app.js')}}"></script> </body> </html>

Lo script aggiunge un titolo del post e un componente Vue per visualizzare e aggiungere nuovi commenti al titolo del post creato sopra.

Esegui i seguenti comandi per verificare se ottieni tutto correttamente:

 npm run watch php artisan serve

Se ti viene presentata questa pagina, sei pronto per passare al passaggio successivo di questo articolo.

6. Configurazione di Vue (anteriore)

Creeremo e imposteremo la nostra istanza Vue per creare e visualizzare tutti i commenti fatti su questo post.

Inizieremo con la configurazione del nostro negozio Vuex. Crea i seguenti file nella cartella risorsa/js/store.

Crea stato commento

Crea actions.js e aggiungi il codice seguente:

 let actions = { ADD_COMMENT({ commit }, comment) { return new Promise((resolve, reject) => { axios .post(`/comments`, comment) .then(response => { resolve(response); }) .catch(err => { reject(err); }); }); }, GET_COMMENTS({ commit }) { axios .get("/comments") .then(res => { { commit("GET_COMMENTS", res.data); } }) .catch(err => { console.log(err); }); } }; export default actions;

Il file di azione effettua una chiamata all'endpoint del commento nel back-end.

Quindi, crea un file getters.js e aggiungi il codice seguente:

 let getters = { comments: state => { return state.comments; } }; export default getters;

Il file Getter viene utilizzato per recuperare tutti i commenti nello stato.

Crea il file mutazioni.js e incollalo nel codice seguente:

 let mutations = { GET_COMMENTS(state, comments) { state.comments = comments; }, ADD_COMMENT(state, comment) { state.comments = [...state.comments, comment]; } }; export default mutations;

Quindi, crea un file state.js e incollalo nel codice seguente:

 let state = { comments: [] }; export default state;

Infine, aggiungeremo tutto al file index.js esportato nell'istanza Vue, creeremo un file index.js e aggiungeremo quanto segue:

 import Vue from "vue"; import Vuex from "vuex"; import actions from "./actions"; import mutations from "./mutations"; import getters from "./getters"; import state from "./state"; Vue.use(Vuex); export default new Vuex.Store({ state, mutations, getters, actions });

Crea componenti

Infine, creeremo i nostri componenti di commento per visualizzare e aggiungere nuovi commenti. Iniziamo creando il componente di commento singolo.

Crea una cartella nella cartella risorsa/js chiamata componenti, aggiungi il comment.vue e aggiungi il seguente codice:

 <template> <li class="comment-wrapper animate slideInLeft"> <div class="profile"> </div> <div class="msg has-shadow"> <div class="msg-body"> <p class="name"> {{ comment.author }} <span class="date">{{ posted_at }}</span> </p> <p class="content">{{ comment.content }}</p> </div> </div> </li> </template> <script> export default { name: "Comment", props: ["comment"], computed: { posted_at() { return moment(this.comment.created_at).format("MMMM Do YYYY"); }, }, }; </script> <style lang="scss" scoped> .comment-wrapper { list-style: none; text-align: left; overflow: hidden; margin-bottom: 2em; padding: 0.4em; .profile { width: 80px; float: left; } .msg-body { padding: 0.8em; color: #666; line-height: 1.5; } .msg { width: 86%; float: left; background-color: #fff; border-radius: 0 5px 5px 5px; position: relative; &::after { content: " "; position: absolute; left: -13px; top: 0; border: 14px solid transparent; border-top-color: #fff; } } .date { float: right; } .name { margin: 0; color: #999; font-weight: 700; font-size: 0.8em; } p:last-child { margin-top: 0.6em; margin-bottom: 0; } } </style>

Quindi, crea il seguente file chiamato comments.vue nella stessa cartella e aggiungi il seguente codice:

 <template> <div class="container"> <ul class="comment-list"> <Comment :key="comment.id" v-for="comment in comments" :comment="comment" ></Comment> </ul> </div> </template> <script> import { mapGetters } from "vuex"; import Comment from "./Comment"; export default { name: "Comments", components: { Comment }, mounted() { this.$store.dispatch("GET_COMMENTS"); this.listen(); }, methods: { listen() { Echo.channel("comment").listen("comment", (e) => { console.log(e); this.$store.commit("ADD_COMMENT", e); }); }, }, computed: { ...mapGetters(["comments"]), }, }; </script> <style scoped> .comment-list { padding: 1em 0; margin-bottom: 15px; } </style>

Infine, crea un file chiamato NewComment.vue e aggiungi il seguente codice:

 <template> <div class="box has-shadow has-background-white"> <form @keyup.enter="postComment"> <div class="field has-margin-top"> <div class="field has-margin-top"> <label class="label">Your name</label> <div class="control"> <input type="text" placeholder="Your name" class="input is-medium" v-model="comment.author" /> </div> </div> <div class="field has-margin-top"> <label class="label">Your comment</label> <div class="control"> <textarea name="comment" class="input is-medium" autocomplete="true" v-model="comment.content" placeholder="lorem ipsum" ></textarea> </div> </div> <div class="control has-margin-top"> <button :class="{ 'is-loading': submit }" class="button has-shadow is-medium has-text-white" :disabled="!isValid" @click.prevent="postComment" type="submit" > Submit </button> </div> </div> </form> <br /> </div> </template> <script> export default { name: "NewComment", data() { return { submit: false, comment: { content: "", author: "", }, }; }, methods: { postComment() { this.submit = true; this.$store .dispatch("ADD_COMMENT", this.comment) .then((response) => { this.submit = false; if (response.data) console.log("success"); }) .catch((err) => { console.log(err); this.submit = false; }); }, }, computed: { isValid() { return this.comment.content !== "" && this.comment.author !== ""; }, }, }; </script> <style scoped> .has-margin-top { margin-top: 15px; } </style>

Ora apri il file app.js e aggiungi il seguente codice per registrare i componenti Vue che hai creato in precedenza:

 // resource/js/app.js require("./bootstrap"); window.Vue = require("vue"); import store from "./store/index"; Vue.component("comment", require("./components/Comment")); Vue.component("comments", require("./components/Comments")); Vue.component("new-comment", require("./components/NewComment")); const app = new Vue({ el: "#app", store });

Sommario

E questo è tutto! Hai appena imparato a costruire un sistema di commenti dal vivo per il tuo sito utilizzando Laravel.

Abbiamo discusso dei vantaggi della creazione e della gestione di un sistema di commenti nella tua ricerca per creare fiducia nella tua comunità o blog. Abbiamo anche esplorato da zero come sviluppare un sistema di commenti ben progettato e in tempo reale, utilizzando diverse funzionalità di commento.

Puoi clonare il codice sorgente di questo progetto in questo repository Github.

Cosa ne pensi del sistema di commenti live di Laravel che abbiamo costruito insieme? Fateci sapere nei commenti!