Erstellen Sie ein Laravel-Live-Kommentarsystem

Um Vertrauen in Ihre Online-Community oder Ihren Blog aufzubauen, ist ein gut gestaltetes Laravel-Live-Kommentarsystem ein entscheidendes Element.

Es ist jedoch nicht einfach, es beim ersten Versuch richtig zu machen, es sei denn, Sie verlassen sich auf selbst gehostete Kommentarsysteme wie Disqus oder Commento, von denen jedes seine eigenen Nachteile hat. Sie besitzen Ihre Daten, bieten begrenzte Designs und Anpassungen an und vor allem sind sie nicht kostenlos.

Wenn Sie trotz dieser Einschränkungen die Idee, Ihr Echtzeit-Kommentarsystem zu erstellen – mit den Vorteilen der Kontrolle Ihrer Daten, der Gestaltung und Anpassung des Erscheinungsbilds an Ihr Blog – anspricht, lesen Sie weiter.

In diesem Artikel erfahren Sie, wie Sie ein gut gestaltetes Echtzeit-Kommentarsystem mit verschiedenen Kommentarfunktionen entwickeln. Wir folgen den Prinzipien zum Erstellen einer Echtzeit-Chat-Anwendung mit Vue.js und Socket.io und verwenden Laravel, Pusher und React, um das Echtzeit-Kommentarsystem zu entwickeln.

Tauchen wir ein!

Was wir bauen

Wir werden ein Echtzeit-Kommentarsystem aufbauen, das in jede Website oder jeden Blog integriert werden kann, um Vertrauen in der Community aufzubauen.

Überblick über die Bausteine: Laravel, Pusher und Vue

Bevor wir uns mit der Entwicklung befassen, lassen Sie uns die Technologien besprechen, die wir verwenden werden, um unser Echtzeit-Kommentarsystem zu entwickeln.

Laravel

Laravel ist ein Open-Source-MVC-orientiertes PHP-Framework. Es wird verwendet, um einfache bis komplexe PHP-Webanwendungen zu erstellen, die für ihre elegante Syntax bekannt sind. Lernen, was Laravel für den Aufbau dieses Kommentarsystems wesentlich ist.

Pusher

Pusher ermöglicht es Entwicklern, Echtzeitfunktionen in großem Umfang zu erstellen. Dieser Artikel kombiniert Laravel Echo, um ein Echtzeit-Broadcast-Ereignis an den Pusher-Server zu erstellen und den Inhalt auf dem Frontend mit Vue.js anzuzeigen.

Vue.js

Vue.js ist unser bevorzugtes Frontend-Framework. Vue.js ist ein progressives JavaScript-Frontend-Framework, das für seinen leicht zu erlernenden und unkomplizierten Ansatz zur Frontend-Entwicklung bekannt ist. Wir werden Vue.js verwenden, um unser Echtzeit-Kommentarsystem zu entwickeln.

Aufbau des Kommentarsystems

Wenn das oben skizzierte Kommentarsystem nach Ihren Wünschen klingt, lassen Sie uns mit dem Ausbau fortfahren.

1. Installieren und konfigurieren Sie Laravel, Pusher und Echo

Die Installation und Einrichtung von Laravel, Echo und Pusher ist unkompliziert, da Laravel alle Hintergrundaufgaben erledigt hat, indem es Laravel Echo so eingerichtet und konfiguriert hat, dass es perfekt mit Pusher zusammenarbeitet.

Zunächst beginnen wir mit der Installation und Konfiguration von Laravel, unserem Backend-PHP-Framework. Mit diesem Befehl können Sie eine neue Instanz von Laravel abrufen, vorausgesetzt, Sie haben die Laravel-CLI global installiert:

 laravel new commenter

Ihre neue Laravel-Instanz wird in einem Ordner namens commenter installiert. Lassen Sie uns den Ordner in unserem VSCode öffnen und in unserem Terminal dorthin navigieren:

 cd commenter code .

Bevor wir unseren Entwicklungsserver starten, installieren und konfigurieren wir einige notwendige Pakete, die für das Projekt verwendet werden.

Führen Sie diesen Befehl aus, um das Pusher PHP SDK zu installieren:

 composer require pusher/pusher-php-server

Führen Sie diesen Befehl aus, um die erforderlichen NPM-Pakete für das Vue.js-Frontend zu installieren:

 npm install --save laravel-echo pusher-js

Als nächstes konfigurieren wir Laravel Echo und Pusher. Öffnen Sie Ihre Datei resources/js/bootstrap.js und fügen Sie die folgenden Skripte ein:

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

Sie werden im obigen Skript feststellen, dass wir nur die Axios-Instanz mit unseren Standardkonfigurationen konfigurieren. Als Nächstes konfigurieren wir Laravel Echo für die Verwendung von Pusher und seinen Konfigurationen.

2. Datenbankeinrichtung und -migration

Als Nächstes erstellen und richten wir unsere Datenbank ein, um die Kommentare für die Persistenz zu speichern. Wir verwenden SQLite, obwohl Sie jeden Datenbankclient Ihrer Wahl verwenden können.

Erstellen Sie eine database.sqlite -Datei im Datenbankordner und aktualisieren Sie Ihre .env -Datei wie folgt:

 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=

Führen Sie als Nächstes diesen Befehl aus, um die Kommentarmigration zu erstellen, und aktualisieren Sie sie mit den folgenden Skripts:

 php artisan make:migration create_comments_table

Öffnen Sie die Datei database/migrations/xxxx_create_comments_table_xxxx.php und fügen Sie diesen Code ein:

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

Dadurch wird eine neue Datenbanktabelle für Kommentare erstellt und es werden Inhalts- und Autorenspalten hinzugefügt.

