Server Send Events

[ihormartyniuk]

Hi. I use your yii2-angular2-boilerplate rest API. I have problem with realization of SSE(Server Send Events) feature on backend side of project. I loged in angular2 app, the authorization is successfully, all urls are accessible, but when i try to do request for my SSE action have error - 415 (Unsupported Media Type). May you provide any example of using SSE in your project, please?
It is necessary for me!!!)))

Thanks a lot for any answer!

[Chris Lee]

Hey @ihormartyniuk

For fixing 415 (Unsupported Media Type) is simply setting content negotiator in behaviors:

public function behaviors()
{
	//...existing code...
	$behaviors['contentNegotiator'] = [
		'class' => \yii\filters\ContentNegotiator::className(),
		'only' => ['index'],
		'formatParam' => '_format',
		'formats' => [
			'text/event-stream' => \yii\web\Response::FORMAT_RAW,
		],
	];
	//...existing code...
}

However, I was trying to make working example for you. But I got no luck as well.

What I did:

• Used https://github.com/odannyc/yii2-sse in Yii2
• Setup content negotiator for handling 'text/event-stream'
• Exempt CORS-pre-flight request for action method
• Used https://github.com/AlexGalays/EventSource in Angular2

When angular code calls EventSource, the request hangs more than 45000 milliseconds and no results back.

If you succeed, could you share your code how you make it working?

[ihormartyniuk]

Hi, thanks for your full and informative answer for me. I got a step of app when have an error
Fetch API cannot load http://domain.my/sse/message. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. in my browser console. But so interesting that, status code is 200 OK and authorization is success)

I installed extension of EventSource wich use AlexGalays and add headers for authorization.
I added yii2-sse extension developed by odannyc.

Every time angular app trying to connect to my yii app and has previous error without any time delay.

I need your help with CORS.
And it will be done!)

[ihormartyniuk]

Hi @chrisleekr
I got success with my issue.

What I did:

• Used https://github.com/odannyc/yii2-sse in Yii2

• I installed extension of EventSource wich use AlexGalays in https://github.com/AlexGalays/EventSource and add headers for authorization.
  eventSource = new EventSource('http://domain.my/sse/message', { headers: {'Authorization': 'Bearer ' + token}});

• Add your code to behavior in my Controller
  public function behaviors()
  {
  //...existing code...
  $behaviors['contentNegotiator'] = [
  'class' => \yii\filters\ContentNegotiator::className(),
  'only' => ['index'],
  'formatParam' => '_format',
  'formats' => [
  'text/event-stream' => \yii\web\Response::FORMAT_RAW,
  ],
  ];
  //...existing code...
  }

• Action in my Controller
  $sse = Yii::$app->sse;
  $sse->set('allow_cors', true);
  $sse->set('keep_alive_time', 900);
  $sse->addEventListener('message', new MessageEventHandler());
  $sse->start();
  $sse->flush();

Thanks.

[Chris Lee]

Hi @ihormartyniuk,

Good to hear and thank you for sharing the solution.

Hope you have good day.

Chris