Construye 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 sistemas de comentarios autohospedados como Disqus o Commento, cada uno de los cuales tiene su propio conjunto de desventajas. Son propietarios de 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 se adapte a 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 la construcció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.

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. 💬 Aprenda cómo empezar aquí ⤵Haz clic para tuitear

Descripción general de Building Blocks: 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 crear aplicaciones web PHP simples o complejas conocidas por su elegante sintaxis. Aprender qué 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 frontend preferido. Vue.js es un marco de frontend de JavaScript progresivo conocido por su enfoque sencillo 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. Instale y configure 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 al configurar y configurar 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 a nivel mundial:

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 y Pusher. Abre tu recursos / js / bootstrap.js archivar y pegar en 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
});

Observará en el script 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, crearemos y configuraremos nuestra base de datos para almacenar los comentarios para su persistencia. Usaremos SQLite, aunque puede usar cualquier cliente de base de datos de su elección.

Crear un database.sqlite archivo dentro de la carpeta de la base de datos y actualice su .env archivo 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 actualizarlo con los siguientes scripts:

php artisan make:migration create_comments_table

Abre el base de datos / migraciones / xxxx_create_comments_table_xxxx.php archivar y pegar en este código:

<?php
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
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 importantes: son la forma más segura de comunicarse con nuestra base de datos y manejar la gestión de datos.

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

php artisan make:model Comment

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

<?php
namespace AppModels;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
class Comment extends Model
{
    use HasFactory;
    protected $fillable = ['content', 'author'];
}

The $fillable array allows us to create and update the model in mass.

4. Creación de controladores

Los controladores son cruciales porque albergan toda la lógica, el negocio y otros aspectos de nuestras aplicaciones, así que creemos uno para manejar la lógica de los comentarios:

php artisan make:controller CommentController

A continuación, abra el aplicación / Http / Controllers / CommentController.php archivar y pegar el siguiente código:

<?php
namespace AppHttpControllers;
use AppModelsComment;
use AppEventsCommentEvent;
use IlluminateHttpRequest;

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, recuperar 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, actualizaremos el api.php archivo en la carpeta de rutas. Abra el archivo y agregue el siguiente código:

use AppHttpControllersCommentController;
//...

Route::get('/', [CommentController::class, 'index']);
Route::get('/comments', [CommentController::class, 'fetchComments']);
Route::post('/comments', [CommentController::class, 'store']);

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

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

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

use AppHttpControllersCommentController;
//...

Route::get('/', [CommentController::class, 'index']);

Por último, crearemos un nuevo archivo blade en el recursos / vistas carpeta llamada comments.blade.php y agregue 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 id="app">
        <div class="container">
            <div class="question-wrapper">
                <h5 class="is-size-2" style="color: #220052;">
                    What do you think about <span style="color: #47b784;">Dogs</span>?</h5>
                <br>
                <a href="#Form" class="button is-medium has-shadow has-text-white" style="background-color: #47b784">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 la 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 (Frontend)

Crearemos y configuraremos nuestra instancia de Vue para crear y mostrar todos los comentarios hechos 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

Crea actions.js y agrega 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 punto final 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 utiliza para recuperar todos los comentarios del estado.

Cree el archivo mutations.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, crearemos nuestros componentes de comentarios para mostrar y agregar nuevos comentarios. Comencemos creando el componente de comentario único.

Cree una carpeta en el recurso / js carpeta llamada componentes, agregue el 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 id="commentForm" 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
              style="height: 100px"
              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
            style="background-color: #47b784"
            :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, abre el 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
});

¿Quiere crear su propio sistema de comentarios personalizado? 💬 Esta publicación tiene todo lo que necesita para comenzar 🚀Haz clic para tuitear

Resumen

¡Y eso es! Acaba de aprender a crear un sistema de comentarios en vivo para su sitio usando Laravel.

Hemos discutido los beneficios de crear y administrar un sistema de comentarios en su búsqueda por generar confianza en su comunidad o blog. También hemos explorado cómo desarrollar un sistema bien diseñado y en tiempo real. sistema de comentarios 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 construido juntos? ¡Háznoslo saber en los comentarios!