Real-Time Score Update

1. Install Laravel

Create a new Laravel project with:

composer create-project laravel/laravel Laravel-pusher-app

2. Install Pusher

Install the Pusher PHP server library:

composer require pusher/pusher-php-server

3. Set Up Environment

Configure your .env file with Pusher credentials:

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret
PUSHER_APP_CLUSTER=mt1

Project Files

1. `app.blade.php`

This is the base Blade template used for rendering other views.

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

<body>
    @yield('content')
    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/pusher.min.js') }}"></script>
    <script src="{{ asset('js/jquery.min.js') }}"></script>
    <script src="{{ asset('js/axios.min.js') }}"></script>
    @yield('script')
</body>
</html>

2. `ScoreUpdate.blade.php`

Provides the UI for updating the score.

@extends('app')
@section('content')
    <div class="container">
        <div class="row d-flex justify-content-center">
            <div class="p-4 col-md-4">
                <div class="card text-center">
                    <div class="card-body">
                        <h3>Update Score</h3>
                        <hr>
                        <input type="text" class="form-control ScoreValue">
                        <br>
                        <button class="btn updateBtn btn-success btn-block">Update</button>
                        <h4 class="lastScore pt-3"></h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        function updateScore() {
            var scoreValue = $('.ScoreValue').val();
            var url = "/push-score";
            axios.post(url, {
                score: scoreValue
            }).then(function(response) {
                $('.lastScore').html(response.data);
            }).catch(function(e) {
                console.log(e);
            });
        }

        $('.updateBtn').click(function() {
            updateScore();
        });

        $('.ScoreValue').keypress(function(e) {
            if (e.which === 13) {
                e.preventDefault();
                updateScore();
            }
        });
    </script>
@endsection

3. `ScoreBoard.blade.php`

Displays the live score using Pusher for real-time updates.

@extends('app')
@section('content')
<div class="container">
    <div class="row d-flex justify-content-center">
        <div class="p-4 col-md-4">
            <div class="card text-center">
                <div class="card-body">
                    <h2 id="score">...</h2>
                    <h5>Live Score</h5>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
    <script>
        Pusher = new Pusher('your-app-key', {
            cluster: 'mt1',
        });

        var channel = Pusher.subscribe('my-channel');
        channel.bind('my-event', function(data) {
            $('#score').html(data['scoreValue']);
        });
    </script>
@endsection

4. `web.php`

Defines the routes for displaying views and handling score updates.

<?php

use App\Http\Controllers\ScoreUpdateController;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('ScoreBoard');
});
Route::get('/update', function () {
    return view('ScoreUpdate');
});

Route::post('/push-score', [ScoreUpdateController::class, 'pushScoreValue']);

5. `ScoreUpdateController.php`

Handles the logic for updating the score and broadcasting the event.

<?php

namespace App\Http\Controllers;

use App\Events\MyEvent;
use Illuminate\Http\Request;

class ScoreUpdateController extends Controller
{
    public function pushScoreValue(Request $request){
        $score = $request->input('score');
        event(new MyEvent($score));
        return $score;
    }
}

6. `MyEvent.php`

Event class that broadcasts the score updates to the my-channel channel.

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class MyEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $scoreValue;

    public function __construct($scoreValue)
    {
        $this->scoreValue = $scoreValue; 
    }

    public function broadcastOn(): array
    {
        return ['my-channel'];
    }

    public function broadcastAs()
    {
        return 'my-event';
    }
}

Getting Started

Configure Environment:
- Copy .env.example to .env and add your Pusher credentials.
Run Migrations (if any):
```
php artisan migrate
```
Start the Application:
```
php artisan serve
```
Start the WebSocket Server (if needed):
```
npm run dev
```

Visit http://localhost:8000 to access the application and test real-time score updates.

Blog

Real-Time Score Update

Tahsin Abrar

1. Install Laravel

2. Install Pusher

3. Set Up Environment

Project Files

1. `app.blade.php`

2. `ScoreUpdate.blade.php`

3. `ScoreBoard.blade.php`

4. `web.php`

5. `ScoreUpdateController.php`

6. `MyEvent.php`

Getting Started

Join Our Newsletter. No Spam, Only the good stuff.

Related

Real-Time Score Update

Tahsin Abrar

1. Install Laravel

2. Install Pusher

3. Set Up Environment

Project Files

1. app.blade.php

2. ScoreUpdate.blade.php

3. ScoreBoard.blade.php

4. web.php

5. ScoreUpdateController.php

6. MyEvent.php

Getting Started

Join Our Newsletter. No Spam, Only the good stuff.

Related

1. `app.blade.php`

2. `ScoreUpdate.blade.php`

3. `ScoreBoard.blade.php`

4. `web.php`

5. `ScoreUpdateController.php`

6. `MyEvent.php`