Zbuduj system komentowania na żywo Laravel

Aby zbudować zaufanie w Twojej społeczności internetowej lub blogu, jednym z kluczowych elementów, których potrzebujesz, jest dobrze zaprojektowany system komentowania na żywo Laravel.

Jednak nie jest łatwo zrobić to dobrze za pierwszym razem, chyba że polegasz na samoobsługowych systemach komentowania, takich jak Disqus lub Commento, z których każdy ma swój własny zestaw wad. Są właścicielami Twoich danych, oferują ograniczone projekty i dostosowania, a co najważniejsze, nie są bezpłatne.

Z tymi ograniczeniami, jeśli pomysł zbudowania własnego systemu komentowania w czasie rzeczywistym — z korzyściami płynącymi z kontrolowania danych, projektowania i dostosowywania wyglądu i sposobu działania w celu dopasowania do Twojego bloga — przemawia do Ciebie, czytaj dalej.

Z tego artykułu dowiesz się, jak stworzyć dobrze zaprojektowany i działający w czasie rzeczywistym system komentowania z różnymi funkcjami komentowania. Zgodnie z zasadami budowania aplikacji czatu w czasie rzeczywistym za pomocą Vue.js i Socket.io, użyjemy Laravel, Pusher i React do opracowania systemu komentowania w czasie rzeczywistym.

Zanurzmy się!

Co zbudujemy

Zbudujemy system komentowania w czasie rzeczywistym, który można zintegrować z dowolną witryną internetową lub blogiem, aby budować zaufanie w społeczności.

Przegląd bloków konstrukcyjnych: Laravel, Pusher i Vue

Zanim zagłębimy się w rozwój, omówmy technologie, których użyjemy do opracowania naszego systemu komentowania w czasie rzeczywistym.

Laravel

Laravel jest open-source'owym frameworkiem PHP zorientowanym na MVC. Służy do budowania prostych do złożonych aplikacji internetowych PHP znanych z eleganckiej składni. Poznanie tego, co Laravel jest niezbędne do zbudowania tego systemu komentowania.

Popychacz

Pusher umożliwia programistom tworzenie funkcji w czasie rzeczywistym na dużą skalę. Ten artykuł połączy Laravel Echo, aby stworzyć transmisję w czasie rzeczywistym na serwer Pusher i wyświetlić zawartość na interfejsie za pomocą Vue.js.

Vue.js

Vue.js to nasz ulubiony framework frontendowy. Vue.js to progresywny framework frontendowy JavaScript znany z łatwego do nauczenia i prostego podejścia do programowania frontendowego. Będziemy używać Vue.js do rozwijania naszego systemu komentowania w czasie rzeczywistym.

Budowanie systemu komentowania

Jeśli system komentowania, który opisaliśmy powyżej, brzmi tak, jak chcesz, przejdźmy do jego rozbudowy.

1. Zainstaluj i skonfiguruj Laravel, Pusher i Echo

Instalacja i konfiguracja Laravel, Echo i Pusher jest prosta, ponieważ Laravel wykonał wszystkie zadania w tle, konfigurując i konfigurując Laravel Echo, aby idealnie współpracował z Pusherem.

Po pierwsze, zaczniemy od zainstalowania i skonfigurowania Laravel, naszego backendowego frameworka PHP. Możesz pobrać nową instancję Laravel za pomocą tego polecenia, pod warunkiem, że zainstalowałeś globalnie Laravel CLI:

 laravel new commenter

Twoja nowa instancja Laravela zostanie zainstalowana w folderze o nazwie commenter. Otwórzmy folder w naszym VSCode i przejdźmy do niego w naszym terminalu:

 cd commenter code .

Zanim zaczniemy nasz serwer deweloperski, zainstalujmy i skonfigurujmy kilka niezbędnych pakietów, które będą używane w projekcie.

Uruchom to polecenie, aby zainstalować pakiet SDK Pusher PHP:

 composer require pusher/pusher-php-server

Uruchom to polecenie, aby zainstalować niezbędne pakiety NPM dla frontendu Vue.js:

 npm install --save laravel-echo pusher-js

Następnie skonfigurujemy Laravel Echo i Pusher. Otwórz plik resources/js/bootstrap.js i wklej następujące skrypty:

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

Jak zauważysz w powyższym skrypcie, po prostu konfigurujemy instancję Axios z naszymi domyślnymi konfiguracjami. Następnie skonfigurujemy Laravel Echo do korzystania z Pushera i jego konfiguracji.

2. Konfiguracja i migracja bazy danych

Następnie utworzymy i skonfigurujemy naszą bazę danych do przechowywania komentarzy w celu ich utrwalenia. Będziemy używać SQLite, ale możesz użyć dowolnego klienta bazy danych.

Utwórz plik database.sqlite w folderze bazy danych i zaktualizuj plik .env w następujący sposób:

 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=

Następnie uruchom to polecenie, aby utworzyć migrację komentarzy i zaktualizować ją za pomocą następujących skryptów:

 php artisan make:migration create_comments_table

