Detect user is Online or Offline using Livewire in Laravel

If you are using Livewire then you don’t need to include any external library or write a script to detect if a user is online or offline.

Livewire already provided a utility to perform offline action check. You only need to add it to the HTML element that gets affected according to the user state.

In this tutorial, I show how you can detect if the user is online or offline and display an alert using Livewire in Laravel 9.

---

Contents

1. Create Controller
2. Create Route
3. Create Livewire Component
4. Create View
5. Output
6. Conclusion

---

1. Create Controller

• Create ContactController controller.

php artisan make:controller ContactController

• Open app\Http\Controllers\ContactController.php file.
• Create 1 method –
  • index() – Load index view.

Completed Code

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ContactController extends Controller
{
    public function index(){
        return view('index');
    }
}

---

2. Create Route

• Open routes/web.php file.
• Define 1 route –
  • / – Load index view.

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\ContactController;

Route::get('/', [ContactController::class, 'index']);

---

3. Create Livewire Component

• Create contact-component component –

php artisan make:livewire contact-component

This will create 2 files –

• app/Http/Livewire/ContactComponent.php
• resources/views/livewire/contact-component.blade.php

---

app/Http/Livewire/ContactComponent.php

Create 4 class variables –

• $name, $email, and $message use for data binding.
• $success use for form status.

Methods –

• submit() – It calls on <form > submit. Validate the values and assign 1 to $success.
• render() – Load component view.

Completed Code

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ContactComponent extends Component
{

     public $name = "";
     public $email = "";
     public $message = "";
     public $success = 0;

     public function submit(){

          // Validate
          $this->validate([
               'name' => 'required',
               'email' => 'required|email',
               'message' => 'required',
          ]);

          // Success
          $this->success = 1;

     }

     public function render()
     {
          return view('livewire.contact-component');
     }
}

---

resources/views/livewire/contact-component.blade.php

• Add wire:offline to display alert message when the user is offline.
• Display success message if $success == 1.
• Create <form > and add wire:submit.prevent="submit".
• Add input elements and in the submit button add wire:offline.attr="disabled" to disable the button when offline.

Completed Code

<div>

     <div class="container mt-5">

          <!-- Offline alert -->
          <div class="alert alert-danger w-100" wire:offline>
               You are offline. Please check your Internet connection.
          </div>

          <!-- Success Message -->
          @if($success == 1)
          <div class="alert alert-success">
               Submit successfully
          </div>
          @endif

          <h2>Contact form</h2>
          <form wire:submit.prevent="submit">

               <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" class="form-control" id="name" placeholder="Enter name" wire:model="name" value="">
                    @error('name') 
                         <div class="error text-danger">* {{ $message }}</div> 
                    @enderror
               </div>
               <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter email" wire:model="email" value="">
                    @error('email') 
                         <div class="error text-danger">* {{ $message }}</div> 
                    @enderror
               </div>
               <div class="form-group">
                    <label for="message">Message:</label>
                    <textarea class="form-control" id="message" placeholder="Enter message" wire:model="message" ></textarea>
                    @error('message') 
                         <div class="error text-danger">* {{ $message }}</div> 
                    @enderror
               </div>

               <!-- Disabled button when Offline -->
               <button 
                    type="submit" 
                    wire:offline.attr="disabled" 
                    class="btn btn-primary mt-2"
               >Submit</button>
          </form>
     </div>

</div>

---

4. Create View

Create index.blade.php file in resources/views/ folder.

Add contact-component component and include livewire style and script.

Completed Code

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>Detect user is online or offline in Livewire - Laravel</title>

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >

     @livewireStyles

</head>
<body>
     <livewire:contact-component />

     @livewireScripts

</body>
</html>

---

5. Output

View Output

---

6. Conclusion

With this, you can easily alert the user when disconnected from the internet and stop the user to submit the form or any other actions.

You have to add wire:offline to element.

If you found this tutorial helpful then don't forget to share.