Laravel, Uncategorized
Laravel web sockets
Sep
Getting started with Laravel Websockets can be hectic and boring for some people, me included. I went through several tutorials before I got it right. I wish to share my journey with you on how to integrate Websockets into a laravel application with you. We’re going to use a free package by Marcel Pociot and Sebastian Schlein.
Lets get started by listing its prons:
- Ease of use. With Laravel Websockets, you do not need any additional software to start your own WebSocket server. Forget about Node – use the power of PHP.
- Laravel WebSockets has built-in Laravel Echo support out of the box and you can use it right away as a drop-in local Pusher replacement.
-
Performance. This package is battle-tested in real-world applications and can serve high traffic websites easily.
- Multitenancy. This package comes with multi-tenancy support out of the box. his means that you could host it independently from your current Laravel application and serve multiple WebSocket applications with one server. (This is what we’ll use in this tutorial. I have created and hosted Websocker server on a VM)
Follow along to test how it works before we go through steps of creating and hosting one.
Step 1. Create a new Laravel Application
This can be easily done via composer.
|
1 |
composer create-project --prefer-dist laravel/laravel blog |
Step 2. Install Laravel Websockets package
|
1 |
composer require beyondcode/laravel-websockets |
Step 3. Update broadcasting.php file. (config/broadcasting.php)
- Go to broadcasting.php under connections=>pusher update the port to point to our server as show below. Sample code.
12345678910111213'pusher' => ['driver' => 'pusher','key' => env('PUSHER_APP_KEY'),'secret' => env('PUSHER_APP_SECRET'),'app_id' => env('PUSHER_APP_ID'),'options' => ['cluster' => env('PUSHER_APP_CLUSTER'),'encrypted' => true,'host' => '34.66.223.131','port' => 6001,'scheme' => 'http'],],
Step 4. Install Laravel-echo.
Laravel Echo is a JavaScript library that makes it painless to subscribe to channels and listen for events broadcast by Laravel.
|
1 |
npm install --save laravel-echo pusher-js |
Step 5. Update bootstrap.js.
- Update bootstrap.js to receive updates. Sample code.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import Echo from "laravel-echo" window.Pusher = require('pusher-js'); window.Echo = new Echo({ broadcaster: 'pusher', key: 'technohive', wsHost: '34.66.223.131', wsPort: 6001, disableStats: true, enabledTransports: ['ws', 'wss'], }); |
Step 6. Update .env. (Replace below with pusher value and don’t forget to set pusher as your proffered broadcaster).
- Replace .env pusher configuration with this configuration
|
1 2 3 4 5 6 |
PUSHER_APP_ID=1 PUSHER_APP_KEY=technohive PUSHER_APP_SECRET=technohive PUSHER_APP_CLUSTER=ap2 BROADCAST_DRIVER=pusher |
Step 6. Run npm run watch
|
1 |
npm run watch |
Step 7 Listen for Events.
Replace order OrderShipped with your event name. and e.order.name with your public variables in the event class. For more about this checkout Laravel events and Listeners
|
1 2 3 4 |
window.Echo.channel('orders') .listen('OrderShipped', (e) => { console.log(e.order.name); }); |
- Thats all. We’re happy to hear from you via comments
you forgot to mention that they need to also change the host IP addresses to match their server address
Thanks for your comment. In this article, I used an hosted Web-socket server. I’ll do another article soon on how one can create own web-socket server that supports multi tenancy. One can use this article to test how web sockets works.