websocket.js вызывает неожиданное обновление приложения React - PullRequest
Новая
       16

websocket.js вызывает неожиданное обновление приложения React

0 голосов
/ 11 октября 2018

У меня есть веб-приложение React, которое позволяет загружать изображения.

После выполнения запроса POST для нескольких изображений (в данном случае 6) на мой API браузер обновляет себя и перезагружает текущую страницу.Стоит отметить, что это приложение позволяет обрезать изображения, и поэтому каждое загружаемое пользователем изображение содержит второе (обрезанное) изображение для загрузки.Таким образом, приведенные выше 6 изображений приводят к 12 запросам POST.

Поведение при обновлении несовместимо и его трудно воспроизвести.Я вставил точки останова в функцию, это поведение происходит.Используя инструменты отладки Chrome, я прошел по потоку и обнаружил, что обновление происходит после этого вызова. 

this.ws.onmessage = function(e) {
    debug('message event', e.data);
    self.emit('message', e.data);
};

Он находится внутри файла websocket.js в библиотеке node_modules/react-dev-tools/node_modules/socketjs-client/lib/transport/websocket.js

Я сузил его до этого файла и исключил любые проблемы из моего кода проекта.

Моя теория заключается в том, что поведение моего приложения вызывает внешний прослушиватель / случай, который вызывает полное обновление браузера.

Я вижу, что рассматриваемый файл находится внутри react-dev-tools, и подумал, что удаление этого модуля может решить проблему, однако это также происходит в моей производственной среде, и поэтому я считаю, что удаление этого файла может привести к поломке сборки.

Любые мысли о том, как улучшить мое расследование или возможные решения, пожалуйста, помогите.

1 Ответ

0 голосов
/ 15 октября 2018

Я не уверен, как вы работаете в своих средах, но, возможно, это поможет ...

Я столкнулся с этой проблемой, и мне понадобилось 3 дня (слишком долго), чтобы сузить ее доnodemon (в разработке) и pm2 (в разработке).Я не уверен, как вы обслуживаете свое приложение / изображения, но для меня каждый раз, когда добавлялся новый файл, служба периодически перезапускалась (иногда загружалась, иногда отключалась).

Для разработки я добавил файл конфигурации nodemon.json в корень приложения (nodemon app.js --config nodemon.json): 

{   
    "ignore": ["uploads"] 
}

Для производства я создал prod.json в корне приложения иrun pm2 start prod.json: 

{
  "apps" : [{
    "name"        : "app-name",
    "ignore_watch" : ["uploads"],
    "script"      : "./app.js",
    "env": {
      "NODE_ENV": "production"
    }
  }]
}

Если вы не используете ни один из вышеперечисленных пакетов, я бы посоветовал изучить возможность перенастройки вашего хранилища и передачи изображений в приложение (в крайнем случае).

...