README

![Latest Version on Packagist][ico-version] ![Total Downloads][ico-downloads]

Laravel SSE

Laravel package to provide Server Sent Events functionality for your app. You can use this package to show instant notifications to your users without them having to refresh their pages.

Requirements

PHP >= 8
Laravel 11 s

Installation

Via Composer

$ composer require khairy/laravel-sse-stream

For Laravel < 5.5:

Add Service Provider to config/app.php in providers section

Khairy\LaravelSSEStream\SSEServiceProvider::class,

Add Facade to config/app.php in aliases section

'SSE' => Khairy\LaravelSSEStream\Facades\SSEFacade::class,

Publish package's config, migration and view files by running below command:

php artisan vendor:publish --provider="Khairy\LaravelSSEStream\SSEServiceProvider"

Run php artisan migrate to create sselogs table.

Setup SSE

Setup config options in config/sse.php file and then add this in your view/layout file:

@include('sse::view')

Usage

Syntax:

/**
 * @param string $message : notification message
 * @param string $type : alert, success, error, warning, info
 * @param string $event : Type of event such as "EmailSent", "UserLoggedIn", etc
 */
SSEFacade::notify($message, $type = 'info', $event = 'message')

To show popup notifications on the screen, in your controllers/event classes, you can do:

use Khairy\LaravelSSEStream\Facades\SSEFacade;

public function myMethod()
{
    SSEFacade::notify('hello world....');
    
    // or via helper
    sse_notify('hi there');
}

Customizing Notification Library

By default, package uses noty for showing notifications. You can customize this by modifying code in resources/views/vendor/sse/view.blade.php file.

Customizing SSE Events

By default, pacakge uses message event type for streaming response:

SSEFacade::notify($message, $type = 'notification', $event = 'message')

Notice $event = 'message'. You can customize this, let's say you want to use login as SSE event type:

use Khairy\LaravelSSEStream\Facades\SSEFacade;

public function myMethod()
{
    SSEFacade::notify('hello world....', 'notification', 'login');
    
    // or via helper
    sse_notify('hi there', 'notification', 'login');
}

Then you need to handle this in your view yourself like this:

javascript

<script>
var es = new EventSource("{{route('__sse_stream__')}}");

es.addEventListener("UserLoggedIn", function (e) {
    var data = JSON.parse(e.data);
    alert(data.message);
}, false);

</script>

vuejs

<template>
  <div>
    <h1>Server-Sent Events in Vue.js</h1>
    <ul>
      <li v-for="message in messages" :key="message.id">{{ message.data }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      eventSource: null, // To hold the EventSource instance
      messages: [] // To hold the received messages
    };
  },
  mounted() {
    this.startSSE();
  },
  beforeDestroy() {
    this.stopSSE();
  },
  methods: {
    startSSE() {
      this.eventSource = new EventSource('/sse/sse_stream');

      this.eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data);
        this.messages.push(data);
      };

      this.eventSource.addEventListener('reconnect', (event) => {
        console.log('Reconnecting SSE...');
        this.stopSSE();
        setTimeout(this.startSSE, 1000); // Reconnect after 1 second
      });

      this.eventSource.onerror = (event) => {
        if (this.eventSource.readyState === EventSource.CLOSED) {
          console.error('SSE connection was closed.');
        } else {
          console.error('SSE encountered an error:', event);
        }
      };
    },
    stopSSE() {
      if (this.eventSource) {
        this.eventSource.close();
        this.eventSource = null;
      }
    }
  }
};
</script>

<style>
/* Add any necessary styles here */
</style>

Credits

License

Please see the license file for more information.

"# laravel-sse-stream"

khairy / laravel-sse-stream

Maintainers

Details