Otwórz plik database/migrations/xxxx_create_comments_table_xxxx.php i wklej ten kod:

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

Spowoduje to utworzenie nowej tabeli bazy danych komentarzy oraz dodanie kolumn treści i autorów.

Na koniec, aby utworzyć migrację, uruchom to polecenie:

 php artisan migrate

3. Tworzenie modeli

W Laravel modele mają znaczenie — są najpewniejszym sposobem komunikacji z naszą bazą danych i zarządzania danymi.

Aby stworzyć model w Laravel, uruchomimy następujące polecenie:

 php artisan make:model Comment

Następnie otwórz plik app/models/Comment.php i wklej następujący kod:

 <?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']; } Tablica $fillable pozwala nam tworzyć i aktualizować model w masie.

4. Tworzenie kontrolerów

Kontrolery są kluczowe, ponieważ przechowują całą logikę, biznes i nie tylko naszych aplikacji, więc stwórzmy jeden, aby obsłużyć logikę komentowania:

 php artisan make:controller CommentController

Następnie otwórz plik app/Http/Controllers/CommentController.php i wklej następujący kod:

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

Kontroler ma trzy różne metody: odpowiednio zwróć widok komentarza, pobierz wszystkie komentarze i zapisz nowy komentarz. Co najważniejsze, uruchamiamy zdarzenie za każdym razem, gdy zapisujemy nowy komentarz, którego frontend nasłuchuje, aby zaktualizować odpowiednią stronę o nowy komentarz w czasie rzeczywistym za pomocą Pushera i Laravel Echo.

5. Tworzenie tras

Aby poprawnie skonfigurować nasze trasy, musimy zaktualizować wiele plików, więc zacznijmy.

Najpierw zaktualizujemy plik api.php w folderze Routes. Otwórz plik i dodaj następujący kod:

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

Następnie otwórz plik channels.php w tym samym folderze i dodaj następujący kod, aby autoryzować zdarzenie, które uruchomiliśmy wcześniej:

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

Następnie otwórz plik web.php w tym samym folderze i dodaj następujący kod, aby przekierować nasze żądanie na stronę główną, skąd Vue.js ją odbierze:

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

Na koniec utworzymy nowy plik blade w folderze resources/views o nazwie comments.blade.php i dodamy następujący kod:

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

Skrypt dodaje tytuł posta i komponent Vue do wyświetlania i dodawania nowych komentarzy do tytułu posta utworzonego powyżej.

Uruchom następujące polecenia, aby sprawdzić, czy wszystko zostało poprawnie zrobione:

 npm run watch php artisan serve

Jeśli otrzymasz tę stronę, możesz przejść do następnego kroku w tym artykule.

6. Konfiguracja Vue (frontend)

Stworzymy i skonfigurujemy naszą instancję Vue, aby tworzyć i wyświetlać wszystkie komentarze do tego posta.

Zaczniemy od założenia naszego sklepu Vuex. Utwórz następujące pliki w folderze resource/js/store.

Utwórz stan komentarza

Utwórz actions.js i dodaj następujący kod:

 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;

Plik Action odwołuje się do punktu końcowego komentarza w zapleczu.

Następnie utwórz plik getters.js i dodaj następujący kod:

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

Plik Getter służy do pobierania wszystkich komentarzy w stanie.

Utwórz plik mutacje.js i wklej go do następującego kodu:

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

Następnie utwórz plik state.js i wklej go do następującego kodu:

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

Na koniec dodamy wszystko do pliku index.js wyeksportowanego do instancji Vue, utworzymy plik index.js i dodamy:

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

Utwórz komponenty

Na koniec utworzymy nasze komponenty komentarzy do wyświetlania i dodawania nowych komentarzy. Zacznijmy od stworzenia pojedynczego komponentu komentarza.

Utwórz folder w folderze resource/js o nazwie components, dodaj comment.vue i dodaj następujący kod:

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

Następnie utwórz następujący plik o nazwie comments.vue w tym samym folderze i dodaj następujący kod:

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

Na koniec utwórz plik o nazwie NewComment.vue i dodaj następujący kod:

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

Teraz otwórz plik app.js i dodaj następujący kod, aby zarejestrować utworzone wcześniej komponenty Vue:

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

Streszczenie

I to wszystko! Właśnie dowiedziałeś się, jak zbudować system komentowania na żywo dla swojej witryny za pomocą Laravela.

Omówiliśmy korzyści płynące z tworzenia systemu komentowania i zarządzania nim w dążeniu do budowania zaufania w swojej społeczności lub blogu. Zbadaliśmy również, jak opracować od podstaw dobrze zaprojektowany system komentowania w czasie rzeczywistym, wykorzystujący różne funkcje komentowania.

Możesz sklonować kod źródłowy tego projektu w tym repozytorium Github.

Co sądzisz o systemie komentowania na żywo Laravel, który wspólnie zbudowaliśmy? Daj nam znać w komentarzach!