add demo

Author: mpociot

.env.example

@@ -1,4 +1,4 @@
-APP_NAME=Laravel
+APP_NAME="Laravel WebSockets"
 APP_ENV=local
 APP_KEY=
 APP_DEBUG=true

app/Events/MessageSent.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace App\Events;
+
+use App\User;
+use App\Message;
+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;
+
+class MessageSent implements ShouldBroadcast
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    /**
+     * User that sent the message
+     *
+     * @var User
+     */
+    public $user;
+
+    /**
+     * Message details
+     *
+     * @var Message
+     */
+    public $message;
+
+    /**
+     * Create a new event instance.
+     *
+     * @return void
+     */
+    public function __construct(User $user, Message $message)
+    {
+        $this->user = $user;
+        $this->message = $message;
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return Channel|array
+     */
+    public function broadcastOn()
+    {
+        return new PresenceChannel('chat');
+    }
+}

app/Http/Controllers/ChatsController.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Events\MessageSent;
+use App\Message;
+use Illuminate\Http\Request;
+
+class ChatsController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    public function index()
+    {
+        return view('chat');
+    }
+
+    public function fetchMessages()
+    {
+        return Message::with('user')->get();
+    }
+
+    public function sendMessage(Request $request)
+    {
+        $message = auth()->user()->messages()->create([
+            'message' => $request->message
+        ]);
+
+		broadcast(new MessageSent(auth()->user(), $message))->toOthers();
+
+        return ['status' => 'Message Sent!'];
+    }
+}

composer.lock

@@ -171,7 +171,7 @@
          */
         App\Providers\AppServiceProvider::class,
         App\Providers\AuthServiceProvider::class,
-        // App\Providers\BroadcastServiceProvider::class,
+        App\Providers\BroadcastServiceProvider::class,
         App\Providers\EventServiceProvider::class,
         App\Providers\RouteServiceProvider::class,
 

config/app.php

@@ -38,6 +38,9 @@
             'options' => [
                 'cluster' => env('PUSHER_APP_CLUSTER'),
                 'encrypted' => true,
+                'host' => '127.0.0.1',
+                'port' => 6001,
+                'scheme' => 'http'
             ],
         ],
 

config/broadcasting.php

@@ -10472,3 +10472,40 @@ a.text-dark:focus {
           box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
 }
 
+.chat {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.chat li {
+  margin-bottom: 10px;
+  padding-bottom: 5px;
+  border-bottom: 1px dotted #B3A9A9;
+}
+
+.chat li .chat-body p {
+  margin: 0;
+  color: #777777;
+}
+
+.chats .card-body {
+  overflow-y: scroll;
+  height: 80vh;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #555;
+}
+