Laravel 라이브 댓글 시스템 구축

온라인 커뮤니티나 블로그에 대한 신뢰를 구축하기 위해 원하는 중요한 요소 중 하나는 잘 설계된 Laravel 라이브 댓글 시스템입니다.

그러나 각각 고유한 단점이 있는 Disqus 또는 Commento와 같은 자체 호스팅 주석 시스템에 의존하지 않는 한 첫 번째 시도에서 올바른 결과를 얻기가 쉽지 않습니다. 그들은 귀하의 데이터를 소유하고 제한된 디자인과 사용자 정의를 제공하며 가장 중요한 것은 무료가 아닙니다.

이러한 제한 사항이 있지만 데이터를 제어하고 블로그에 맞게 모양과 느낌을 디자인 및 사용자 지정하는 이점과 함께 실시간 댓글 시스템을 구축하는 아이디어가 마음에 든다면 계속 읽으십시오.

이 기사에서는 다양한 댓글 기능을 갖춘 잘 설계된 실시간 댓글 시스템을 개발하는 방법을 설명합니다. Vue.js 및 Socket.io로 실시간 채팅 애플리케이션을 구축하는 원칙에 따라 Laravel, Pusher 및 React를 사용하여 실시간 댓글 시스템을 개발할 것입니다.

뛰어들자!

우리가 만들 것

우리는 커뮤니티의 신뢰를 구축하기 위해 모든 웹사이트나 블로그에 통합할 수 있는 실시간 댓글 시스템을 구축할 것입니다.

빌딩 블록 개요: Laravel, Pusher 및 Vue

개발에 대해 알아보기 전에 실시간 댓글 시스템을 개발하는 데 사용할 기술에 대해 논의해 보겠습니다.

라라벨

Laravel은 오픈 소스 MVC 지향 PHP 프레임워크입니다. 우아한 구문으로 알려진 단순하거나 복잡한 PHP 웹 애플리케이션을 구축하는 데 사용됩니다. Laravel이 이 댓글 시스템을 구축하는 데 필수적인 것이 무엇인지 배우십시오.

미는 사람

Pusher를 사용하면 개발자가 대규모로 실시간 기능을 만들 수 있습니다. 이 기사에서는 Laravel Echo를 결합하여 Pusher 서버에 대한 실시간 브로드캐스트 이벤트를 생성하고 Vue.js를 사용하여 프런트엔드에 콘텐츠를 표시합니다.

뷰.js

Vue.js는 우리가 선택한 프론트엔드 프레임워크입니다. Vue.js는 프론트엔드 개발에 대한 배우기 쉽고 직접적인 접근 방식으로 알려진 진보적인 JavaScript 프론트엔드 프레임워크입니다. Vue.js를 사용하여 실시간 댓글 시스템을 개발할 것입니다.

댓글 시스템 구축

위에서 설명한 주석 시스템이 원하는 대로 들린다면 계속 구축해 보겠습니다.

1. Laravel, Pusher 및 Echo 설치 및 설정

Laravel이 Pusher와 완벽하게 작동하도록 Laravel Echo를 설정하고 구성하여 모든 백그라운드 작업을 수행했기 때문에 Laravel, Echo 및 Pusher의 설치 및 설정은 간단합니다.

먼저 백엔드 PHP 프레임워크인 Laravel을 설치하고 구성하는 것부터 시작하겠습니다. Laravel CLI를 전역적으로 설치했다면 이 명령으로 Laravel의 새 인스턴스를 가져올 수 있습니다.

 laravel new commenter

새 Laravel 인스턴스는 commenter라는 폴더에 설치됩니다. VSCode에서 폴더를 열고 터미널에서 해당 폴더로 이동해 보겠습니다.

 cd commenter code .

개발 서버를 시작하기 전에 프로젝트에 사용할 몇 가지 필수 패키지를 설치하고 구성해 보겠습니다.

다음 명령을 실행하여 Pusher PHP SDK를 설치합니다.

 composer require pusher/pusher-php-server

이 명령을 실행하여 Vue.js 프런트엔드에 필요한 NPM 패키지를 설치합니다.

 npm install --save laravel-echo pusher-js

다음으로, 우리는 Laravel Echo와 Pusher를 구성할 것입니다. resources/js/bootstrap.js 파일을 열고 다음 스크립트를 붙여넣습니다.

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

위의 스크립트에서 기본 구성으로 Axios 인스턴스를 구성하고 있음을 알 수 있습니다. 다음으로 Pusher와 그 구성을 사용하도록 Laravel Echo를 구성합니다.

2. 데이터베이스 설정 및 마이그레이션

다음으로, 지속성을 위해 주석을 저장할 데이터베이스를 만들고 설정합니다. 원하는 데이터베이스 클라이언트를 사용할 수 있지만 우리는 SQLite를 사용할 것입니다.

데이터베이스 폴더 안에 database.sqlite 파일을 만들고 다음과 같이 .env 파일을 업데이트합니다.

 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=

다음으로 이 명령을 실행하여 주석 마이그레이션을 만들고 다음 스크립트로 업데이트합니다.

 php artisan make:migration create_comments_table

