Part 3 - Updated Channel Changes

Author: jacurtis

app/Events/NewComment.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace App\Events;
+
+use App\Comment;
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Broadcasting\PresenceChannel;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
+
+class NewComment implements ShouldBroadcastNow
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+
+    public $comment;
+
+    /**
+     * Create a new event instance.
+     *
+     * @return void
+     */
+    public function __construct(Comment $comment)
+    {
+      $this->comment = $comment;
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return \Illuminate\Broadcasting\Channel|array
+     */
+    public function broadcastOn()
+    {
+        return new Channel('post.'.$this->comment->post->id);
+    }
+
+    public function broadcastWith()
+    {
+      return [
+        'body' => $this->comment->body,
+        'created_at' => $this->comment->created_at->toFormattedDateString(),
+        'user' => [
+          'name' => $this->comment->user->name,
+          'avatar' => 'http://lorempixel.com/50/50'
+        ]
+      ];
+    }
+}

app/Http/Controllers/CommentController.php

@@ -6,6 +6,7 @@
 use App\Post;
 use App\Comment;
 use Auth;
+use App\Events\NewComment;
 
 class CommentController extends Controller
 {
@@ -22,7 +23,7 @@ public function store(Request $request, Post $post)
     ]);
 
     $comment = Comment::where('id', $comment->id)->with('user')->first();
-
+    broadcast(new NewComment($comment))->toOthers();
     return $comment->toJson();
   }
 }

resources/views/posts/show.blade.php

@@ -16,10 +16,13 @@
     <hr />
 
     <h3>Comments:</h3>
-    <div style="margin-bottom:50px;">
+    <div style="margin-bottom:50px;" v-if="user">
       <textarea class="form-control" rows="3" name="body" placeholder="Leave a comment" v-model="commentBox"></textarea>
       <button class="btn btn-success" style="margin-top:10px" @click.prevent="postComment">Save Comment</button>
     </div>
+    <div v-else>
+      <h4>You must be logged in to submit a comment!</h4> <a href="/login">Login Now &gt;&gt;</a>
+    </div>
 
 
     <div class="media" style="margin-top:20px;" v-for="comment in comments">
@@ -53,6 +56,7 @@
       },
       mounted() {
         this.getComments();
+        this.listen();
       },
       methods: {
         getComments() {
@@ -76,6 +80,12 @@
           .catch((error) => {
             console.log(error);
           })
+        },
+        listen() {
+          Echo.channel('post.'+this.post.id)
+              .listen('NewComment', (comment) => {
+                this.comments.unshift(comment);
+              })
         }
       }
     })