[help wanted] Manually proxy settings to open connection with websocket.org

Created by: yuzhva

Hey hi.

Since react-scripts@1.0.0 and higher create-react-app support manual proxy settings.

After creating app like

creare-react-app proxy-test

I installed socket yarn add socket.io-client, added proxy settings to the package.json like:

  "proxy": {
    "/": {
      "target": "ws://echo.websocket.org",
      "ws": true
    }
  }

changed src/App.js:

import io from 'socket.io-client';

class App extends Component {
  constructor(props) {
    super(props);
   
    this.socket = io();
  }

  componentDidMount() {
    console.log('MOUNTED');
    this.socket.on('connect', () => console.log('Connected to the socket');
  }

But when I'm opening the console, I can see that request actually goes through HTTP and I'm getting 404 response, because there is no that page (this page exists only for web socket request)

Request URL: http://localhost:3000/socket.io/?EIO=3&transport=polling&t=LmXuie9
Request Method: GET
Status Code: 404 Not Found

Expected behavior:

Request URL: wss://localhost:3000/socket.io/?EIO=3&transport=polling&t=LmXuie9
Request Method: GET
Status Code: 101 Web Socket Protocol Handshake

When I'll resolve that, will open PR with an example in improved documentation.