{"id":47915,"date":"2021-09-27T11:46:43","date_gmt":"2021-09-27T09:46:43","guid":{"rendered":"https:\/\/kinsta.com\/?p=100639"},"modified":"2023-02-01T15:27:44","modified_gmt":"2023-02-01T14:27:44","slug":"commenti-laravel","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/","title":{"rendered":"Creare un Sistema di Commenti In Tempo Reale con Laravel"},"content":{"rendered":"

Per creare un rapporto di fiducia con la vostra comunit\u00e0 online o nel vostro blog, un elemento cruciale \u00e8 un sistema di commenti in tempo reale progettato su Laravel.<\/p>\n

Tuttavia, non \u00e8 facile ottenerlo al primo tentativo a meno che non vi affidiate a sistemi di commenti self-hosted come Disqus<\/a> o Commento, ognuno dei quali presenta una serie di svantaggi. Possiedono i vostri dati, offrono design e personalizzazioni limitate e, cosa pi\u00f9 importante, non sono gratuiti.<\/p>\n

Con queste limitazioni, se l’idea di costruire il vostro sistema di commenti in tempo reale – con i benefici del controllo dei dati, del design e della personalizzazione dell’aspetto per adattarsi al vostro blog – vi attrae, continuate a leggere.<\/p>\n

Questo articolo vi insegner\u00e0 a sviluppare un sistema di commenti in tempo reale ben progettato e con diverse funzionalit\u00e0 di commento. Seguendo i principi della costruzione di un’applicazione di chat in tempo reale con Vue.js e Socket.io<\/a>, useremo Laravel, Pusher e React per sviluppare il sistema di commenti in tempo reale.<\/p>\n

Cominciamo!<\/p>\n

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

Cosa Costruiremo<\/h2>\n

Costruiremo un sistema di commenti live, in tempo reale<\/a> che pu\u00f2 essere integrato in qualsiasi sito web o blog per creare fiducia nella comunit\u00e0.<\/p>\n\n

Panoramica dei Building Blocks: Laravel, Pusher e Vue<\/h2>\n

Prima di tuffarci nello sviluppo, discutiamo le tecnologie che useremo per sviluppare il nostro sistema di commenti in tempo reale.<\/p>\n

Laravel<\/h3>\n

Laravel<\/a> \u00e8 un framework PHP open-source orientato a MVC. \u00c8 utilizzato per costruire applicazioni web PHP da semplici a complesse, note per la loro sintassi elegante. Imparare a conoscere Laravel<\/a> \u00e8 essenziale per costruire questo sistema di commenti.<\/p>\n

Pusher<\/h3>\n

Pusher<\/a> permette a chi sviluppa di creare funzioni in tempo reale su scala. Questo articolo combiner\u00e0 Laravel Echo<\/a> per creare un evento di trasmissione in tempo reale al server Pusher e visualizzare il contenuto sul frontend con Vue.js.<\/p>\n

Vue.js<\/h3>\n

Vue.js<\/a> \u00e8 il nostro framework frontend preferito. Vue.js \u00e8 un framework frontend progressivo JavaScript noto per il suo approccio facile da imparare e diretto allo sviluppo frontend. Useremo Vue.js per sviluppare il nostro sistema di commenti in tempo reale.<\/p>\n

Costruire il Sistema di Commenti<\/h2>\n

Se il sistema di commenti che abbiamo delineato sopra sembra fare al caso vostro, passiamo a costruirlo.<\/p>\n

1. Installare e Configurare Laravel, Pusher e Echo<\/h3>\n

L’installazione e la configurazione di Laravel, Echo e Pusher \u00e8 semplice poich\u00e9 Laravel ha svolto tutti i compiti in background impostando e configurando Laravel Echo per lavorare perfettamente con Pusher. Per prima cosa, inizieremo installando e configurando Laravel, il nostro framework backend PHP<\/a>. Potete prendere una nuova istanza di Laravel con questo comando, a condizione che abbiate installato globalmente la CLI di Laravel<\/a>:<\/p>\n

laravel new commenter<\/code><\/pre>\n
La vostra nuova istanza di Laravel sar\u00e0 installata in una cartella chiamata commenter. Apriamo la cartella nel nostro VSCode<\/a> e navighiamo fino ad essa nel nostro terminale:<\/p>\n
cd commenter\n\ncode .<\/code><\/pre>\n
Prima di avviare il nostro server di sviluppo, installiamo e configuriamo alcuni pacchetti necessari che saranno utilizzati per il progetto.<\/p>\n
Eseguite questo comando per installare l’SDK PHP di Pusher:<\/p>\n
composer require pusher\/pusher-php-server<\/code><\/pre>\n
Eseguite questo comando per installare i pacchetti NPM necessari per il frontend Vue.js:<\/p>\n
npm install --save laravel-echo pusher-js<\/code><\/pre>\n
Poi configureremo Laravel Echo e Pusher. Aprite il vostro file resources\/js\/bootstrap.js<\/strong> e incollate i seguenti script:<\/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
Noterete dallo script qui sopra che stiamo solo configurando l’istanza di Axios con le nostre configurazioni predefinite. Successivamente, configureremo Laravel Echo per utilizzare Pusher e le sue configurazioni.<\/p>\n
2. Configurazione e Migrazione del Database<\/h3>\n
Successivamente, creeremo e imposteremo il nostro database per memorizzare i commenti per la persistenza. Useremo SQLite, anche se potete usare qualsiasi client di database di vostra scelta.<\/p>\n
Create un file database.sqlite<\/strong> all’interno della cartella del database e aggiornate il vostro file .env<\/strong> come segue:<\/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
Successivamente, eseguite questo comando per creare la migrazione Comment e aggiornatela con i seguenti script:<\/p>\n
php artisan make:migration create_comments_table<\/code><\/pre>\n
Aprite il file database\/migrations\/xxxx_create_comments_table_xxxx.php<\/strong> e incollate questo codice:<\/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
Questo creer\u00e0 una nuova tabella del database dei commenti e aggiunger\u00e0 le colonne contenuto e autore.<\/p>\n
Infine, per creare la migrazione, eseguite questo comando:<\/p>\n
php artisan migrate<\/code><\/pre>\n
3. Creazione di Modelli<\/h3>\n
In Laravel, i modelli sono importanti: sono il modo pi\u00f9 sicuro per comunicare con il nostro database e gestire i dati.<\/p>\n
Per creare un modello in Laravel, eseguiremo il seguente comando:<\/p>\n
php artisan make:model Comment<\/code><\/pre>\n
Poi aprite il file app\/models\/Comment.php<\/strong> e incollate il seguente codice:<\/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. Creazione dei Controller<\/h3>\n
I controller sono cruciali perch\u00e9 ospitano tutta la logica, di business e non, delle nostre applicazioni, quindi creiamone uno per gestire la logica di commento:<\/p>\n
php artisan make:controller CommentController<\/code><\/pre>\n
Poi aprite il file app\/Http\/Controllers\/CommentController.php<\/strong> e incollate il seguente codice:<\/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
Il controller ha tre diversi metodi: restituire una vista dei commenti, recuperare tutti i commenti e memorizzare un nuovo commento, rispettivamente. La cosa pi\u00f9 importante \u00e8 che ogni volta che memorizziamo un nuovo commento lanciamo un evento, che il frontend ascolter\u00e0 per aggiornare la relativa pagina con il nuovo commento in tempo reale usando Pusher e Laravel Echo.<\/p>\n
5. Creazione delle Route<\/h3>\n
Per configurare correttamente le nostre route, abbiamo bisogno di aggiornare molti file<\/a>, quindi cominciamo.<\/p>\n
Per prima cosa, aggiorneremo il file api.php<\/strong> nella cartella routes. Aprite il file e aggiungete il seguente codice:<\/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
Poi aprite il file channels.php<\/strong> nella stessa cartella e aggiungete il seguente codice per autorizzare l’evento che abbiamo lanciato prima:<\/p>\n
Broadcast::channel('comment', function ($user) {\n    return true;\n});<\/code><\/pre>\n
Poi aprite il file web.php<\/strong> nella stessa cartella e aggiungete il seguente codice per reindirizzare la nostra richiesta alla homepage, dove Vue.js la raccoglier\u00e0:<\/p>\n
use App\\Http\\Controllers\\CommentController;\n\/\/...\n\nRoute::get('\/', [CommentController::class, 'index']);<\/code><\/pre>\n
Infine, creeremo un nuovo file blade nella cartella resources\/views<\/strong> chiamato comments.blade.php<\/strong> e aggiungeremo il seguente codice:<\/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
Lo script aggiunge un titolo al post e un componente Vue per visualizzare e aggiungere nuovi commenti al titolo del post creato in precedenza.<\/p>\n
Eseguite i seguenti comandi per verificare che sia tutto corretto:<\/p>\n
npm run watch\n\nphp artisan serve<\/code><\/pre>\n
Se vedete questa pagina, siete pronti a passare al prossimo passo di questo articolo.<\/p>\n
\"Sistema
Sistema di commenti in tempo reale con Laravel<\/figcaption><\/figure>\n
6. Impostare Vue (Frontend)<\/h3>\n
Creeremo e imposteremo la nostra istanza Vue per creare e visualizzare tutti i commenti fatti su questo post<\/a>.<\/p>\n
Inizieremo impostando il nostro negozio Vuex. Create i seguenti file nella cartella resource\/js\/store.<\/p>\n
Create Stato di Commento<\/h4>\n
Create actions.js e aggiungete il seguente codice:<\/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
Il file Action fa una chiamata all’endpoint dei commenti nel backend.<\/p>\n
Successivamente, create un file getters.js e aggiungete il seguente codice:<\/p>\n
let getters = {\n    comments: state => {\n        return state.comments;\n    }\n};\nexport default getters;<\/code><\/pre>\n
Il file Getter \u00e8 usato per recuperare tutti i commenti nello stato.<\/p>\n
Create il file mutations.js e incollatelo nel seguente codice:<\/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
Successivamente, create un file state.js e incollatelo nel seguente codice:<\/p>\n
let state = {\n    comments: []\n};\nexport default state;<\/code><\/pre>\n
Infine, aggiungeremo tutto al file index.js esportato nell’istanza Vue, creeremo un file index.js e aggiungeremo quanto segue:<\/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
Create i Componenti<\/h4>\n
Infine, creeremo i componenti per i commenti per visualizzare e aggiungere nuovi commenti. Iniziamo creando il singolo componente di commento.<\/p>\n
Creiamo una cartella dentro la cartella resource\/js<\/strong> chiamata components, aggiungiamo il comment.vue<\/strong> e aggiungiamo il seguente codice:<\/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
Successivamente, create il seguente file chiamato comments.vue<\/strong> nella stessa cartella e aggiungete il seguente codice:<\/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
Infine, create un file chiamato NewComment.vue<\/strong> e aggiungete il seguente codice:<\/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
Ora aprite il file app.js<\/strong> e aggiungete il seguente codice per registrare i componenti Vue che avete creato in precedenza:<\/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
Riepilogo<\/h2>\n
E questo \u00e8 tutto! Avete appena imparato a costruire un sistema di commenti live per il vostro sito usando Laravel.<\/p>\n
Abbiamo discusso i benefici della creazione e della gestione di un sistema di commenti per aumentare la fiducia nella vostra comunit\u00e0 o blog. Abbiamo anche visto come sviluppare un sistema di commenti ben progettato e in tempo reale da zero, utilizzando diverse funzionalit\u00e0 di commento.<\/p>\n
Potete clonare il codice sorgente di questo progetto in questo repo Github<\/a>.<\/p>\n
Cosa ne pensate del sistema di commenti live di Laravel che abbiamo costruito insieme? Fatecelo sapere nei commenti!<\/p>\n","protected":false},"excerpt":{"rendered":"
Per creare un rapporto di fiducia con la vostra comunit\u00e0 online o nel vostro blog, un elemento cruciale \u00e8 un sistema di commenti in tempo reale …<\/p>\n","protected":false},"author":193,"featured_media":47918,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[25528,32,15892],"topic":[26164,26020],"class_list":["post-47915","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-laravel","tag-sviluppo-web","tag-web-development","topic-framework-php","topic-laravel"],"yoast_head":"\nCreare un Sistema di Commenti In Tempo Reale con Laravel<\/title>\n<meta name=\"description\" content=\"Scopri come usare Laravel per costruire un sistema di commenti in tempo reale che pu\u00f2 essere integrato in qualsiasi sito web o blog.\" \/>\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\/it\/blog\/commenti-laravel\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creare un Sistema di Commenti In Tempo Reale con Laravel\" \/>\n<meta property=\"og:description\" content=\"Scopri come usare Laravel per costruire un sistema di commenti in tempo reale che pu\u00f2 essere integrato in qualsiasi sito web o blog.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-27T09:46:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-01T14:27:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/laravel-commenti.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=\"Scopri come usare Laravel per costruire un sistema di commenti in tempo reale che pu\u00f2 essere integrato in qualsiasi sito web o blog.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/laravel-commenti.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kaperskyguru\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solomon Eseme\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"Creare un Sistema di Commenti In Tempo Reale con Laravel\",\"datePublished\":\"2021-09-27T09:46:43+00:00\",\"dateModified\":\"2023-02-01T14:27:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/\"},\"wordCount\":1361,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/laravel-commenti.jpeg\",\"keywords\":[\"laravel\",\"sviluppo web\",\"web development\"],\"articleSection\":[\"Sviluppo WordPress\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/\",\"name\":\"Creare un Sistema di Commenti In Tempo Reale con Laravel\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/laravel-commenti.jpeg\",\"datePublished\":\"2021-09-27T09:46:43+00:00\",\"dateModified\":\"2023-02-01T14:27:44+00:00\",\"description\":\"Scopri come usare Laravel per costruire un sistema di commenti in tempo reale che pu\u00f2 essere integrato in qualsiasi sito web o blog.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/laravel-commenti.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/laravel-commenti.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Costruire un sistema di commenti dal vivo con Laravel\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/laravel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Creare un Sistema di Commenti In Tempo Reale con Laravel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"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\/it\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\",\"name\":\"Solomon Eseme\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/solomoneseme\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creare un Sistema di Commenti In Tempo Reale con Laravel","description":"Scopri come usare Laravel per costruire un sistema di commenti in tempo reale che pu\u00f2 essere integrato in qualsiasi sito web o blog.","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\/it\/blog\/commenti-laravel\/","og_locale":"it_IT","og_type":"article","og_title":"Creare un Sistema di Commenti In Tempo Reale con Laravel","og_description":"Scopri come usare Laravel per costruire un sistema di commenti in tempo reale che pu\u00f2 essere integrato in qualsiasi sito web o blog.","og_url":"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2021-09-27T09:46:43+00:00","article_modified_time":"2023-02-01T14:27:44+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/laravel-commenti.jpeg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"Scopri come usare Laravel per costruire un sistema di commenti in tempo reale che pu\u00f2 essere integrato in qualsiasi sito web o blog.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/laravel-commenti.jpeg","twitter_creator":"@kaperskyguru","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Solomon Eseme","Tempo di lettura stimato":"10 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"Creare un Sistema di Commenti In Tempo Reale con Laravel","datePublished":"2021-09-27T09:46:43+00:00","dateModified":"2023-02-01T14:27:44+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/"},"wordCount":1361,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/laravel-commenti.jpeg","keywords":["laravel","sviluppo web","web development"],"articleSection":["Sviluppo WordPress"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/","url":"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/","name":"Creare un Sistema di Commenti In Tempo Reale con Laravel","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/laravel-commenti.jpeg","datePublished":"2021-09-27T09:46:43+00:00","dateModified":"2023-02-01T14:27:44+00:00","description":"Scopri come usare Laravel per costruire un sistema di commenti in tempo reale che pu\u00f2 essere integrato in qualsiasi sito web o blog.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/laravel-commenti.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/laravel-commenti.jpeg","width":1460,"height":730,"caption":"Costruire un sistema di commenti dal vivo con Laravel"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/commenti-laravel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Laravel","item":"https:\/\/kinsta.com\/it\/argomenti\/laravel\/"},{"@type":"ListItem","position":3,"name":"Creare un Sistema di Commenti In Tempo Reale con Laravel"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","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\/it\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2","name":"Solomon Eseme","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/solomoneseme\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/47915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=47915"}],"version-history":[{"count":13,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/47915\/revisions"}],"predecessor-version":[{"id":48176,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/47915\/revisions\/48176"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47915\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47915\/translations\/fr"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47915\/translations\/es"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47915\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47915\/translations\/de"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47915\/translations\/pt"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47915\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/47918"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=47915"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=47915"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=47915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}