Construya un sistema de comentarios en vivo de Laravel

Para generar confianza en su comunidad en línea o blog, un elemento crucial que querrá es un sistema de comentarios en vivo de Laravel bien diseñado.

Sin embargo, no es fácil hacerlo bien en el primer intento a menos que confíe en los sistemas de comentarios autohospedados como Disqus o Commento, cada uno de los cuales viene con su propio conjunto de desventajas. Poseen sus datos, ofrecen diseños y personalizaciones limitados y, lo que es más importante, no son gratuitos.

Con estas limitaciones, si le atrae la idea de crear su sistema de comentarios en tiempo real, con los beneficios de controlar sus datos, diseñar y personalizar la apariencia para que encaje en su blog, siga leyendo.

Este artículo le enseñará cómo desarrollar un sistema de comentarios bien diseñado y en tiempo real con diferentes funcionalidades de comentarios. Siguiendo los principios de creación de una aplicación de chat en tiempo real con Vue.js y Socket.io, usaremos Laravel, Pusher y React para desarrollar el sistema de comentarios en tiempo real.

¡Vamos a sumergirnos!

Lo que construiremos

Construiremos un sistema de comentarios en tiempo real que se puede integrar en cualquier sitio web o blog para generar confianza en la comunidad.

Descripción general de los bloques de construcción: Laravel, Pusher y Vue

Antes de sumergirnos en el desarrollo, analicemos las tecnologías que usaremos para desarrollar nuestro sistema de comentarios en tiempo real.

Laravel

Laravel es un framework PHP de código abierto orientado a MVC. Se utiliza para construir aplicaciones web PHP simples a complejas conocidas por su elegante sintaxis. Aprender qué es Laravel es esencial para construir este sistema de comentarios.

Arribista

Pusher permite a los desarrolladores crear funciones en tiempo real a escala. Este artículo combinará Laravel Echo para crear un evento de transmisión en tiempo real al servidor Pusher y mostrar el contenido en la interfaz con Vue.js.

Vue.js

Vue.js es nuestro marco de interfaz de elección. Vue.js es un marco de frontend de JavaScript progresivo conocido por su enfoque directo y fácil de aprender para el desarrollo de frontend. Usaremos Vue.js para desarrollar nuestro sistema de comentarios en tiempo real.

Construyendo el sistema de comentarios

Si el sistema de comentarios que hemos descrito anteriormente suena como lo que desea, pasemos a desarrollarlo.

1. Instalar y configurar Laravel, Pusher y Echo

La instalación y configuración de Laravel, Echo y Pusher es sencilla, ya que Laravel ha realizado todas las tareas en segundo plano instalando y configurando Laravel Echo para que funcione perfectamente con Pusher.

En primer lugar, comenzaremos instalando y configurando Laravel, nuestro marco PHP backend. Puede obtener una nueva instancia de Laravel con este comando, siempre que haya instalado la CLI de Laravel globalmente:

 laravel new commenter

Su nueva instancia de Laravel se instalará en una carpeta llamada comentarista. Abramos la carpeta en nuestro VSCode y naveguemos hasta ella en nuestra terminal:

 cd commenter code .

Antes de iniciar nuestro servidor de desarrollo, instalemos y configuremos algunos paquetes necesarios que se utilizarán para el proyecto.

Ejecute este comando para instalar Pusher PHP SDK:

 composer require pusher/pusher-php-server

Ejecute este comando para instalar los paquetes NPM necesarios para la interfaz de Vue.js:

 npm install --save laravel-echo pusher-js

A continuación, configuraremos Laravel Echo and Pusher. Abra su archivo resources/js/bootstrap.js y pegue los siguientes scripts:

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

Notará en la secuencia de comandos anterior que solo estamos configurando la instancia de Axios con nuestras configuraciones predeterminadas. A continuación, configuraremos Laravel Echo para usar Pusher y sus configuraciones.

2. Configuración y migración de la base de datos

A continuación, vamos a crear y configurar nuestra base de datos para almacenar los comentarios para la persistencia. Usaremos SQLite, aunque puede usar cualquier cliente de base de datos de su elección.

Cree un archivo database.sqlite dentro de la carpeta de la base de datos y actualice su archivo .env de la siguiente manera:

 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=

A continuación, ejecute este comando para crear la migración de comentarios y actualícela con los siguientes scripts:

 php artisan make:migration create_comments_table

Abra el archivo base de datos/migraciones/xxxx_create_comments_table_xxxx.php y pegue este código:

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

