# Pusher Setup

### Overview

Socialswap supports two notification methods for real-time messaging:

* AJAX Polling (Default): Works out of the box, no additional setup required
* Pusher (Real-time): Provides instant WebSocket-based messaging with better performance

This guide will walk you through setting up Pusher for enhanced real-time messaging.

### Prerequisites

Before starting, ensure you have:

* Node.js and npm installed on your server/hosting
* Access to your hosting control panel or terminal
* A Pusher account (free tier available)

### Step-by-Step Setup

#### Step 1: Create a Pusher Account

1. Visit Pusher: Go to pusher.com
2. Sign Up: Create a free account or log in if you already have one
3. Create App: Click "Create App" and fill in the details:\
   ![](https://1156155356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fpb8ANp0ZN6ZvWH8LcR5c%2Fuploads%2FKBjBagdimQfvWhSsC1af%2FScreenshot%202025-07-31%20202924.png?alt=media\&token=78828e1c-1765-4e30-aeba-de75e67a0ef4)
4. Get App Credentials: After creating the app, you'll see your credentials:
   1. App Key
   2. App ID
   3. App Secret
   4. Cluster<br>

#### Step 2: Install Node.js Dependencies

If you have terminal access:

```bash
# Navigate to your project directory
cd /path/to/your/platform

# Install required packages
npm install laravel-echo pusher-js

# Build the assets
npm run build
```

If you're using shared hosting without terminal access:

1. Download Node.js: Install Node.js on your local computer
2. Local Setup: Run the npm commands on your local copy of the project
3. Upload Files: Upload the generated node\_modules folder and updated files to your hosting

#### Step 3: Configure Environment Variables

Add these variables to your .env file if it is not there yet:

```
# Broadcasting Configuration
BROADCAST_DRIVER=pusher

# Pusher Configuration (replace with your actual credentials)
PUSHER_APP_ID=your_pusher_app_id
PUSHER_APP_KEY=your_pusher_app_key
PUSHER_APP_SECRET=your_pusher_app_secret
PUSHER_APP_CLUSTER=your_pusher_cluster

MIX_PUSHER_APP_KEY=your_pusher_app_key
MIX_PUSHER_APP_CLUSTER=your_pusher_cluster
```

#### Step 4: Clear Configuration Cache

Run this command to clear the configuration cache:

```bash
php artisan config:clear
php artisan cache:clear
```

#### Step 5: Enable Pusher in Admin Panel

1. Login to Admin Panel: Access your admin dashboard
2. Go to Settings: Navigate to Settings → Global Settings
3. Find Notification Method: Scroll to the "Real-time Notification Method" section
4. Select Pusher: Change from "AJAX Polling" to "Pusher (Real-time)"
5. Save Settings: Click "Save Changes"

#### Step 6: Test the Setup

1. Open Two Browser Windows: Open your auction platform in two different browser windows
2. Login as Different Users: Log in as two different users
3. Start a Conversation: Have one user send a message to another
4. Verify Real-time: Check if messages appear instantly without page refresh

### Troubleshooting

#### Common Issues and Solutions

**Issue 1: "Echo is not defined" Error**

Solution:

* Ensure you ran npm run build after installing dependencies
* Check that node\_modules folder exists in your project root
* Verify Pusher credentials in .env file

**Issue 2: Messages Not Appearing in Real-time**

Solution:

* Check browser console for JavaScript errors
* Verify Pusher credentials are correct
* Ensure BROADCAST\_DRIVER=pusher is set in .env
* Clear browser cache and reload the page

**Issue 3: Node.js Not Available on Hosting**

Solution:

* Use a hosting provider that supports Node.js (VPS, dedicated hosting)
* Consider using a local development environment to build assets
* Upload the built assets to your hosting

**Issue 4: Pusher Connection Fails**

Solution:

* Check your Pusher app credentials
* Verify the cluster region matches your selection
* Ensure your domain is allowed in Pusher app settings
* Check if your hosting blocks WebSocket connections

#### Debug Mode

Enable debug mode to see detailed error messages:

in .env, add APP\_DEBUG=true

Check these locations for error messages:

* Browser Console: Press F12 and check the Console tab
* Laravel Logs: Check storage/logs/laravel.log
* Pusher Dashboard: Monitor connections in your Pusher app dashboard

### Fallback System

The system automatically falls back to AJAX polling if:

* Pusher is not configured
* WebSocket connections fail
* Pusher credentials are invalid

This ensures messaging always works, even if Pusher setup fails.