title: Connection problem with the WebSocket on heroku : "WebSocket closed before the connection is established"
body: <p>I need to make an interactive map that updates the position of users in real-time.
  In localhost, I have no problem. But on Heroku, my WebSocket does not pass.</p>
  <p>I have this error message:</p>
  <blockquote>
  <p>websocket.js:198 WebSocket connection to 'wss://.herokuapp.com:8000/socket.io-client/?EIO=4&amp;transport=websocket' failed: WebSocket is closed before the connection is established.</p>
  </blockquote>
  <p>I have no idea why the connection closes before connecting to Heroku.</p>
  <p>Node.Js Server :</p>
  <pre><code>var express = require('express');
  var cookieParser = require('cookie-parser');
  var logger = require('morgan');
  var path = require('path');
  var app = express();
  var port = 8000;
  var http = require('http');
  var cors = require('cors');
  
  var server = http.createServer(app).listen(port, () =&gt; {
    console.log(`http://localhost:${port}`);
  });
  
  var io = require('socket.io')({ allowEIO3: true, transports: ['websocket'], upgrade: false }).listen(server, {
    path: '/socket.io-client'
  });
  
  app.use(logger('dev'));
  app.use(express.json());
  app.use(express.urlencoded({ extended: false }));
  app.use(cookieParser());
  app.use(express.static(path.join(__dirname, 'public')));
  
  app.use(cors());
  
  io.on('connection', (socket) =&gt; {
    console.log(`a user is connected`);
    socket.on('disconnect', () =&gt; {
      console.log(`a user is disconnected`);
    });
    socket.on('userLocation', ({ id, lat, lng }) =&gt; {
      usersRepository.updateLocation(id, {lat, lng});
      io.emit('travelersNewLocation', { id, lat, lng });
    });
  });
  
   module.exports = app;
  </code></pre>
  <p>React Client:</p>
  <pre><code>
  var socketRef = useRef();
  
  
  useEffect(() =&gt; {
  
          socketRef.current = io.connect(&quot;https://&lt;URI&gt;.herokuapp.com:8000&quot;, {
              path: '/socket.io-client',
              withCredentials: false,
              extraHeaders: {
                  origins: &quot;allowedOrigins&quot;
              },
              transports: ['websocket']
          });
  
          socketRef.current.on(&quot;travelersNewLocation&quot;, ({ id, lat, lng }) =&gt; {
              setChange({ id, lat, lng });
          });
  
          socketRef.current.on(&quot;connect_error&quot;, (err) =&gt; {
              console.log(`connect_error due to ${err.message}`);
          });
  
          return () =&gt; {
              socketRef.current.disconnect();
          }
  
      }, []);
  </code></pre>