Web Application

Laravel WebSocket | Pusher API Replacement

Laravel_websocket_pusher_API_Replacement

What is WebSocket ?

– WebSocket connection is a continuous connection between a browser and the server.
– It provides a bidirectional communication: the server can send messages to the browser and the browser– the client – can respond back via an equivalent connection.
– This differs from regular Ajax, which is single one-way communication: only the client can ask stuff from the server.

Why we need WebSocket?

– Because PHP itself does not support WebSocket,
– We need a layer of indirection to send “server” data to the “client”. In other words, real-time communication can be roughly divided into two steps:

    1. Laravel -> Indirect Layer
    2. Indirect Layer -> (via WebSocket) -> Client

– It is built using ratchet PHP library

How WebSocket Works?

data_structure

– When you start the start a Ratchet server that starts listing for connections

Features of WebSocket:

1. Real -Time apps
– Chat application
– E-commerce application
– Videoconference applications.

2. Pusher Replacement
3. Persistent connection
4. Easy Customization options
5. Debugging dashboard
6. Integrated WebSocket and HTTP Server

 Requirements:

– PHP >= 7.1.3
– Laravel >=5.7

Guide -How to install:

    1. Install laravel WebSockets – composer require beyondcode/laravel-websockets
    1. Publish the migration file – php artisan vendor:publish –provider=”BeyondCode\LaravelWebSockets\WebSocketsServiceProvider” –tag=”migrations”
    1. Run the migrations- php artisan migrate
    1.  Publish the WebSocket configuration file – php artisan vendor:publish –provider=”BeyondCode\LaravelWebSockets\WebSocketsServiceProvider” –tag=”config”

Database:

                    Table :     websockets_statistics_entries                        websockets_statistics_entries

                   Table :   messages

messages

Install the official Pusher PHP SDK

composer require pusher/pusher-php-server “~3.0”

Change broadcast driver in .env file

BROADCAST_DRIVER=pusher

In the config/app.php file uncomment

App\Providers\BroadcastServiceProvider::class,

Pusher Configuration

The package will use the pusher driver, but we don’t actually want to use Pusher. Therefore we add our own host and port configuration to ‘pusher‘ section in config/broadcasting.php

             -config/broadcasting.php

config-broadcasting

Laravel WebSockets package comes with individual Pusher API implementation,
we need to notify Laravel to send the events to our own server.

Also Change in .env file beacuse we are not using pusher
– PUSHER_APP_ID=testapp
– PUSHER_APP_SECRET=websocketkey
– PUSHER_APP_SECRET=somethingsecret

Configuring WebSocket Apps 

            -config/websockets.php

config-websocket

you can host separately from your current Laravel application server
we can add mutiple application with one laravel websocket server

Laravel Echo

npm install –save laravel-echo pusher-js
Uncommnet the laravel-echo configuration from Resources/js/bootstrap.js
wsHost and wsPort point them to your laravel WebSocket server host and port.

Laravel Echo

Starting the WebSocket server

php artisan websockets:serve
php artisan websockets:serve —port=3030
php artisan websockets:serve —host=127.0.0.1

Dashboard 

Websocket package dashboard is like pusher’s debug console dashboard. Default Root path of dashboard demo app is /laravel-websockets which is automatically accessible.

Dashboard

Statistics

– This package comes with different statistic solution
– That will give you current status of your WebSocket server.
– Realtime Statistics
– All Event Details
http://localhost:8000/laravel-websockets
– The Laravel WebSockets package use pusher key and app id but this package use own server to send and received request that’s why this called pusher replacement package.

Want to read more Blogs ?

Similar Post

Certified By

  •                            
    Clutch
    11 Reviews
  • Upwork
    97% job success
    Good Firms
    7 Reviews