สร้างระบบแสดงความคิดเห็น Laravel Live

เพื่อสร้างความไว้วางใจในชุมชนออนไลน์หรือบล็อกของคุณ องค์ประกอบสำคัญอย่างหนึ่งที่คุณต้องการคือระบบการแสดงความคิดเห็นแบบสดของ Laravel ที่ออกแบบมาอย่างดี

อย่างไรก็ตาม การทำให้ถูกต้องในการลองครั้งแรกไม่ใช่เรื่องง่าย เว้นแต่คุณจะพึ่งพาระบบการแสดงความคิดเห็นที่โฮสต์เอง เช่น Disqus หรือ Commento ซึ่งแต่ละส่วนมีข้อเสียต่างกันไป พวกเขาเป็นเจ้าของข้อมูลของคุณ เสนอการออกแบบและการปรับแต่งที่จำกัด และที่สำคัญที่สุดคือ มันไม่ฟรี

ด้วยข้อจำกัดเหล่านี้ หากแนวคิดในการสร้างระบบการแสดงความคิดเห็นตามเวลาจริง พร้อมประโยชน์ของการควบคุมข้อมูล การออกแบบและปรับแต่งรูปลักษณ์ให้เข้ากับบล็อกของคุณ น่าสนใจ โปรดอ่านต่อไป

บทความนี้จะสอนวิธีพัฒนาระบบแสดงความคิดเห็นแบบเรียลไทม์ที่ออกแบบมาอย่างดีพร้อมฟังก์ชันการแสดงความคิดเห็นที่แตกต่างกัน ตามหลักการสร้างแอปพลิเคชันแชทแบบเรียลไทม์ด้วย Vue.js และ Socket.io เราจะใช้ Laravel, Pusher และ React เพื่อพัฒนาระบบการแสดงความคิดเห็นแบบเรียลไทม์

มาดำน้ำกันเถอะ!

สิ่งที่เราจะสร้าง

เราจะสร้างระบบแสดงความคิดเห็นแบบเรียลไทม์ที่สามารถรวมเข้ากับเว็บไซต์หรือบล็อกใดๆ ก็ได้เพื่อสร้างความไว้วางใจในชุมชน

ภาพรวมการสร้างบล็อค: Laravel, Pusher และ Vue

ก่อนที่เราจะเจาะลึกลงไปในการพัฒนา เรามาพูดถึงเทคโนโลยีที่เราจะใช้ในการพัฒนาระบบแสดงความคิดเห็นแบบเรียลไทม์กันก่อน

Laravel

Laravel เป็นเฟรมเวิร์ก PHP แบบโอเพ่นซอร์ส MVC ใช้เพื่อสร้างเว็บแอปพลิเคชัน PHP ที่เรียบง่ายและซับซ้อนซึ่งเป็นที่รู้จักจากไวยากรณ์ที่สวยงาม เรียนรู้ว่า Laravel มีความสำคัญต่อการสร้างระบบแสดงความคิดเห็นอย่างไร

พุชเชอร์

Pusher ช่วยให้นักพัฒนาสามารถสร้างคุณสมบัติตามเวลาจริงได้ในวงกว้าง บทความนี้จะรวม Laravel Echo เพื่อสร้างเหตุการณ์ออกอากาศตามเวลาจริงไปยังเซิร์ฟเวอร์ Pusher และแสดงเนื้อหาที่ส่วนหน้าด้วย Vue.js

Vue.js

Vue.js เป็นเฟรมเวิร์กส่วนหน้าที่เราเลือกใช้ Vue.js เป็นเฟรมเวิร์กส่วนหน้าของ JavaScript แบบก้าวหน้าซึ่งเป็นที่รู้จักจากวิธีการที่เรียนรู้ได้ง่ายและตรงไปตรงมาในการพัฒนาส่วนหน้า เราจะใช้ Vue.js เพื่อพัฒนาระบบแสดงความคิดเห็นแบบเรียลไทม์

การสร้างระบบแสดงความคิดเห็น

หากระบบการแสดงความคิดเห็นที่เราได้สรุปไว้ข้างต้นฟังดูคล้ายกับที่คุณต้องการ มาเริ่มกันเลยดีกว่า

1. ติดตั้งและตั้งค่า Laravel, Pusher และ Echo

