README

Laravel SSE

Laravel 包，用于为您的应用程序提供服务器发送事件（SSE）功能。您可以使用此包在用户无需刷新页面的情况下向他们显示即时通知。

要求

PHP >= 8
Laravel 11

安装

通过 Composer

$ composer require khairy/laravel-sse-stream

对于 Laravel < 5.5

将服务提供者添加到 config/app.php 文件中的 providers 部分

Khairy\LaravelSSEStream\SSEServiceProvider::class,

将外观添加到 config/app.php 文件中的 aliases 部分

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

运行以下命令以发布包的配置、迁移和视图文件

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

运行 php artisan migrate 以创建 sselogs 表。

SSE 设置

在 config/sse.php 文件中设置配置选项，然后在您的视图/布局文件中添加以下内容

@include('sse::view')

用法

语法

/**
 * @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')

要在屏幕上显示弹出通知，在您的控制器/事件类中，您可以这样做

use Khairy\LaravelSSEStream\Facades\SSEFacade;

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

自定义通知库

默认情况下，此包使用 noty 来显示通知。您可以通过修改 resources/views/vendor/sse/view.blade.php 文件中的代码来自定义此功能。

自定义 SSE 事件

默认情况下，此包使用 message 事件类型进行流式响应

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

注意 $event = 'message'。您可以自定义此功能，例如，如果您想使用 login 作为 SSE 事件类型

use Khairy\LaravelSSEStream\Facades\SSEFacade;

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

然后您需要自己处理视图中的此事件，如下所示

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>

致谢

许可证

有关更多信息，请参阅许可证文件。

"# laravel-sse-stream"

khairy / laravel-sse-stream

维护者

详细信息