Real-Time Notifications & WebSocket

Real-Time Notifications & WebSocket

NexusRMS uses Laravel Reverb for WebSocket-powered real-time notifications. Every notification, badge award, and urgent announcement is delivered instantly without polling, keeping your entire team informed the moment something happens.

WebSocket Integration via Laravel Reverb

All real-time communication flows through Laravel Reverb, a first-party WebSocket server. Connections are authenticated using your session token, and channels are scoped per user or broadcast publicly for platform-wide events.

useNotificationsWebSocket Composable

The frontend composable manages all WebSocket subscriptions and event handling:

• subscribeToNotifications(userId) — listens on a private user channel for NotificationCreated, NotificationRead, and NotificationDeleted events. Automatically updates the Pinia notification store.
• subscribeToCommunityChannel(identityId) — listens for community events including TrophyAwarded, BadgeAssigned, WarningIssued, MentionCreated, and ThreadReply.
• subscribeToUrgentAnnouncements() — listens on a public channel for UrgentAnnouncement events visible to all connected users.
• unsubscribe() — cleans up all active channel subscriptions, typically called on component unmount or logout.

Toast Notifications (NotificationToast.vue)

When a real-time notification arrives, a toast appears on screen with the following design:

Property	Detail
Background colour (urgent)	Error red
Background colour (high)	Warning orange
Background colour (normal)	Primary blue
Max width	400px
Min width	300px
Border radius	12px
Elevation	8

Each toast displays an avatar with the notification type icon, a bold truncated title, body text, a priority chip, and a relative timestamp. A white progress bar (3px height) animates from 100% to 0% over the display duration (default 5000ms). The timer pauses when you hover over the toast, and you can dismiss it manually via the close button.

Toast Positioning

Toasts can be positioned in six locations, configurable per user preference:

• top-right (default)
• top-left
• top-center
• bottom-right
• bottom-left
• bottom-center

Toasts enter with a slide animation from off-screen in the direction of their position.

Icon Mapping by Notification Prefix

Prefix	Icon
project	mdi-clipboard-text
equipment	mdi-speaker
quote	mdi-file-document-edit
invoice	mdi-receipt-text
payment	mdi-cash-multiple
crew	mdi-account-group
repair	mdi-wrench
warehouse	mdi-warehouse
transport	mdi-truck
client	mdi-domain
communication	mdi-message-text
system	mdi-cog

Desktop Notifications

NexusRMS can send browser-level notifications using the browser Notification API. On first use, the system requests permission from the user. If granted, notifications appear in the operating system's notification centre even when the browser tab is not focused.

Sound and Vibration

• Sound notifications — an audio alert plays when a notification arrives. Sound respects quiet hours settings and can be toggled off in Communication Settings.
• Vibration support — on mobile devices, the Vibration API provides a short haptic pulse for incoming notifications.

Urgent Announcement Banner

The UrgentAnnouncementBanner component renders a full-width banner at the top of the application when a platform-wide urgent announcement is broadcast. It remains visible until dismissed or the announcement expires, ensuring critical information reaches every user regardless of which page they are viewing.

Automatic Unread Count Updates

The Pinia notification store automatically increments or decrements the unread count whenever a NotificationCreated or NotificationRead event is received via WebSocket. The count badge in the top navigation bar updates instantly without requiring a page refresh.