Laravel 5.6环境下WebSocket推送通知实现方案咨询（Windows系统）

Hey there! Let's work through a solid WebSocket push notification solution for your Laravel 5.6 setup—since you're on Windows and can't use Horizon, I’ve got two practical, free options that I’ve used successfully in similar situations:

这个方案 skips Horizon entirely, works flawlessly on Windows, and plays nicely with your Laravel 5.6 and Angular 5 stack.

Step-by-Step Setup #

• 1. Install Dependencies
  In your Laravel project root:

  composer require pusher/pusher-php-server "~3.0" # Version compatible with Laravel 5.6
  npm install laravel-echo socket.io-client --save
  

• 2. Configure Laravel Broadcasting
  Update your .env file to use Redis as the broadcast driver (no paid Pusher required):

  BROADCAST_DRIVER=redis
  REDIS_HOST=127.0.0.1
  REDIS_PASSWORD=null
  REDIS_PORT=6379
  

  Open config/app.php and make sure App\Providers\BroadcastServiceProvider::class is uncommented.

• 3. Create a Broadcast Event
  Generate an event class for your notifications:

  php artisan make:event NewNotification
  

  Update the event to implement ShouldBroadcast and define your channel/data:

  <?php
  
  namespace App\Events;
  
  use Illuminate\Broadcasting\Channel;
  use Illuminate\Queue\SerializesModels;
  use Illuminate\Foundation\Events\Dispatchable;
  use Illuminate\Broadcasting\InteractsWithSockets;
  use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
  
  class NewNotification implements ShouldBroadcast
  {
      use Dispatchable, InteractsWithSockets, SerializesModels;
  
      public $notificationData;
  
      public function __construct($notificationData)
      {
          $this->notificationData = $notificationData;
      }
  
      public function broadcastOn()
      {
          // Use a public or private channel based on your needs
          return new Channel('notifications');
      }
  }
  

• 4. Set Up laravel-echo-server
  Install the server globally, initialize it, and start the service:

  npm install -g laravel-echo-server
  laravel-echo-server init # Follow the wizard, select Redis as the driver
  laravel-echo-server start
  

• 5. Angular 5 Frontend Integration
  Initialize Echo in your Angular app (e.g., in app.component.ts):

  import * as io from 'socket.io-client';
  import Echo from 'laravel-echo';
  
  constructor() {
      const echo = new Echo({
          broadcaster: 'socket.io',
          host: window.location.hostname + ':6001', // Default laravel-echo-server port
          client: io
      });
  
      // Listen for notifications
      echo.channel('notifications')
          .listen('NewNotification', (e) => {
              console.log('Received push notification:', e.notificationData);
              // Add logic to display the notification (e.g., toast, UI update)
          });
  }
  

• 6. Trigger the Notification
  Dispatch the event from your Laravel controller/route:

  use App\Events\NewNotification;
  
  public function sendNotification()
  {
      $notificationData = [
          'title' => 'New Alert',
          'content' => 'This is a test push notification',
          'user_id' => 123
      ];
  
      event(new NewNotification($notificationData));
  
      return response()->json(['status' => 'Notification sent']);
  }
  

Soketi is an open-source, Pusher-compatible WebSocket server that’s free, easy to install, and works on Windows. It doesn’t require Redis, making it a super lightweight option.

Step-by-Step Setup #

• 1. Install & Start Soketi

  npm install -g @soketi/soketi
  soketi start # Runs on port 6001 by default
  

• 2. Configure Laravel
  Update .env to use Pusher driver but point to your local Soketi server:

  BROADCAST_DRIVER=pusher
  PUSHER_APP_ID=app-id
  PUSHER_APP_KEY=app-key
  PUSHER_APP_SECRET=app-secret
  PUSHER_HOST=127.0.0.1
  PUSHER_PORT=6001
  PUSHER_SCHEME=http
  PUSHER_APP_CLUSTER=mt1
  

  Update config/broadcasting.php to match:

  'pusher' => [
      'driver' => 'pusher',
      'key' => env('PUSHER_APP_KEY'),
      'secret' => env('PUSHER_APP_SECRET'),
      'app_id' => env('PUSHER_APP_ID'),
      'options' => [
          'cluster' => env('PUSHER_APP_CLUSTER'),
          'host' => env('PUSHER_HOST'),
          'port' => env('PUSHER_PORT'),
          'scheme' => env('PUSHER_SCHEME'),
          'encrypted' => false,
      ],
  ],
  

• 3. Angular 5 Frontend Integration
  Use Laravel Echo with Pusher JS (compatible with Soketi):

  import Echo from 'laravel-echo';
  import Pusher from 'pusher-js';
  
  window.Pusher = Pusher;
  
  constructor() {
      const echo = new Echo({
          broadcaster: 'pusher',
          key: 'app-key', // Match PUSHER_APP_KEY from .env
          cluster: 'mt1',
          wsHost: window.location.hostname,
          wsPort: 6001,
          forceTLS: false,
          disableStats: true
      });
  
      echo.channel('notifications')
          .listen('NewNotification', (e) => {
              console.log('Received notification:', e.notificationData);
              // Handle notification display
          });
  }
  

• 4. Trigger the Notification
  Same as方案1—dispatch the NewNotification event from your Laravel code.

For your Android app, use the Socket.io client library (e.g., io.socket:socket.io-client:1.0.0) or Pusher’s Android SDK (for the Soketi option) to connect to the WebSocket server. Example with Socket.io:

import io.socket.client.IO;
import io.socket.client.Socket;
import org.json.JSONObject;

// Initialize connection
Socket mSocket = IO.socket("http://your-laravel-server:6001");
mSocket.connect();

// Listen for notifications
mSocket.on("notifications:NewNotification", args -> {
    JSONObject data = (JSONObject) args[0];
    String title = data.getString("title");
    String content = data.getString("content");
    // Show system notification
    showNotification(title, content);
});

Both of these options are tested and work on Windows, no Horizon required. Pick方案1 if you already use Redis, or方案2 for a lighter, Pusher-compatible setup.

内容的提问来源于stack exchange，提问作者Pranav Mandlik