Получение net :: ERR_INCOMPLETE_CHUNKED_ENCODING 200 при использовании потока событий с использованием EventSource в ReactJs - PullRequest
Новая
       42

Получение net :: ERR_INCOMPLETE_CHUNKED_ENCODING 200 при использовании потока событий с использованием EventSource в ReactJs

0 голосов
/ 04 июня 2019

У меня есть очень простая служба узлов, предоставляющая конечную точку, предназначенную для использования соединения Server Send Events (SSE), и очень простой клиент ReactJs, использующий его через EventSource.onmessage.

Во-первых, когда я устанавливаю точку отладкив updateAmountState (Chrome Dev) я не вижу его вызванного.

Во-вторых, я получаю net :: ERR_INCOMPLETE_CHUNKED_ENCODING 200 (ОК).Согласно https://github.com/aspnet/KestrelHttpServer/issues/1858 «ERR_INCOMPLETE_CHUNKED_ENCODING в chrome обычно означает, что в середине записи в тело ответа было выдано неперехваченное исключение из приложения».Затем я проверил на стороне сервера, чтобы найти ошибку.Что ж, я установил точку останова в нескольких местах в server.js в setTimeout (() => {... и я вижу, что она запускается периодически. Я ожидал, что каждая строка будет выполняться только один раз.пытаясь постоянно вызвать бэкэнд и получить некоторую ошибку.

Все приложение, как фронт в ReactJ, так и сервер в NodeJ, можно найти в https://github.com/jimisdrpc/hello-pocker-coins.

бэкэнд: 

const http = require("http");

http
  .createServer((request, response) => {
    console.log("Requested url: " + request.url);

    if (request.url.toLowerCase() === "/coins") {
      response.writeHead(200, {
        Connection: "keep-alive",
        "Content-Type": "text/event-stream",
        "Cache-Control": "no-cache"
      });

      setTimeout(() => {
        response.write('data: {"player": "Player1", "amount": "90"}');
        response.write("\n\n");
      }, 3000);

      setTimeout(() => {
        response.write('data: {"player": "Player2", "amount": "95"}');
        response.write("\n\n");
      }, 6000);
    } else {
      response.writeHead(404);
      response.end();
    }
  })
  .listen(5000, () => {
    console.log("Server running at http://127.0.0.1:5000/");
  });

внешний интерфейс: 

import React, { Component } from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import { getInitialCoinsData } from "./DataProvider";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: getInitialCoinsData()
    };

    this.columns = [
      {
        Header: "Player",
        accessor: "player"
      },
      {
        Header: "Amount",
        accessor: "amount"
      }
    ];
    this.eventSource = new EventSource("coins");
  }


  componentDidMount() {
    this.eventSource.onmessage = e =>
      this.updateAmountState(JSON.parse(e.data));
  }

  updateAmountState(amountState) {
    let newData = this.state.data.map(item => {
      if (item.amount === amountState.amount) {
        item.state = amountState.state;
      }
      return item;
    });

    this.setState(Object.assign({}, { data: newData }));
  }

  render() {
    return (
      <div className="App">
        <ReactTable data={this.state.data} columns={this.columns} />
      </div>
    );
  }
}

export default App;

Исключение, которое я вижу в хроме:

enter image description here

Поэтому мой прямой вопрос: почемуЯ получаю ERR_INCOMPLETE_CHUNKED_ENCODING 200? Я что-то упускаю в бэкэнде или во внешнем интерфейсе?

Могут помочь некоторые советы:

  1. Почему я вижу веб-сокет в состоянии ожиданиятак как я вообще не использую websocket? Я знаю основное отличие (websocket является двусторонним, спереди назад и сзади и спереди, и это другой протокол, в то время как SSE работает через http и только спереди).я не собираюсь использовать websocket вообще,(см. синюю строку в принтскрине колокольчика)

  2. Почему я вижу источник событий с 0 байтами и 236 байтами оба сбойными.Я понимаю, что источник событий - это именно то, что я пытаюсь использовать, когда я закодировал "this.eventSource = new EventSource (" coins ");".(см. строчку для чтения на принтере ниже)

  3. Очень странно, по крайней мере для меня, когда-то, когда я убивал подачу, я мог видеть вызванный метод updateAmountState.

  4. Если в браузере вызвать localhost: 5000 / coins, я вижу, что сервер отвечает на ответ (обе строки json).Могу ли я предположить, что я правильно закодировал сервер, а ошибки - это что-то исключительно во внешнем интерфейсе?

...