How to show a variable which is changing per second, on a blade LIVE

Question

I have made this method for sending a temporary code to the user's mobile phone number for verifying his account:

public function signInWithToken()
{
    // Session::forget('codeSent');
    if(Session::has('nextStep') && Session::has('foundUser')) {
        $user = User::where('usr_mobile_phone', Session::get('foundUser'))->first();
        if(Session::has('codeSent')){
            $nowTime = now();
            $sentTime = Session::get('codeSent');
            $diffedTime = $sentTime->diffInSeconds($nowTime);
            if($diffedTime == 0){
                $user->activeCode()->delete();
                Session::forget('codeSent');
            }

            return view('frontend.auth.token',compact('diffedTime'));
        }else{
            $code = ActiveCode::generateCode($user);
            $user->notify(new ActiveCodeNotification($code, Session::get('foundUser')));
            Session::put('codeSent', now()->addMinutes(10));

            return view('frontend.auth.token');
        }


    }else{
        abort(404);
    }
}

So for the first time, a code generates and the session codeSent will also be submitted and its value is 10 minutes above the current time.

Then I also need to check if this session was already submitted, then it has to subtract the $nowTime from $sentTime to find out if the code was generated more than 10 minutes ago and is too old: (so the code must be deleted from the DB and the session must be forgotten)

$nowTime = now();
$sentTime = Session::get('codeSent');
$diffedTime = $sentTime->diffInSeconds($nowTime);
if($diffedTime == 0){
      $user->activeCode()->delete();
      Session::forget('codeSent');
}

Then on Blade, I need something similar to this:

@if(session('codeSent'))
     <div class="alert alert-warning" role="alert">
           Seconds left for code expiration:
           {{ $diffedTime }}
     </div>
@endif

But don't know how to show this $diffedTime LIVELY on the blade because it changes every second.

So if you know, please let me know, I would really appreciate any idea or suggestion from you guys...

To what extent do you need the frontend to have a "live" connection to the backend? Isn't it enough to calculate the time remaining on the backend then serve up some JavaScript to countdown the time remaining, and your users will see what looks like a "live" countdown? — Ultimater, Dec 21 '22 at 07:56
@Ultimater I agree with you on count down. But this count down is not a separate thing and it's value actually is presenting the `diffInSeconds` — Pouya, Dec 21 '22 at 08:05
See https://stackoverflow.com/questions/20618355/how-to-write-a-countdown-timer-in-javascript — Ultimater, Dec 21 '22 at 09:18

score 2 · Accepted Answer · answered Dec 24 '22 at 07:33

You need to use javascript to set a timer:

<div id="counter">
</div>
<script>
   var diffedTime = {!! json_encode($diffedTime) !!} ;
   // it works too.
   //  var diffedTime = "{{$diffedTime}}" ; 
    timer = setInterval(function () {
            document.getElementById('counter').innerText = diffedTime

            if (diffedTime <= 0) {
                clearInterval(timer)
            }
            diffedTime--;
        }
        , 1000)
</script>

How to show a variable which is changing per second, on a blade LIVE

1 Answers1

Linked