Führen Sie schließlich diesen Befehl aus, um die Migration zu erstellen:

 php artisan migrate

3. Erstellen von Modellen

In Laravel sind Modelle von Bedeutung – sie sind der sicherste Weg, um mit unserer Datenbank zu kommunizieren und das Datenmanagement zu handhaben.

Um ein Modell in Laravel zu erstellen, führen wir den folgenden Befehl aus:

 php artisan make:model Comment

Öffnen Sie als Nächstes die Datei app/models/Comment.php und fügen Sie den folgenden Code ein:

 <?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']; } Das Array $fillable ermöglicht es uns, das Modell in Massen zu erstellen und zu aktualisieren.

4. Controller erstellen

Controller sind von entscheidender Bedeutung, da sie die gesamte Logik, das Geschäft und andere unserer Anwendungen beherbergen. Erstellen wir also einen, der die Kommentarlogik handhabt:

 php artisan make:controller CommentController

Öffnen Sie als Nächstes die Datei app/Http/Controllers/CommentController.php und fügen Sie den folgenden Code ein:

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

Der Controller verfügt über drei verschiedene Methoden: Zurückgeben einer Kommentaransicht, Abrufen aller Kommentare bzw. Speichern eines neuen Kommentars. Am wichtigsten ist, dass wir jedes Mal, wenn wir einen neuen Kommentar speichern, ein Ereignis auslösen, auf das das Frontend wartet, um die relevante Seite mit dem neuen Kommentar in Echtzeit mit Pusher und Laravel Echo zu aktualisieren.

5. Erstellen von Routen

Um unsere Routen richtig zu konfigurieren, müssen wir viele Dateien aktualisieren, also fangen wir an.

Zuerst werden wir die api.php -Datei im Routenordner aktualisieren. Öffnen Sie die Datei und fügen Sie den folgenden Code hinzu:

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

Öffnen Sie als Nächstes die Datei channels.php im selben Ordner und fügen Sie den folgenden Code hinzu, um das zuvor ausgelöste Ereignis zu autorisieren:

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

Öffnen Sie als Nächstes die Datei web.php im selben Ordner und fügen Sie den folgenden Code hinzu, um unsere Anfrage auf die Homepage umzuleiten, wo Vue.js sie abholen wird:

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

Zuletzt erstellen wir eine neue Blade-Datei im Ordner „ resources/views “ mit dem Namen „ comments.blade.php “ und fügen den folgenden Code hinzu:

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

Das Skript fügt einen Beitragstitel und eine Vue-Komponente hinzu, um neue Kommentare zum oben erstellten Beitragstitel anzuzeigen und hinzuzufügen.

Führen Sie die folgenden Befehle aus, um zu testen, ob Sie alles richtig erhalten:

 npm run watch php artisan serve

Wenn Ihnen diese Seite angezeigt wird, können Sie mit dem nächsten Schritt in diesem Artikel fortfahren.

6. Einrichten von Vue (Frontend)

Wir erstellen und richten unsere Vue-Instanz ein, um alle Kommentare zu diesem Beitrag zu erstellen und anzuzeigen.

Wir beginnen mit der Einrichtung unseres Vuex-Shops. Erstellen Sie die folgenden Dateien im Ordner resource/js/store.

Kommentarstatus erstellen

Erstellen Sie actions.js und fügen Sie den folgenden Code hinzu:

 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;

Die Aktionsdatei ruft den Kommentarendpunkt im Backend auf.

Erstellen Sie als Nächstes eine getters.js-Datei und fügen Sie den folgenden Code hinzu:

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

Die Getter-Datei wird verwendet, um alle Kommentare im Zustand abzurufen.

Erstellen Sie die Datei mutations.js und fügen Sie sie in den folgenden Code ein:

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

Erstellen Sie als Nächstes eine state.js-Datei und fügen Sie sie in den folgenden Code ein:

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

Zuletzt fügen wir alles zur index.js-Datei hinzu, die in die Vue-Instanz exportiert wurde, erstellen eine index.js-Datei und fügen Folgendes hinzu:

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

Komponenten erstellen

Zuletzt erstellen wir unsere Kommentarkomponenten, um neue Kommentare anzuzeigen und hinzuzufügen. Beginnen wir mit der Erstellung der einzelnen Kommentarkomponente.

Erstellen Sie im Ordner „ resource/js “ einen Ordner namens „components“, fügen Sie die Datei „ comment.vue“ und den folgenden Code hinzu:

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

Erstellen Sie als Nächstes die folgende Datei namens comments.vue im selben Ordner und fügen Sie den folgenden Code hinzu:

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

Erstellen Sie zuletzt eine Datei namens NewComment.vue und fügen Sie den folgenden Code hinzu:

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

Öffnen Sie nun die Datei app.js und fügen Sie den folgenden Code hinzu, um die zuvor erstellten Vue-Komponenten zu registrieren:

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

Zusammenfassung

Und das ist es! Sie haben gerade gelernt, wie Sie mit Laravel ein Live-Kommentarsystem für Ihre Website erstellen.

Wir haben die Vorteile der Erstellung und Verwaltung eines Kommentarsystems besprochen, um Vertrauen in Ihre Community oder Ihren Blog aufzubauen. Wir haben auch untersucht, wie man ein gut gestaltetes Echtzeit-Kommentarsystem von Grund auf entwickelt und dabei verschiedene Kommentarfunktionen nutzt.

Sie können den Quellcode dieses Projekts in diesem Github-Repo klonen.

Was halten Sie von dem Laravel-Live-Kommentarsystem, das wir gemeinsam entwickelt haben? Lass es uns in den Kommentaren wissen!