Webcomponet reading SSE events: net::ERR_EMPTY_RESPONSE after some events successfully read

Viewed 393

I created two very simple WebComponents. Both has a listener to SSE service built in ServerJs. The only difference is that one endpoint responds every 5 seconds a simple data and other endpoint consume a Kafka Topic and responds a simple message any time a new message is posted in such topic.

When I start the backend (ie. both endpoint) both webcompnets work properly. One or two minutes later the webcomponet which consume the Kafka message throw NodeJs endpoint just crash with no worth message. (Well not worth at least for me).

Checking the NodeJs service, I can see it is working properly. I mean, whenever I post a message to the topic (kafka-console-producer.bat --broker-list localhost:9092 --topic test 'data: testing') I can see NodeJs consumer.on('message', function (message){...) is triggered immediatly.

Strange for me is that the first messages the webcomponent receives but then it just stop to receive without any exception (well, at least I didn't find any exception in Chrome Debug).

All the code are in github and just npm instal & npm start for both back end will work if you have zookeeper server + kafka server + topic named test and send any messaage like 'data: my test':

Front End: https://github.com/jimisdrpc/simplest-webcomponet/blob/master/public/index.html

Back End: https://github.com/jimisdrpc/simplest-kafkaconsumer

Here are the most relevant piece:

Endpoint responding the message catch from Kafka topic:

...
response.writeHead(200, {
        Connection: "keep-alive",
        "Content-Type": "text/event-stream",
        "Cache-Control": "no-cache",
        'Access-Control-Allow-Origin': '*'
      });

      consumer.on('message', function (message) {
        response.write("event: sendMsgFromKafka\n");
        response.write('id: ' + i++ + '\n');
        response.write('data: ' + message.value);
        response.write("\n\n");
      });

Frontend: entire webcomponent reading successfully only the first events and crashing after few tentatives:

const template = document.createElement('template');
template.innerHTML = `<input id="inputKafka"/> `;

class InputKafka extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {

    this.attachShadow({mode: 'open'})
    this.shadowRoot.appendChild(template.content.cloneNode(true))

    const inputKafka = this.shadowRoot.getElementById('inputKafka');

    var source = new EventSource('http://localhost:5000/kafka_sse');

    source.addEventListener('sendMsgFromKafka', function(e) {
      console.log('fromKafka');
      inputKafka.value = e.data;
    }, false);

  }
  attributeChangedCallback(name, oldVal, newVal) {
    console.log('attributeChangedCallback');
  }

  disconnectedCallback() {
    console.log('disconnectedCallback');
  }
}

window.customElements.define("input-kafka", InputKafka);

I guess it is not related to Kafka since I can see NodeJs consume successfully always the topic message. Maybe I have to set up some extra parameter in response Header so it doesn't stop after some time. Interesting is that with other webcomponet which reads a NodeJs service that has an interval o 5 seconds for an automatic response never stops to work (you can check the whole code in github if you want but it iexactly the same except for the fact that instead of consuming a Kafka topic is has setInterval(() => {..., 5000}.

Sometimes when it stops to read the NodeJs Kafka Service I get GET http://localhost:5000/kafka_sse net::ERR_EMPTY_RESPONSE exception but not always.

To sum up: you can think the Webcomponet consuming message via NodeJs architecture as:

Webcomponent Eventsource Listener added when loaded the page in Browser -> Alive connection Opened -> Kafka Topic Message produced -> NodeJs Kafka Consumer consume message -> HTTP Server responds to Webcomponent

And the one without kafka as:

Webcomponent Eventsource Listener added when loaded the page in Browser -> Alive connection Opened -> setInterval -> HTTP Server responds to Webcomponent according to the interval and never crashes

My main question is: why is this architecture stopping after few tentatives while exactly same architecture but with regular events doesn't? Some insights regard possible tricks to keep alive the connection or some extra details since NodeJs is single thread will be highly appreciated.

0 Answers
Related