WebSocket уже находится в состоянии ЗАКРЫТО или ЗАКРЫТО. (React / Socket iO / Mapbox GL JS) - PullRequest
Новая
       4

WebSocket уже находится в состоянии ЗАКРЫТО или ЗАКРЫТО. (React / Socket iO / Mapbox GL JS)

0 голосов
/ 09 марта 2020

У меня есть простое приложение, которое извлекает данные из базы данных Mon go, используя сервер express, который я настроил. Я использую Socket iO для передачи данных во внешний интерфейс при наличии соединения с БД. Однако, на моем клиентском интерфейсе, если вкладка браузера неактивна более 2 минут, я получаю сообщение об ошибке консоли: WebSocket is already in CLOSING or CLOSED state., после чего страница автоматически перезагружается, и я получаю сообщение об ошибке There is already a source with this ID. Я думаю, что здесь происходит то, что данные извлекаются снова, и они дублируют данные, извлекаемые из файла сервера.

Любая помощь будет принята с благодарностью - спасибо.

server.js код: 

// CONNECT TO MONGO DB USING MONGO CLIENT
MongoClient.connect(mongoUrl, { useUnifiedTopology: true }, (err, client) => {

  // DATABASE AND COLLECTION
  const db = client.db('- - -');

   io.on('connection', function (socket) {

    // AREAS TABLE
    db.collection('- - -').find({}).toArray(function(err, docs) {
      // LOOP OVER COLLECTION DOCUMENTS
      socket.emit('areas_documents_event', docs);
    });

    // LOCATORS TABLE
    db.collection('- - -').find({}).toArray(function(err, docs) {
      socket.emit('locators_documents_event', docs);
    });

  }); // END IO ON CONNECTION

}); // END MONGO CLIENT ON CONNECT

map.js файл: 

  componentDidMount() {
    Mapboxgl.accessToken = '- - -'

    this.map = new Mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      zoom: 7,
      center: [-76.1474, 43.0481],
    });

    // ON MAP LOAD...
    this.map.on('load', () => {
        // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -         
        //                           SOCKET IO CLIENT
        // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -        
        // window.origin
        this.socket = io(window.origin, {reconnection: true});

        // SOCKET ON CONNECT
        this.socket.connect();

        // ON 'areas_documents_event' SOCKET EVENT
        this.socket.on('areas_documents_event', (data) => {
          console.log('AREAS DOCUMENT ', data);

          data.forEach(function(doc) {      
            doc.properties.id = doc._id;            
            return doc;
          });

          this.setState({
            geo_json_src: {
              type: 'FeatureCollection',
              features: [...data]
            }
          }, 
          () => {

            // CALL HELPER FUNCTION TO ADD SOURCE AND LAYER (source, layer, data, color, width)        
            this.addSourceAndLayer('area_feature', 'area_feature', this.state.geo_json_src, 'red', 2, '#000', 0.2);

          });

          this.map.on('click', 'area_feature', this.clickLayerData);

        });

        // ON 'locators_documents_event' SOCKET EVENT
        this.socket.on('locators_documents_event', (data) => {
          console.log('LOCATORS DOCUMENT ', data);

          this.setState({
            locators: [...data]
          });

        });

    }); 
  }
...