Erstellen eines Laravel Live-Kommentar-Systems

Um Vertrauen in deiner Online-Community oder deinem Blog aufzubauen, brauchst du ein gut gestaltetes Laravel-Live-Kommentarsystem.

Es ist jedoch nicht einfach, es auf Anhieb richtig hinzubekommen, es sei denn, du verlässt dich auf selbst gehostete Kommentarsysteme wie Disqus oder Commento, die alle ihre eigenen Nachteile mit sich bringen. Sie besitzen deine Daten, bieten nur begrenzte Designs und Anpassungsmöglichkeiten und vor allem sind sie nicht kostenlos.

Wenn dich also die Idee reizt, ein eigenes Echtzeit-Kommentarsystem zu entwickeln, bei dem du die Kontrolle über deine Daten hast und das Design und die Benutzerfreundlichkeit an deinen Blog anpassen kannst, dann lies weiter.

In diesem Artikel erfährst du, wie du ein gut durchdachtes Echtzeit-Kommentarsystem mit verschiedenen Kommentarfunktionen entwickeln kannst. Nach den Prinzipien der Echtzeit-Chat-Anwendung mit Vue.js und Socket.io werden wir Laravel, Pusher und React verwenden, um das Echtzeit-Kommentarsystem zu entwickeln.

Lasst uns loslegen!

Was wir bauen werden

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

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

Bevor wir in die Entwicklung loslegen, wollen wir die Technologien besprechen, mit denen wir unser Echtzeit-Kommentarsystem entwickeln werden.

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. Laravel zu kennen ist wichtig, um dieses Kommentarsystem zu entwickeln.

Pusher

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

Vue.js

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

Aufbau des Kommentarsystems

Wenn das Kommentarsystem, das wir oben beschrieben haben, deinen Vorstellungen entspricht, können wir es jetzt einrichten.

1. Laravel, Pusher und Echo installieren und einrichten

Die Installation und Einrichtung von Laravel, Echo und Pusher ist ganz einfach, denn Laravel hat bereits alle Aufgaben im Hintergrund erledigt, indem es Laravel Echo so eingerichtet und konfiguriert hat, dass es perfekt mit Pusher zusammenarbeitet.

Als Erstes installieren und konfigurieren wir Laravel, unser Backend-PHP-Framework. Mit diesem Befehl kannst du eine neue Instanz von Laravel starten, vorausgesetzt, du hast das Laravel CLI global installiert:

laravel new commenter

Deine neue Laravel-Instanz wird in einem Ordner namens commenter installiert. Öffnen wir den Ordner in unserem VSCode und navigieren wir in unserem Terminal dorthin:

cd commenter

code .

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

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

composer require pusher/pusher-php-server

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

npm install --save laravel-echo pusher-js

Als Nächstes werden wir Laravel Echo und Pusher konfigurieren. Öffne deine Datei resources/js/bootstrap.js und füge 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
});

Im obigen Skript siehst du, dass wir nur die Axios-Instanz mit unseren Standardkonfigurationen konfigurieren. Als Nächstes werden wir Laravel Echo so konfigurieren, dass es Pusher und seine Konfigurationen verwendet.

2. Einrichtung und Migration der Datenbank

Als Nächstes erstellen und konfigurieren wir unsere Datenbank, in der wir die Kommentare für die Persistenz speichern. Wir werden SQLite verwenden, du kannst aber auch einen anderen Clients verwenden.

Erstelle eine database.sqlite-Datei im Datenbankordner und aktualisiere deine .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=

Als Nächstes führst du diesen Befehl aus, um die Kommentar-Migration zu erstellen und sie mit den folgenden Skripten zu aktualisieren:

php artisan make:migration create_comments_table

Öffne die Datei database/migrations/xxxx_create_comments_table_xxxx.php und füge 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 Kommentardatenbanktabelle erstellt und die Spalten Inhalt und Autor hinzugefügt.

Um die Migration zu erstellen, führst du diesen Befehl aus:

php artisan migrate

3. Modelle erstellen

In Laravel sind Modelle von großer Bedeutung – sie sind der sicherste Weg, um mit unserer Datenbank zu kommunizieren und die Daten zu verwalten.

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

php artisan make:model Comment

Als nächstes öffnest du die Datei app/models/Comment.php und fügst 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'];
}

The $fillable array allows us to create and update the model in mass.

4. Erstellen von Controllern

Controller sind von entscheidender Bedeutung, da sie die gesamte Logik, auch die Geschäftslogik, unserer Anwendungen beherbergen, also erstellen wir einen, der die Kommentarlogik handhabt:

php artisan make:controller CommentController

