hyperf3.0如何实现vue前端的eventStream流输出

2024-07-24 12:17:10 阅读：132 来源： 互联网

标签：

使用Hyperf 3.0实现Vue前端的EventStream流输出，您需要后端和前端都进行相应的设置。以下是详细的步骤：

后端（Hyperf 3.0）:

安装依赖

首先，确保您已经安装了Hyperf框架。如果还没有，请通过Composer安装：
```
composer create-project hyperf/hyperf-skeleton my_project
cd my_project
```
Bash

创建一个控制器

创建一个新的控制器，用于处理流式输出。在app/Controller目录下创建一个新的控制器文件，如EventStreamController.php。

<?php

namespace App\Controller;

use Psr\Http\Message\ResponseInterface as PsrResponseInterface;
use Hyperf\HttpServer\Annotation\AutoController;
use Hyperf\HttpMessage\Stream\SwooleStream;

/**
 * @AutoController()
 */
class EventStreamController
{
    public function stream(): PsrResponseInterface
    {
        $response = context()->getResponse();

        $response = $response->withHeader('Content-Type', 'text/event-stream')
                             ->withHeader('Cache-Control', 'no-cache')
                             ->withHeader('Connection', 'keep-alive');

        $content = "data: " . json_encode(['message' => 'Hello, EventStream!']) . "\n\n";
        $stream = new SwooleStream($content);

        $response = $response->withBody($stream);

        return $response;
    }
}

PHP

配置路由

在config/routes.php中配置新的路由，以访问刚刚创建的控制器方法：

use Hyperf\HttpServer\Router\Router;

Router::get('/event-stream', 'App\Controller\EventStreamController@stream');

PHP

前端（Vue.js）:

创建一个新的Vue组件

创建一个新的Vue组件，用于接收和处理EventStream。

<template>
  <div>
    <h1>EventStream Messages</h1>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
     this.initEventStream();
  },
  methods: {
    initEventStream() {
      const eventSource = new EventSource('http://localhost:9501/event-stream');
      
      eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data);
        this.message = data.message;
      };
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

Vue

确保跨域

如果前后端不在同一域，您需要确保服务器配置允许跨域访问。在Hyperf的config/autoload/middleware.php中，添加一个允许跨域的中间件。

return [
    'http' => [
        \Hyperf\HttpServer\Middleware\CorsMiddleware::class,
    ],
];

PHP

然后，在config/autoload/cors.php文件中设置Cors的配置。

return [
    'settings' => [
        'origin' => ['*'],
        'methods' => ['GET', 'POST', 'PATCH', 'PUT', 'DELETE', 'OPTIONS'],
        'headers' => ['*'],
        'exposed_headers' => [],
        'max_age' => 0,
        'credentials' => false,
        'cache' => 0,
    ],
];

PHP

现在，您可以启动Hyperf服务器，并通过Vue应用实时接收到从Hyperf后端发送的消息流。这样实现了后端Hyperf 3.0和前端Vue.js之间的EventStream通信。

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

hyperf3.0如何实现vue前端的eventStream流输出

后端（Hyperf 3.0）:

前端（Vue.js）: