kibana/examples/sse_example/public/application.tsx
Alejandro Fernández Haro bdf7823c54
[SSE] Fix EventSource streams (#213151)
## Summary

Resolves #212919

We noticed that setting the header `'Content-Type':
'text/event-stream',` didn't work as the browser's native EventSource
implementation.

```JS
      return res.ok({
        headers: {
          'Content-Type': 'text/event-stream',
          'Cache-Control': 'no-cache',
        },
        body: observableIntoEventSourceStream(events$ as unknown as Observable<ServerSentEvent>, {
          signal: abortController.signal,
          logger,
        }),
      });
```

The reason, apparently, is that we need to flush the compressor's buffer
negotiated in the HTTP request.

### How to test it:

Run Kibana with examples `yarn start --no-base-path --run-examples
--http2` and open the SSE example app in Kibana. You should see a clock
updating every second in the UI (the clock is coming from the server).

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-03-11 11:33:11 +01:00

26 lines
1 KiB
TypeScript

/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the "Elastic License
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
* Public License v 1"; you may not use this file except in compliance with, at
* your election, the "Elastic License 2.0", the "GNU Affero General Public
* License v3.0 only", or the "Server Side Public License, v 1".
*/
import React from 'react';
import ReactDOM from 'react-dom';
import { AppMountParameters, CoreStart } from '@kbn/core/public';
import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
import { SseExampleApp } from './components/app';
export const renderApp = (coreStart: CoreStart, { element }: AppMountParameters) => {
const { http } = coreStart;
ReactDOM.render(
<KibanaRenderContextProvider {...coreStart}>
<SseExampleApp http={http} />
</KibanaRenderContextProvider>,
element
);
return () => ReactDOM.unmountComponentAtNode(element);
};