database/migrations/xxxx_create_comments_table_xxxx.php 파일을 열고 다음 코드를 붙여넣습니다.

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

그러면 새 주석 데이터베이스 테이블이 생성되고 콘텐츠 및 작성자 열이 추가됩니다.

마지막으로 마이그레이션을 생성하려면 다음 명령을 실행합니다.

 php artisan migrate

3. 모델 생성

Laravel에서 모델은 중요합니다. 모델은 데이터베이스와 통신하고 데이터 관리를 처리하는 가장 확실한 방법입니다.

Laravel에서 모델을 생성하기 위해 다음 명령을 실행합니다:

 php artisan make:model Comment

다음으로, app/models/Comment.php 파일을 열고 다음 코드를 붙여넣습니다.

 <?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']; } $fillable 배열을 사용하면 대량으로 모델을 만들고 업데이트할 수 있습니다.

4. 컨트롤러 생성

컨트롤러는 애플리케이션의 모든 논리, 비즈니스 및 기타 요소를 포함하므로 중요하므로 주석 논리를 처리하는 컨트롤러를 만들어 보겠습니다.

 php artisan make:controller CommentController

그런 다음 app/Http/Controllers/CommentController.php 파일을 열고 다음 코드를 붙여넣습니다.

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

컨트롤러에는 주석 보기를 반환하고, 모든 주석을 가져오고, 새 주석을 저장하는 세 가지 방법이 있습니다. 가장 중요한 것은 새 댓글을 저장할 때마다 이벤트를 시작한다는 것입니다. 이 이벤트는 프론트엔드가 Pusher와 Laravel Echo를 사용하여 실시간으로 새 댓글로 관련 페이지를 업데이트하기 위해 수신 대기합니다.

5. 경로 생성

경로를 올바르게 구성하려면 많은 파일을 업데이트해야 하므로 시작하겠습니다.

먼저 route 폴더에 있는 api.php 파일을 업데이트합니다. 파일을 열고 다음 코드를 추가합니다.

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

다음으로 같은 폴더에 있는 channels.php 파일을 열고 다음 코드를 추가하여 이전에 실행한 이벤트를 승인합니다.

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

다음으로 동일한 폴더에서 web.php 파일을 열고 다음 코드를 추가하여 요청을 Vue.js가 선택하는 홈페이지로 리디렉션합니다.

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

마지막으로 resources/views 폴더 에 comments.blade.php 라는 새 블레이드 파일을 만들고 다음 코드를 추가합니다.

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

스크립트는 게시물 제목과 Vue 구성 요소를 추가하여 위에서 만든 게시물 제목에 새 댓글을 표시하고 추가합니다.

다음 명령을 실행하여 모든 항목이 올바르게 표시되는지 테스트합니다.

 npm run watch php artisan serve

이 페이지가 표시되면 이 문서의 다음 단계로 이동할 준비가 된 것입니다.

6. Vue 설정(프론트엔드)

이 게시물에 대한 모든 댓글을 만들고 표시하기 위해 Vue 인스턴스를 만들고 설정합니다.

Vuex 스토어 설정부터 시작하겠습니다. resource/js/store 폴더에 다음 파일을 생성합니다.

댓글 상태 만들기

actions.js를 만들고 다음 코드를 추가합니다.

 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;

작업 파일은 백엔드의 주석 끝점을 호출합니다.

다음으로 getters.js 파일을 만들고 다음 코드를 추가합니다.

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

Getter 파일은 상태의 모든 주석을 검색하는 데 사용됩니다.

mutations.js 파일을 만들고 다음 코드에 붙여넣습니다.

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

다음으로 state.js 파일을 만들고 다음 코드에 붙여넣습니다.

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

마지막으로 Vue 인스턴스로 내보낸 index.js 파일에 모든 것을 추가하고 index.js 파일을 만들고 다음을 추가합니다.

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

구성 요소 생성

마지막으로 새 주석을 표시하고 추가할 주석 구성 요소를 만들 것입니다. 단일 주석 구성 요소를 만드는 것으로 시작하겠습니다.

resource/js 폴더에 components라는 폴더를 만들고 comment.vue 를 추가하고 다음 코드를 추가합니다.

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

다음으로 같은 폴더에 comments.vue 라는 다음 파일을 만들고 다음 코드를 추가합니다.

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

마지막으로 NewComment.vue 라는 파일을 만들고 다음 코드를 추가합니다.

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

이제 app.js 파일을 열고 다음 코드를 추가하여 이전에 만든 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 });

요약

그리고 그게 다야! Laravel을 사용하여 사이트에 대한 실시간 댓글 시스템을 구축하는 방법을 방금 배웠습니다.

커뮤니티나 블로그에서 신뢰를 구축하기 위해 댓글 시스템을 만들고 관리하는 것의 이점에 대해 논의했습니다. 또한 다양한 댓글 기능을 활용하여 처음부터 잘 설계된 실시간 댓글 시스템을 개발하는 방법을 탐구했습니다.

이 Github 저장소에서 이 프로젝트의 소스 코드를 복제할 수 있습니다.

우리가 함께 구축한 라라벨 라이브 댓글 시스템에 대해 어떻게 생각하시나요? 댓글로 알려주세요!