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

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  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...

CodePudding user response：

use this instead.

<div id="counter">
</div>
<script>
   var diffedTime = Number({{isset($diffedTime)?$diffedTime:0}}) ;
    timer = setInterval(function () {
            document.getElementById('counter').innerText = diffedTime

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

CodePudding user response：

You need to use javascript to set a timer:

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

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