Esto creará una nueva tabla de base de datos de comentarios y agregará contenido y columnas de autor.

Finalmente, para crear la migración, ejecute este comando:

 php artisan migrate

3. Creación de modelos

En Laravel, los modelos son significativos: son la forma más segura de comunicarse con nuestra base de datos y manejar la administración de datos.

Para crear un modelo en Laravel, ejecutaremos el siguiente comando:

 php artisan make:model Comment

A continuación, abra el archivo app/models/Comment.php y pegue el siguiente código:

 <?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']; } La matriz $fillable nos permite crear y actualizar el modelo en masa.

4. Creando Controladores

Los controladores son cruciales porque albergan toda la lógica, el negocio y demás de nuestras aplicaciones, así que vamos a crear uno para manejar la lógica de comentarios:

 php artisan make:controller CommentController

A continuación, abra el archivo app/Http/Controllers/CommentController.php y pegue el siguiente código:

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

El controlador tiene tres métodos diferentes: devolver una vista de comentarios, obtener todos los comentarios y almacenar un nuevo comentario, respectivamente. Lo más importante es que activamos un evento cada vez que almacenamos un nuevo comentario, que la interfaz escuchará para actualizar la página relevante con el nuevo comentario en tiempo real usando Pusher y Laravel Echo.

5. Creación de rutas

Para configurar nuestras rutas correctamente, necesitaremos actualizar muchos archivos, así que comencemos.

En primer lugar, vamos a actualizar el archivo api.php en la carpeta de rutas. Abra el archivo y agregue el siguiente código:

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

A continuación, abra el archivochannels.php en la misma carpeta y agregue el siguiente código para autorizar el evento que activamos anteriormente:

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

A continuación, abra el archivo web.php en la misma carpeta y agregue el siguiente código para redirigir nuestra solicitud a la página de inicio, donde Vue.js la recogerá:

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

Por último, crearemos un nuevo archivo blade en la carpeta de recursos/vistas llamado comments.blade.php y agregaremos el siguiente código:

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

El script agrega un título de publicación y un componente Vue para mostrar y agregar nuevos comentarios al título de publicación creado anteriormente.

Ejecute los siguientes comandos para probar si obtiene todo correctamente:

 npm run watch php artisan serve

Si se le presenta esta página, está listo para pasar al siguiente paso de este artículo.

6. Configuración de Vue (interfaz)

Crearemos y configuraremos nuestra instancia de Vue para crear y mostrar todos los comentarios realizados en esta publicación.

Comenzaremos con la configuración de nuestra tienda Vuex. Cree los siguientes archivos en la carpeta resource/js/store.

Crear estado de comentario

Cree actions.js y agregue el siguiente código:

 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;

El archivo de acción realiza una llamada al extremo del comentario en el backend.

A continuación, cree un archivo getters.js y agregue el siguiente código:

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

El archivo Getter se usa para recuperar todos los comentarios en el estado.

Cree el archivo mutaciones.js y péguelo en el siguiente código:

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

A continuación, cree un archivo state.js y péguelo en el siguiente código:

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

Por último, agregaremos todo al archivo index.js exportado a la instancia de Vue, crearemos un archivo index.js y agregaremos lo siguiente:

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

Crear componentes

Por último, vamos a crear nuestros componentes de comentarios para mostrar y agregar nuevos comentarios. Comencemos por crear el componente de comentario único.

Cree una carpeta en la carpeta resource/js llamada components, agregue comment.vue y agregue el siguiente código:

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

A continuación, cree el siguiente archivo llamado comments.vue en la misma carpeta y agregue el siguiente código:

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

Por último, cree un archivo llamado NewComment.vue y agregue el siguiente código:

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

Ahora, abra el archivo app.js y agregue el siguiente código para registrar los componentes de Vue que creó anteriormente:

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

Resumen

¡Y eso es! Acabas de aprender cómo construir un sistema de comentarios en vivo para tu sitio usando Laravel.

Hemos discutido los beneficios de crear y administrar un sistema de comentarios en su búsqueda para generar confianza en su comunidad o blog. También hemos explorado cómo desarrollar un sistema de comentarios bien diseñado y en tiempo real desde cero, utilizando diferentes funcionalidades de comentarios.

Puede clonar el código fuente de este proyecto en este repositorio de Github.

¿Qué opinas del sistema de comentarios en vivo de Laravel que hemos creado juntos? ¡Cuéntanos en los comentarios!