Als nächstes öffnest du die Datei app/Http/Controllers/CommentController.php und fügst 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 hat drei verschiedene Methoden: eine Kommentaransicht zurückgeben, alle Kommentare abrufen und einen neuen Kommentar speichern. Das Wichtigste ist, dass wir jedes Mal, wenn wir einen neuen Kommentar speichern, ein Ereignis auslösen, auf das das Frontend hört, um die entsprechende Seite mit dem neuen Kommentar in Echtzeit mit Pusher und Laravel Echo zu aktualisieren.

5. Routen erstellen

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

Als Erstes aktualisieren wir die Datei api.php im Ordner routes. Öffne die Datei und füge den folgenden Code ein:

use App\Http\Controllers\CommentController;
//...

Route::get('/', [CommentController::class, 'index']);
Route::get('/comments', [CommentController::class, 'fetchComments']);
Route::post('/comments', [CommentController::class, 'store']);

Als Nächstes öffnest du die Datei channels.php im selben Ordner und fügst den folgenden Code hinzu, um das Ereignis zu autorisieren, das wir zuvor ausgelöst haben:

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

Als Nächstes öffnest du die Datei web.php im selben Ordner und fügst den folgenden Code ein, um unsere Anfrage auf die Homepage umzuleiten, wo sie von Vue.js aufgenommen wird:

use App\Http\Controllers\CommentController;
//...

Route::get('/', [CommentController::class, 'index']);

Zum Schluss 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 id="app">
        <div class="container">
            <div class="question-wrapper">
                <h5 class="is-size-2" style="color: #220052;">
                    What do you think about <span style="color: #47b784;">Dogs</span>?</h5>
                <br>
                <a href="#Form" class="button is-medium has-shadow has-text-white" style="background-color: #47b784">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 zu dem oben erstellten Beitragstitel anzuzeigen und hinzuzufügen.

Führe die folgenden Befehle aus, um zu testen, ob du alles richtig machst:

npm run watch

php artisan serve

Wenn du diese Seite siehst, kannst du mit dem nächsten Schritt in diesem Artikel fortfahren.

6. Einrichten von Vue (Frontend)

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

Wir beginnen mit dem Einrichten unseres Vuex-Stores. Erstelle die folgenden Dateien im Ordner resource/js/store.

Kommentarstatus erstellen

Erstelle actions.js und füge den folgenden Code ein:

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 Action-Datei ruft den Kommentar-Endpunkt im Backend auf.

Als Nächstes erstellst du eine getters.js-Datei und fügst den folgenden Code ein:

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

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

Erstelle die Datei mutations.js und füge 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;

Als Nächstes erstellst du eine state.js-Datei und fügst sie in den folgenden Code ein:

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

Zum Schluss fügen wir alles in die Datei index.js ein, die in die Vue-Instanz exportiert wurde, erstellen eine index.js-Datei und fügen das Folgende 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

Zum Schluss erstellen wir unsere Kommentar-Komponenten, um neue Kommentare anzuzeigen und hinzuzufügen. Beginnen wir mit der Erstellung der einzelnen Kommentar-Komponente.

Erstelle im Ordner resource/js einen Ordner namens components, füge die Datei comment.vue hinzu und füge den folgenden Code ein:

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

Als Nächstes erstellst du im selben Ordner die Datei comments.vue und fügst 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>

Als letztes erstellst du eine Datei namens NewComment.vue und fügst den folgenden Code hinzu:

<template>
  <div id="commentForm" 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
              style="height: 100px"
              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
            style="background-color: #47b784"
            :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>

Öffne nun die Datei app.js und füge den folgenden Code hinzu, um die Vue-Komponenten zu registrieren, die du zuvor erstellt hast:

// 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 war’s! Du hast gerade gelernt, wie du mit Laravel ein Live-Kommentarsystem für deine Seite einrichtest.

Wir haben die Vorteile der Erstellung und Verwaltung eines Kommentarsystems für den Aufbau von Vertrauen in deiner Community oder deinem Blog besprochen. Außerdem haben wir entdeckt, wie man ein gut durchdachtes Echtzeit-Kommentarsystem von Grund auf entwickelt und dabei verschiedene Kommentarfunktionen nutzt.

Du kannst den Quellcode dieses Projekts in diesem Github Repo klonen.

Was hältst du von dem Laravel-Live-Kommentarsystem, das wir gemeinsam entwickelt haben? Lass es uns in den Kommentaren wissen!

Solomon Eseme

Ich bin Software-Ingenieurin und Erstellerin von Inhalten, die darauf ausgerichtet ist, leistungsstarke und innovative Produkte nach Best Practices und Branchenstandards zu entwickeln. Ich schreibe auch gerne darüber auf Masteringbackend.com. Folge mir auf X, LinkedIn und About Me

• Webseite
• LinkedIn
• Twitter