├── README.md └── Screenshots ├── CheckEvent Work.png ├── after_connect.png └── before_connect.png /README.md: -------------------------------------------------------------------------------- 1 | # Laravel WebSockets with Vue.js Integration 2 | 3 | This guide provides step-by-step instructions on how to integrate Laravel WebSockets with Vue.js for real-time communication. 4 | Follow these steps to set up the environment and start using WebSockets in your Laravel application. 5 | 6 | ## Laravel WebSockets Installation And Test 7 | 8 | 1. Install the Laravel WebSockets package: 9 | 10 | ```bash 11 | composer require beyondcode/laravel-websockets 12 | ``` 13 | 14 | 2. Publish migrations and run them: 15 | 16 | ```bash 17 | php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations" 18 | php artisan migrate 19 | ``` 20 | 3. Publish the WebSocket configuration file: 21 | 22 | ```bash 23 | php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config" 24 | ``` 25 | 26 | 4. Uncomment `App\Providers\BroadcastServiceProvider::class` in `config/app.php`. 27 | 28 | 5. Install Pusher PHP server: 29 | 30 | ```bash 31 | composer require pusher/pusher-php-server 32 | ``` 33 | 6. Update your `.env` file: 34 | 35 | ```env 36 | BROADCAST_DRIVER=pusher 37 | 38 | PUSHER_APP_ID=local 39 | PUSHER_APP_KEY=local 40 | PUSHER_APP_SECRET=local 41 | PUSHER_APP_CLUSTER=mt1 42 | ``` 43 | 7. Configure broadcasting in `config/broadcasting.php`: 44 | 45 | ```php 46 | 'pusher' => [ 47 | 'driver' => 'pusher', 48 | 'key' => env('PUSHER_APP_KEY'), 49 | 'secret' => env('PUSHER_APP_SECRET'), 50 | 'app_id' => env('PUSHER_APP_ID'), 51 | 'options' => [ 52 | 'cluster' => env('PUSHER_APP_CLUSTER'), 53 | 'encrypted' => true, 54 | 'host' => '127.0.0.1', 55 | 'port' => 6001, 56 | 'scheme' => 'http', 57 | ], 58 | ], 59 | ``` 60 | 8. Create a new event: 61 | 62 | ```bash 63 | php artisan make:event NameEvent 64 | ``` 65 | ### Replace `Notif` with the name of the event you created (`Notif` in this case). This is how you broadcast the event in your controller to send real-time notifications. 66 | Update `Notif.php` to implement `ShouldBroadcastNow`: 67 | 68 | ```php 69 | use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow; 70 | use Illuminate\Queue\SerializesModels; 71 | 72 | class Notif implements ShouldBroadcastNow 73 | { 74 | use SerializesModels; 75 | 76 | private $notif; 77 | 78 | public function __construct($notif) 79 | { 80 | $this->notif = $notif; 81 | } 82 | 83 | public function broadcastWith() 84 | { 85 | return ['message' => $this->notif]; 86 | } 87 | 88 | public function broadcastOn() 89 | { 90 | return new Channel('public'); 91 | } 92 | } 93 | ``` 94 | 95 | 9. Broadcast the event in your controller: 96 | 97 | In your controller where you want to broadcast the event: 98 | 99 | ```php 100 | use App\Events\Notif; 101 | 102 | // Your code logic here 103 | 104 | broadcast(new Notif("test")); 105 | ``` 106 | 107 | 10. Run the WebSockets server: 108 | ```bash 109 | php artisan websockets:serve 110 | ``` 111 | 112 | 11. Open the Laravel WebSockets dashboard in your browser. You can access it at to confirm that a new connection has been established. 113 | 114 | ```bash 115 | http://localhost:8000/laravel-websockets 116 | ``` 117 | 118 | After Connect 119 | Before Connect 120 | 121 | 122 | 12. To verify that WebSocket communication is working, you can perform a simple test by broadcasting an event in your Laravel application. 123 | 124 | Create a test route in your routes/web.php file 125 | 126 | ```php 127 | use App\Events\Notif; 128 | 129 | Route::get('/broadcast', function () { 130 | broadcast(new Notif("test")); 131 | return "Event has been sent!"; 132 | }); 133 | ``` 134 | CheckEvent Work 135 | 136 | ## Vue.js Integration 137 | 138 | 1. Install required packages: 139 | 140 | ```bash 141 | npm install laravel-echo pusher-js 142 | ``` 143 | 2. Update your 'main.js' file: 144 | 145 | ```javascript 146 | import Echo from "laravel-echo" 147 | window.Pusher = require('pusher-js'); 148 | 149 | window.Echo = new Echo({ 150 | broadcaster: 'pusher', 151 | key: "local", 152 | wsHost:"127.0.0.1", 153 | wsPort: 6001, 154 | cluster: "mt1", 155 | forceTLS: false, 156 | disableStats: true, 157 | }); 158 | ```` 159 | 3. Usage in Vue Component: 160 | 161 | Listen for the 'Notif' event on the 'public' channel. 162 | 163 | ```javascript 164 | window.Echo.channel('public').listen('Notif', (e) => { 165 | // Your code logic here 166 | // Handle the received notification to get new notifications in real-time. 167 | }); 168 | ``` 169 | 170 | ## Contributing 171 | If you encounter any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request. Your contributions are welcome! 172 | 173 | --- 174 | 175 | **Guide by: Talel Mejri** 176 | 177 | *Dedicated to [Mohamed Youssef CHLENDI](https://github.com/youssefchlendi) for continuous support.* 178 | -------------------------------------------------------------------------------- /Screenshots/CheckEvent Work.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/Laravel-WebSockets-with-Vue.js-Integration/13b847f59d71411eafc254104113f3eb60c4a623/Screenshots/CheckEvent Work.png -------------------------------------------------------------------------------- /Screenshots/after_connect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/Laravel-WebSockets-with-Vue.js-Integration/13b847f59d71411eafc254104113f3eb60c4a623/Screenshots/after_connect.png -------------------------------------------------------------------------------- /Screenshots/before_connect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/Laravel-WebSockets-with-Vue.js-Integration/13b847f59d71411eafc254104113f3eb60c4a623/Screenshots/before_connect.png --------------------------------------------------------------------------------