{"id":44048,"date":"2021-09-24T15:54:59","date_gmt":"2021-09-24T13:54:59","guid":{"rendered":"https:\/\/kinsta.com\/?p=100639"},"modified":"2025-02-07T15:08:01","modified_gmt":"2025-02-07T14:08:01","slug":"comentarios-de-laravel","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/","title":{"rendered":"Construye un Sistema de Comentarios en Tiempo Real en Laravel"},"content":{"rendered":"

Para crear confianza en tu comunidad en l\u00ednea o blog, un elemento crucial que querr\u00e1s tener es un sistema de comentarios en tiempo real de Laravel bien dise\u00f1ado.<\/p>\n

Sin embargo, no es f\u00e1cil hacerlo bien a la primera, a menos que conf\u00edes en sistemas de comentarios autoalojados como Disqus<\/a> o Commento, cada uno de los cuales viene con su propio conjunto de desventajas. Son due\u00f1os de tus datos, ofrecen dise\u00f1os y personalizaciones limitadas y, lo m\u00e1s importante, no son gratuitos.<\/p>\n

Con estas limitaciones, si tienes la idea de construir tu sistema de comentarios en tiempo real – con las ventajas de controlar tus datos, dise\u00f1ar y personalizar el aspecto para que encaje en tu blog – te atrae, sigue leyendo.<\/p>\n

Este art\u00edculo te ense\u00f1ar\u00e1 a desarrollar un sistema de comentarios en tiempo real bien dise\u00f1ado y con diferentes funcionalidades de comentarios. Siguiendo los principios de la construcci\u00f3n de una aplicaci\u00f3n de chat en tiempo real con Vue.js y Socket.io<\/a>, utilizaremos Laravel, Pusher y React para desarrollar el sistema de comentarios en tiempo real.<\/p>\n

Vamos a sumergirnos.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Qu\u00e9 vamos a construir<\/h2>\n

Construiremos un sistema de comentarios en tiempo real<\/a> que pueda integrarse en cualquier sitio web o blog para generar confianza en la comunidad.<\/p>\n\n

Visi\u00f3n general de los bloques de construcci\u00f3n: Laravel, Pusher y Vue<\/h2>\n

Antes de sumergirnos en el desarrollo, vamos a hablar de las tecnolog\u00edas que utilizaremos para desarrollar nuestro sistema de comentarios en tiempo real.<\/p>\n

Laravel<\/h3>\n

Laravel<\/a> es un framework PHP orientado a MVC de c\u00f3digo abierto. Se utiliza para construir aplicaciones web PHP simples a complejas conocidas por su elegante sintaxis. Aprender qu\u00e9 es Laravel<\/a> es esencial para construir este sistema de comentarios.<\/p>\n

Pusher<\/h3>\n

Pusher<\/a> permite a los desarrolladores crear funciones en tiempo real a escala. Este art\u00edculo combinar\u00e1 Laravel Echo<\/a> para crear un evento de difusi\u00f3n en tiempo real al servidor Pusher y mostrar el contenido en el frontend con Vue.js.<\/p>\n

Vue.js<\/h3>\n

Vue.js<\/a> es nuestro marco de trabajo de frontend de elecci\u00f3n. Vue.js es un marco de trabajo progresivo de JavaScript conocido por su enfoque sencillo y f\u00e1cil de aprender para el desarrollo de frontend. Utilizaremos Vue.js para desarrollar nuestro sistema de comentarios en tiempo real.<\/p>\n

Construir el sistema de comentarios<\/h2>\n

Si el sistema de comentarios que hemos esbozado anteriormente se parece a lo que quieres, pasemos a construirlo.<\/p>\n

1. Instalar y configurar Laravel, Pusher y Echo<\/h3>\n

La instalaci\u00f3n y configuraci\u00f3n de Laravel, Echo y Pusher es sencilla, ya que Laravel ha realizado todas las tareas de fondo configurando Laravel Echo para que funcione perfectamente con Pusher.<\/p>\n

En primer lugar, vamos a empezar por instalar y configurar Laravel, nuestro framework PHP<\/a> backend. Puedes obtener una nueva instancia de Laravel con este comando, siempre que hayas instalado la CLI de Laravel<\/a> de forma global:<\/p>\n

laravel new commenter<\/code><\/pre>\n
Tu nueva instancia de Laravel se instalar\u00e1 en una carpeta llamada commenter. Abremos la carpeta en nuestro VSCode<\/a> y naveguemos hasta ella en nuestro terminal:<\/p>\n
cd commenter\n\ncode .<\/code><\/pre>\n
Antes de iniciar nuestro servidor de desarrollo, vamos a instalar y configurar algunos paquetes necesarios que se utilizar\u00e1n para el proyecto.<\/p>\n
Ejecute este comando para instalar el SDK PHP de Pusher:<\/p>\n
composer require pusher\/pusher-php-server<\/code><\/pre>\n
Ejecuta este comando para instalar los paquetes NPM necesarios para el frontend de Vue.js:<\/p>\n
npm install --save laravel-echo pusher-js<\/code><\/pre>\n
A continuaci\u00f3n, configuraremos Laravel Echo y Pusher. Abre tu archivo resources\/js\/bootstrap.js <\/strong>y pega los siguientes scripts:<\/p>\n
window._ = require(\"lodash\");\nwindow.axios = require(\"axios\");\nwindow.moment = require(\"moment\");\nwindow.axios.defaults.headers.common[\"X-Requested-With\"] = \"XMLHttpRequest\";\nwindow.axios.defaults.headers.post[\"Content-Type\"] =\n    \"application\/x-www-form-urlencoded\";\nwindow.axios.defaults.headers.common.crossDomain = true;\nwindow.axios.defaults.baseURL = \"\/api\";\nlet token = document.head.querySelector('meta[name=\"csrf-token\"]');\nif (token) {\n    window.axios.defaults.headers.common[\"X-CSRF-TOKEN\"] = token.content;\n} else {\n    console.error(\"CSRF token not found\");\n}\n\n\n\/**\n * Echo exposes an expressive API for subscribing to channels and listening\n * for events that Laravel broadcasts. Echo and event broadcasting\n * allows your team to build robust real-time web applications quickly.\n *\/\nimport Echo from \"laravel-echo\";\nwindow.Pusher = require(\"pusher-js\");\nwindow.Echo = new Echo({\n    broadcaster: \"pusher\",\n    key: process.env.MIX_PUSHER_APP_KEY,\n    cluster: process.env.MIX_PUSHER_APP_CLUSTER,\n    forceTLS: true\n});<\/code><\/pre>\n
Notar\u00e1s en el script anterior que solo estamos configurando la instancia de Axios con nuestras configuraciones por defecto. A continuaci\u00f3n, configuraremos Laravel Echo para usar Pusher y sus configuraciones.<\/p>\n
2. Configuraci\u00f3n y migraci\u00f3n de la base de datos<\/h3>\n
A continuaci\u00f3n, vamos a crear y configurar nuestra base de datos para almacenar los comentarios para su conservaci\u00f3n. Usaremos SQLite, aunque puedes usar cualquier cliente de base de datos de tu elecci\u00f3n.<\/p>\n
Crea un archivo database.sqlite <\/strong>dentro de la carpeta de la base de datos y actualiza tu archivo .env <\/strong>como sigue:<\/p>\n
DB_CONNECTION=sqlite\nDB_DATABASE=\/Users\/all\/paths\/to\/project\/commenter_be\/database\/database.sqlite\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\n
A continuaci\u00f3n, ejecute este comando para crear la migraci\u00f3n de comentarios y actualizarla con los siguientes scripts:<\/p>\n
php artisan make:migration create_comments_table<\/code><\/pre>\n
Abre el archivo database\/migrations\/xxxx_create_comments_table_xxxx.php <\/strong>y pega este c\u00f3digo:<\/p>\n
<?php\nuse Illuminate\\Database\\Migrations\\Migration;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Support\\Facades\\Schema;\nclass CreateCommentsTable extends Migration\n{\n    \/**\n     * Run the migrations.\n     *\n     * @return void\n     *\/\n    public function up()\n    {\n        Schema::create('comments', function (Blueprint $table) {\n            $table->id();\n            $table->string('content');\n            $table->string('author');\n            $table->timestamps();\n        });\n    }\n    \/**\n     * Reverse the migrations.\n     *\n     * @return void\n     *\/\n    public function down()\n    {\n        Schema::dropIfExists('comments');\n    }\n}<\/code><\/pre>\n
Esto crear\u00e1 una nueva tabla de base de datos de comentarios y a\u00f1adir\u00e1 columnas de contenido y autor.<\/p>\n
Por \u00faltimo, para crear la migraci\u00f3n, ejecuta este comando:<\/p>\n
php artisan migrate<\/code><\/pre>\n
3. Creaci\u00f3n de modelos<\/h3>\n
En Laravel, los modelos son significativos – son la forma m\u00e1s segura de comunicarnos con nuestra base de datos y manejar la gesti\u00f3n de datos.<\/p>\n
Para crear un modelo en Laravel, ejecutaremos el siguiente comando:<\/p>\n
php artisan make:model Comment<\/code><\/pre>\n
A continuaci\u00f3n, abre el archivo app\/models\/Comment.php <\/strong>y pega el siguiente c\u00f3digo:<\/p>\n
<?php\nnamespace App\\Models;\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Database\\Eloquent\\Model;\nclass Comment extends Model\n{\n    use HasFactory;\n    protected $fillable = ['content', 'author'];\n}\n\n<\/code>The $fillable array allows us to create and update the model in mass.<\/pre>\n
4. Creaci\u00f3n de controladores<\/h3>\n
Los controladores son cruciales porque albergan toda la l\u00f3gica, de negocio y dem\u00e1s, de nuestras aplicaciones, as\u00ed que vamos a crear uno para manejar la l\u00f3gica de los comentarios:<\/p>\n
php artisan make:controller CommentController<\/code><\/pre>\n
A continuaci\u00f3n, abre el archivo app\/Http\/Controllers\/CommentController.php <\/strong>y pega el siguiente c\u00f3digo:<\/p>\n
<?php\nnamespace App\\Http\\Controllers;\nuse App\\Models\\Comment;\nuse App\\Events\\CommentEvent;\nuse Illuminate\\Http\\Request;\n\nclass CommentController extends Controller\n{\n    \/\/\n    public function index()\n    {\n        return view('comments');\n    }\n    public function fetchComments()\n    {\n        $comments = Comment::all();\n        return response()->json($comments);\n    }\n    public function store(Request $request)\n    {\n        $comment = Comment::create($request->all());\n        event(new CommentEvent($comment));\n        return $comment;\n    }\n}<\/code><\/pre>\n
El controlador tiene tres m\u00e9todos diferentes: devolver una vista de comentarios, obtener todos los comentarios y almacenar un nuevo comentario, respectivamente. Lo m\u00e1s importante es que disparamos un evento cada vez que almacenamos un nuevo comentario, que el frontend escuchar\u00e1 para actualizar la p\u00e1gina correspondiente con el nuevo comentario en tiempo real utilizando Pusher y Laravel Echo.<\/p>\n
5. Creaci\u00f3n de rutas<\/h3>\n
Para configurar nuestras rutas correctamente, tendremos que actualizar muchos archivos<\/a>, as\u00ed que vamos a empezar.<\/p>\n
En primer lugar, vamos a actualizar el archivo api.php <\/strong>en la carpeta de rutas. Abre el archivo y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n
use App\\Http\\Controllers\\CommentController;\n\/\/...\n\nRoute::get('\/', [CommentController::class, 'index']);\nRoute::get('\/comments', [CommentController::class, 'fetchComments']);\nRoute::post('\/comments', [CommentController::class, 'store']);<\/code><\/pre>\n
A continuaci\u00f3n, abre el archivo channels.php <\/strong>en la misma carpeta y a\u00f1ade el siguiente c\u00f3digo para autorizar el evento que hemos disparado antes:<\/p>\n
Broadcast::channel('comment', function ($user) {\n    return true;\n});<\/code><\/pre>\n
A continuaci\u00f3n, abre el archivo web.php <\/strong>en la misma carpeta y a\u00f1ade el siguiente c\u00f3digo para redirigir nuestra petici\u00f3n a la p\u00e1gina de inicio, donde Vue.js la recoger\u00e1:<\/p>\n
use App\\Http\\Controllers\\CommentController;\n\/\/...\n\nRoute::get('\/', [CommentController::class, 'index']);<\/code><\/pre>\n
Por \u00faltimo, crearemos un nuevo archivo blade en la carpeta resources\/views <\/strong>llamado comments.blade.php <\/strong>y a\u00f1adiremos el siguiente c\u00f3digo:<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <title>Commenter<\/title>\n    <meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n    <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">\n\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bulma\/0.7.1\/css\/bulma.min.css\" \/>\n    <style>\n        .container {\n            margin: 0 auto;\n            position: relative;\n            width: unset;\n        }\n        #app {\n            width: 60%;\n            margin: 4rem auto;\n        }\n        .question-wrapper {\n            text-align: center;\n        }\n    <\/style>\n<\/head>\n<body>\n\n\n    <div id=\"app\">\n        <div class=\"container\">\n            <div class=\"question-wrapper\">\n                <h5 class=\"is-size-2\" style=\"color: #220052;\">\n                    What do you think about <span style=\"color: #47b784;\">Dogs<\/span>?<\/h5>\n                <br>\n                <a href=\"#Form\" class=\"button is-medium has-shadow has-text-white\" style=\"background-color: #47b784\">Comment<\/a>\n            <\/div>\n            <br><br>\n            <comments><\/comments>\n            <new-comment><\/new-comment>\n        <\/div>\n    <\/div>\n    <script async src=\"{{mix('js\/app.js')}}\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
El script a\u00f1ade un t\u00edtulo de entrada y un componente Vue para mostrar y a\u00f1adir nuevos comentarios al t\u00edtulo de entrada creado anteriormente.<\/p>\n
Ejecuta los siguientes comandos para comprobar si todo est\u00e1 bien:<\/p>\n
npm run watch\n\nphp artisan serve<\/code><\/pre>\n
Si aparece esta p\u00e1gina, est\u00e1s listo para pasar al siguiente paso de este art\u00edculo.<\/p>\n
\"Sistema
Sistema de comentarios en tiempo real de Laravel<\/figcaption><\/figure>\n
6. Configuraci\u00f3n de Vue (Frontend)<\/h3>\n
Crearemos y configuraremos nuestra instancia Vue para crear y mostrar todos los comentarios realizados en este post<\/a>.<\/p>\n
Comenzaremos con la configuraci\u00f3n de nuestra tienda Vuex. Crea los siguientes archivos en la carpeta resource\/js\/store.<\/p>\n
Crear estado de comentarios<\/h4>\n
Crea actions.js y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n
let actions = {\n    ADD_COMMENT({ commit }, comment) {\n        return new Promise((resolve, reject) => {\n            axios\n                .post(`\/comments`, comment)\n                .then(response => {\n                    resolve(response);\n                })\n                .catch(err => {\n                    reject(err);\n                });\n        });\n    },\n    GET_COMMENTS({ commit }) {\n        axios\n            .get(\"\/comments\")\n            .then(res => {\n                {\n                    commit(\"GET_COMMENTS\", res.data);\n                }\n            })\n            .catch(err => {\n                console.log(err);\n            });\n    }\n};\nexport default actions;<\/code><\/pre>\n
El archivo de acci\u00f3n hace una llamada al punto final de comentarios en el backend.<\/p>\n
A continuaci\u00f3n, crea un archivo getters.js y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n
let getters = {\n    comments: state => {\n        return state.comments;\n    }\n};\nexport default getters;<\/code><\/pre>\n
El archivo Getter se utiliza para recuperar todos los comentarios del estado.<\/p>\n
Crea el archivo mutations.js y p\u00e9galo en el siguiente c\u00f3digo:<\/p>\n
let mutations = {\n    GET_COMMENTS(state, comments) {\n        state.comments = comments;\n    },\n    ADD_COMMENT(state, comment) {\n        state.comments = [...state.comments, comment];\n    }\n};\nexport default mutations;<\/code><\/pre>\n
A continuaci\u00f3n, crea un archivo state.js y p\u00e9galo en el siguiente c\u00f3digo:<\/p>\n
let state = {\n    comments: []\n};\nexport default state;<\/code><\/pre>\n
Por \u00faltimo, a\u00f1adiremos todo al archivo index.js exportado a la instancia de Vue, crearemos un archivo index.js y a\u00f1adiremos lo siguiente:<\/p>\n
import Vue from \"vue\";\nimport Vuex from \"vuex\";\nimport actions from \".\/actions\";\nimport mutations from \".\/mutations\";\nimport getters from \".\/getters\";\nimport state from \".\/state\";\nVue.use(Vuex);\nexport default new Vuex.Store({\n    state,\n    mutations,\n    getters,\n    actions\n});<\/code><\/pre>\n
Crear componentes<\/h4>\n
Por \u00faltimo, vamos a crear nuestros componentes de comentarios para mostrar y a\u00f1adir nuevos comentarios. Empecemos por crear el componente de comentario \u00fanico.<\/p>\n
Crea una carpeta en la carpeta resource\/js <\/strong>llamada components, a\u00f1ade el comment.vue <\/strong>y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n
<template>\n  <li class=\"comment-wrapper animate slideInLeft\">\n    <div class=\"profile\">\n    <\/div>\n    <div class=\"msg has-shadow\">\n      <div class=\"msg-body\">\n        <p class=\"name\">\n          {{ comment.author }} <span class=\"date\">{{ posted_at }}<\/span>\n        <\/p>\n        <p class=\"content\">{{ comment.content }}<\/p>\n      <\/div>\n    <\/div>\n  <\/li>\n<\/template>\n    \n    <script>\nexport default {\n  name: \"Comment\",\n  props: [\"comment\"],\n  computed: {\n    posted_at() {\n      return moment(this.comment.created_at).format(\"MMMM Do YYYY\");\n    },\n\n  },\n};\n<\/script>\n    \n    <style lang=\"scss\" scoped>\n.comment-wrapper {\n  list-style: none;\n  text-align: left;\n  overflow: hidden;\n  margin-bottom: 2em;\n  padding: 0.4em;\n  .profile {\n    width: 80px;\n    float: left;\n  }\n  .msg-body {\n    padding: 0.8em;\n    color: #666;\n    line-height: 1.5;\n  }\n  .msg {\n    width: 86%;\n    float: left;\n    background-color: #fff;\n    border-radius: 0 5px 5px 5px;\n    position: relative;\n    &::after {\n      content: \" \";\n      position: absolute;\n      left: -13px;\n      top: 0;\n      border: 14px solid transparent;\n      border-top-color: #fff;\n    }\n  }\n  .date {\n    float: right;\n  }\n  .name {\n    margin: 0;\n    color: #999;\n    font-weight: 700;\n    font-size: 0.8em;\n  }\n  p:last-child {\n    margin-top: 0.6em;\n    margin-bottom: 0;\n  }\n}\n<\/style><\/code><\/pre>\n
A continuaci\u00f3n, crea el siguiente archivo llamado comments.vue <\/strong>en la misma carpeta y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n
<template>\n  <div class=\"container\">\n    <ul class=\"comment-list\">\n      <Comment\n        :key=\"comment.id\"\n        v-for=\"comment in comments\"\n        :comment=\"comment\"\n      ><\/Comment>\n    <\/ul>\n  <\/div>\n<\/template>\n    \n    <script>\nimport { mapGetters } from \"vuex\";\nimport Comment from \".\/Comment\";\nexport default {\n  name: \"Comments\",\n  components: { Comment },\n  mounted() {\n    this.$store.dispatch(\"GET_COMMENTS\");\n    this.listen();\n  },\n  methods: {\n    listen() {\n      Echo.channel(\"comment\").listen(\"comment\", (e) => {\n        console.log(e);\n        this.$store.commit(\"ADD_COMMENT\", e);\n      });\n    },\n  },\n  computed: {\n    ...mapGetters([\"comments\"]),\n  },\n};\n<\/script>\n    \n    <style scoped>\n.comment-list {\n  padding: 1em 0;\n  margin-bottom: 15px;\n}\n<\/style><\/code><\/pre>\n
Por \u00faltimo, crea un archivo llamado NewComment.vue <\/strong>y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n
<template>\n  <div id=\"commentForm\" class=\"box has-shadow has-background-white\">\n    <form @keyup.enter=\"postComment\">\n      <div class=\"field has-margin-top\">\n        <div class=\"field has-margin-top\">\n          <label class=\"label\">Your name<\/label>\n          <div class=\"control\">\n            <input\n              type=\"text\"\n              placeholder=\"Your name\"\n              class=\"input is-medium\"\n              v-model=\"comment.author\"\n            \/>\n          <\/div>\n        <\/div>\n        <div class=\"field has-margin-top\">\n          <label class=\"label\">Your comment<\/label>\n          <div class=\"control\">\n            <textarea\n              style=\"height: 100px\"\n              name=\"comment\"\n              class=\"input is-medium\"\n              autocomplete=\"true\"\n              v-model=\"comment.content\"\n              placeholder=\"lorem ipsum\"\n            ><\/textarea>\n          <\/div>\n        <\/div>\n        <div class=\"control has-margin-top\">\n          <button\n            style=\"background-color: #47b784\"\n            :class=\"{ 'is-loading': submit }\"\n            class=\"button has-shadow is-medium has-text-white\"\n            :disabled=\"!isValid\"\n            @click.prevent=\"postComment\"\n            type=\"submit\"\n          >\n            Submit\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/form>\n    <br \/>\n  <\/div>\n<\/template>\n    \n    <script>\nexport default {\n  name: \"NewComment\",\n  data() {\n    return {\n      submit: false,\n      comment: {\n        content: \"\",\n        author: \"\",\n      },\n    };\n  },\n  methods: {\n    postComment() {\n      this.submit = true;\n      this.$store\n        .dispatch(\"ADD_COMMENT\", this.comment)\n        .then((response) => {\n          this.submit = false;\n          if (response.data) console.log(\"success\");\n        })\n        .catch((err) => {\n          console.log(err);\n          this.submit = false;\n        });\n    },\n  },\n  computed: {\n    isValid() {\n      return this.comment.content !== \"\" && this.comment.author !== \"\";\n    },\n  },\n};\n<\/script>\n    \n    <style scoped>\n.has-margin-top {\n  margin-top: 15px;\n}\n<\/style><\/code><\/pre>\n
Ahora, abre el archivo app.js <\/strong>y a\u00f1ade el siguiente c\u00f3digo para registrar los componentes Vue que creaste anteriormente:<\/p>\n
\/\/ resource\/js\/app.js\n\nrequire(\".\/bootstrap\");\nwindow.Vue = require(\"vue\");\nimport store from \".\/store\/index\";\n\nVue.component(\"comment\", require(\".\/components\/Comment\"));\nVue.component(\"comments\", require(\".\/components\/Comments\"));\nVue.component(\"new-comment\", require(\".\/components\/NewComment\"));\n\nconst app = new Vue({\n    el: \"#app\",\n    store\n});<\/code><\/pre>\n\n
Resumen<\/h2>\n
Y ya est\u00e1. Acabas de aprender c\u00f3mo construir un sistema de comentarios en tiempo real para tu sitio usando Laravel.<\/p>\n
Hemos hablado de las ventajas de crear y gestionar un sistema de comentarios en tu b\u00fasqueda de la confianza en tu comunidad o blog. Tambi\u00e9n hemos explorado c\u00f3mo desarrollar un sistema de comentarios bien dise\u00f1ado y en tiempo real desde el principio, utilizando diferentes funcionalidades de comentarios.<\/p>\n
Puedes clonar el c\u00f3digo fuente de este proyecto en este repositorio de Github<\/a>.<\/p>\n
\u00bfQu\u00e9 te parece el sistema de comentarios en vivo de Laravel que hemos construido juntos? \u00a1H\u00e1znoslo saber en los comentarios!<\/p>\n
\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"
Para crear confianza en tu comunidad en l\u00ednea o blog, un elemento crucial que querr\u00e1s tener es un sistema de comentarios en tiempo real de Laravel …<\/p>\n","protected":false},"author":193,"featured_media":44052,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[766,403],"topic":[1315,1303],"class_list":["post-44048","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-laravel","tag-web-development","topic-frameworks-php","topic-laravel"],"yoast_head":"\nConstruye un Sistema de Comentarios en Tiempo Real en Laravel<\/title>\n<meta name=\"description\" content=\"Aprende a utilizar Laravel para crear un sistema de comentarios en tiempo real que se puede integrar en cualquier sitio web o blog para generar confianza.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Construye un Sistema de Comentarios en Tiempo Real en Laravel\" \/>\n<meta property=\"og:description\" content=\"Aprende a utilizar Laravel para crear un sistema de comentarios en tiempo real que se puede integrar en cualquier sitio web o blog para generar confianza.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-24T13:54:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-07T14:08:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/laravel-comments.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Solomon Eseme\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende a utilizar Laravel para crear un sistema de comentarios en tiempo real que se puede integrar en cualquier sitio web o blog para generar confianza.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/laravel-comments.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kaperskyguru\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solomon Eseme\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"Construye un Sistema de Comentarios en Tiempo Real en Laravel\",\"datePublished\":\"2021-09-24T13:54:59+00:00\",\"dateModified\":\"2025-02-07T14:08:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/\"},\"wordCount\":1553,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/laravel-comments.jpeg\",\"keywords\":[\"laravel\",\"web development\"],\"articleSection\":[\"Desarrollo de WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/\",\"name\":\"Construye un Sistema de Comentarios en Tiempo Real en Laravel\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/laravel-comments.jpeg\",\"datePublished\":\"2021-09-24T13:54:59+00:00\",\"dateModified\":\"2025-02-07T14:08:01+00:00\",\"description\":\"Aprende a utilizar Laravel para crear un sistema de comentarios en tiempo real que se puede integrar en cualquier sitio web o blog para generar confianza.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/laravel-comments.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/laravel-comments.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Construir un sistema de comentarios en vivo de Laravel\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/laravel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Construye un Sistema de Comentarios en Tiempo Real en Laravel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\",\"name\":\"Solomon Eseme\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"caption\":\"Solomon Eseme\"},\"description\":\"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me\",\"sameAs\":[\"https:\/\/masteringbackend.com\",\"https:\/\/linkedin.com\/in\/solomoneseme\",\"https:\/\/x.com\/kaperskyguru\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/solomoneseme\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Construye un Sistema de Comentarios en Tiempo Real en Laravel","description":"Aprende a utilizar Laravel para crear un sistema de comentarios en tiempo real que se puede integrar en cualquier sitio web o blog para generar confianza.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/","og_locale":"es_ES","og_type":"article","og_title":"Construye un Sistema de Comentarios en Tiempo Real en Laravel","og_description":"Aprende a utilizar Laravel para crear un sistema de comentarios en tiempo real que se puede integrar en cualquier sitio web o blog para generar confianza.","og_url":"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2021-09-24T13:54:59+00:00","article_modified_time":"2025-02-07T14:08:01+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/laravel-comments.jpeg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"Aprende a utilizar Laravel para crear un sistema de comentarios en tiempo real que se puede integrar en cualquier sitio web o blog para generar confianza.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/laravel-comments.jpeg","twitter_creator":"@kaperskyguru","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Solomon Eseme","Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"Construye un Sistema de Comentarios en Tiempo Real en Laravel","datePublished":"2021-09-24T13:54:59+00:00","dateModified":"2025-02-07T14:08:01+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/"},"wordCount":1553,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/laravel-comments.jpeg","keywords":["laravel","web development"],"articleSection":["Desarrollo de WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/","url":"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/","name":"Construye un Sistema de Comentarios en Tiempo Real en Laravel","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/laravel-comments.jpeg","datePublished":"2021-09-24T13:54:59+00:00","dateModified":"2025-02-07T14:08:01+00:00","description":"Aprende a utilizar Laravel para crear un sistema de comentarios en tiempo real que se puede integrar en cualquier sitio web o blog para generar confianza.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/laravel-comments.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/laravel-comments.jpeg","width":1460,"height":730,"caption":"Construir un sistema de comentarios en vivo de Laravel"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/comentarios-de-laravel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Laravel","item":"https:\/\/kinsta.com\/es\/secciones\/laravel\/"},{"@type":"ListItem","position":3,"name":"Construye un Sistema de Comentarios en Tiempo Real en Laravel"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2","name":"Solomon Eseme","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","caption":"Solomon Eseme"},"description":"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me","sameAs":["https:\/\/masteringbackend.com","https:\/\/linkedin.com\/in\/solomoneseme","https:\/\/x.com\/kaperskyguru"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/solomoneseme\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/44048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=44048"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/44048\/revisions"}],"predecessor-version":[{"id":44410,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/44048\/revisions\/44410"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44048\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44048\/translations\/fr"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44048\/translations\/es"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44048\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44048\/translations\/de"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44048\/translations\/pt"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44048\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/44052"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=44048"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=44048"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=44048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}