How to Detect Offline/Online Status in ReactJS

Balwant Chaudhary — Mon, 05 May 2025 17:49:50 +0000

Have you ever wanted to notify users when they lose internet connectivity in your React app?

Today we build AppShell component together that monitors the browser's online/offline status and shows a user friendly message when the user goes offline.

Why?

Realtime apps (like chat, stock tickers, etc.) depend on live connectivity.
Offline-friendly experiences build trust and reliability.
It's surprisingly easy to implement.

The code

Lets Wrap the entire app (or any major layout component) with AppShell:

Behind the Scenes.

navigator.onLine: Detects the initial connection status.
window.addEventListener("online"/"offline"): Reacts to changes in network status.
useEffect: Registers and cleans up event listeners when the component mounts/unmounts.

Let me know how you're handling offline states in your apps :)

Build Real-Time Notifications in Laravel + Inertia.js + React with Reverb

Balwant Chaudhary — Sat, 03 May 2025 11:06:58 +0000

Overview
In this post, we'll walk through a production-grade setup that enables public, app-wide real-time notifications using:

Laravel 12 (backend)
Inertia.js + React (frontend)
Laravel Reverb for broadcasting
Laravel Echo for listening
Vite + React for asset compilation

No separate API or frontend deployment is needed everything is part of the same app.

This setup enables you to:

Send real-time messages to all visitors (even unauthenticated)
Use public/Private channels via Reverb

Once you install a Laravel + Inertia.js application on a Windows machine, you’ll need to set up a Redis server to enable real-time broadcasting and queue support. Since Redis does not officially support Windows, the installation can be a bit tricky. Follow the steps below to set it up properly:

Here’s how to get it:

*Download the MSI file: *
https://github.com/MicrosoftArchive/redis/releases/download/win-3.0.504/Redis-x64-3.0.504.msi

Install Redis:

Once downloaded, open the .msi installer and follow the on-screen instructions.
The installer will add Redis to your Windows machine, and it should be available for use.

Alternatively, if you need a more up-to-date version or a better-supported method for running Redis on Windows, consider using Docker or running Redis within a Linux VM using tools like WSL (Windows Subsystem for Linux), which provides a more stable environment for running Redis.

XAMPP Setup for Redis
As xampp does not have the Redis defualt so we need to setup it first download the zip file and copy the php_redis.dll file inside C:/xampp/php/ext and restart the xampp. Now open the console and type command.

php -m | findstr redis

Now install predis via command : composer install predis/predis

Lets configure Reverb Server Side

By default, broadcasting is not enabled in new Laravel applications. To enable broadcasting, you can use the install:broadcasting

php artisan install:broadcasting

This command will create the config/broadcasting.php configuration file. It will also generate the routes/channels.php file, where you can register your application's broadcast authorization routes and callbacks.

When you run the above command, Laravel will prompt you to install Laravel Reverb, the official WebSocket server.

Use these values when prompted:
• Run in development mode: Yes
• Port to serve from: 6001
• Database for presence channels: redis
• Laravel authentication server: http://localhost
• Serve on HTTP or HTTPS: http
• Generate client ID/Key for API: No
• Setup cross-domain access to the API: No
• Configuration file name: laravel-echo-server.json

Client-Side Installation for Reverb

To enable real-time event listening in your application, Laravel Echo provides a clean and elegant JavaScript library that simplifies subscribing to channels and handling events broadcast by your backend. Since Reverb uses the Pusher protocol for WebSocket communication, you'll also need the pusher-js library.

You can install both dependencies using the following command:

Once Laravel Echo is installed, the next step is to initialize a new Echo instance in your application's JavaScript. Inside resources/js/bootstrap.js file, which comes pre-configured with every Laravel project. This ensures Echo is loaded and ready to handle real-time events across your application.Or you can make echo.js if its not present and call it inside bootstrap.js

Lets Make a fronted React Component to listen the events

In React Component I'm listing for .AppNotice event.Now We need to call this component in Root.

Create First Event

php artisan make:event AppNoticeBroadcasted via this command you can make an Event.

Inside the channel.php we can define the Broadcast channel public.app.

Now Setup the Route under web.php file.

Event Class

Finally we broadcast out first Message :)
Hit this in browser and and run app in another browser instance to see the result.

http://127.0.0.1:8000/send-message

Setting up real-time functionality in a Laravel project using Echo and Reverb can significantly enhance the user experience by enabling instant updates, such as in-app notifications, chat systems, or live data feeds. By integrating tools like laravel-echo, pusher-js, and concurrently, you can streamline both development and performance, keeping your workflow smooth and your codebase organized.

This setup is ideal for in-app, real-time interactions. However, for push notifications outside the app such as mobile or browser alerts—services like Firebase Cloud Messaging or OneSignal are more appropriate and can complement your real-time infrastructure.

This command does the following:

npm run dev – Compiles and watches your frontend assets.
php artisan serve – Starts the local development server.
php artisan inertia:start-ssr – Boots the Inertia.js server-side rendering service.
php artisan queue:work – Begins processing queued jobs.
_php artisan reverb:start _– Launches the Reverb WebSocket server for real-time features.

DEV Community: Balwant Chaudhary