การติดตั้งและตั้งค่า Laravel, Echo และ Pusher นั้นตรงไปตรงมา เนื่องจาก Laravel ทำงานเบื้องหลังทั้งหมดโดยการตั้งค่าและกำหนดค่า Laravel Echo ให้ทำงานกับ Pusher ได้อย่างสมบูรณ์แบบ

อันดับแรก เราจะเริ่มต้นด้วยการติดตั้งและกำหนดค่า Laravel ซึ่งเป็นเฟรมเวิร์ก PHP แบ็กเอนด์ของเรา คุณสามารถคว้าอินสแตนซ์ใหม่ของ Laravel ด้วยคำสั่งนี้ หากคุณได้ติดตั้ง Laravel CLI ทั่วโลก:

 laravel new commenter

อินสแตนซ์ Laravel ใหม่ของคุณจะถูกติดตั้งในโฟลเดอร์ชื่อผู้แสดงความคิดเห็น มาเปิดโฟลเดอร์ใน VSCode ของเราแล้วไปที่มันในเทอร์มินัลของเรา:

 cd commenter code .

ก่อนที่เราจะเริ่มเซิร์ฟเวอร์การพัฒนา เรามาติดตั้งและกำหนดค่าแพ็คเกจที่จำเป็นบางอย่างที่จะใช้สำหรับโครงการก่อน

เรียกใช้คำสั่งนี้เพื่อติดตั้ง Pusher PHP SDK:

 composer require pusher/pusher-php-server

รันคำสั่งนี้เพื่อติดตั้งแพ็คเกจ NPM ที่จำเป็นสำหรับฟรอนต์เอนด์ Vue.js:

 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 ด้วยการกำหนดค่าเริ่มต้นของเรา ต่อไป เราจะกำหนดค่า Laravel Echo ให้ใช้ Pusher และการกำหนดค่าต่างๆ

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

เปิดไฟล์ ฐานข้อมูล/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. การสร้างเส้นทาง

ในการกำหนดค่าเส้นทางของเราอย่างถูกต้อง เราจำเป็นต้องอัปเดตไฟล์จำนวนมาก มาเริ่มกันเลย

ประการแรก เราจะอัปเดตไฟล์ api.php ในโฟลเดอร์เส้นทาง เปิดไฟล์และเพิ่มรหัสต่อไปนี้:

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

ถัดไป เปิดไฟล์ channel.php ในโฟลเดอร์เดียวกันและเพิ่มรหัสต่อไปนี้เพื่ออนุญาตเหตุการณ์ที่เราดำเนินการไปก่อนหน้านี้:

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

ถัดไป เปิดไฟล์ web.php ในโฟลเดอร์เดียวกันและเพิ่มรหัสต่อไปนี้เพื่อเปลี่ยนเส้นทางคำขอของเราไปยังหน้าแรก โดยที่ Vue.js จะรับมัน:

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

สุดท้าย เราจะสร้างไฟล์เบลดใหม่ในโฟลเดอร์ ทรัพยากร/มุมมอง ที่เรียกว่า 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;

สุดท้าย เราจะเพิ่มทุกอย่างลงในไฟล์ index.js ที่ส่งออกไปยังอินสแตนซ์ Vue สร้างไฟล์ 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 });

สร้างส่วนประกอบ

สุดท้ายนี้ เราจะสร้างองค์ประกอบความคิดเห็นเพื่อแสดงและเพิ่มความคิดเห็นใหม่ เริ่มต้นด้วยการสร้างองค์ประกอบความคิดเห็นเดียว

สร้างโฟลเดอร์ในโฟลเดอร์ ทรัพยากร/js ที่เรียกว่าส่วนประกอบ เพิ่ม 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

เราได้พูดถึงประโยชน์ของการสร้างและจัดการระบบแสดงความคิดเห็นในการแสวงหาความเชื่อถือในชุมชนหรือบล็อกของคุณ เรายังได้สำรวจวิธีพัฒนาระบบแสดงความคิดเห็นแบบเรียลไทม์ที่ออกแบบมาอย่างดีตั้งแต่เริ่มต้น โดยใช้ฟังก์ชันการแสดงความคิดเห็นที่แตกต่างกัน

คุณสามารถโคลนซอร์สโค้ดของโปรเจ็กต์นี้ได้ใน repo Github นี้

คุณคิดอย่างไรกับระบบแสดงความคิดเห็นแบบสดของ Laravel ที่เราสร้างขึ้นร่วมกัน แจ้งให้เราทราบในความคิดเห็น!