WebSocketException: Connection to 'https://api.capitalstake.com:0/socket.io/?EIO=4&transport=websocket#' was not upgraded to websocket I/flutter ( 4747): connect_error

[alibukhari9]

Here is my code i am running and i am getting this issue while connecting to sockets

Future initSocket() async { print('Connecting to chat service');

socket = IO.io(
    'wss://api.capitalstake.com/2.0/market/feed',
    OptionBuilder()
         .setExtraHeaders({
           'Authorization':
               'Bearer bmV4dGNhcCAzZDIyYzNlY2JmZWM4OTVlZGY2MGM2ZmM5MGJhOTc0OA=='
         })
        .setTransports(['websocket'])
        .disableAutoConnect()
       
        .build());
socket.connect();
socket.onConnect((_) {
  print('connected to websocket');
});
socket.onConnectError((data) {
  print("Connect error");
  print(data);
});

socket.onError((data) {
  print("ErroR:");
  print(data);
});
socket.onAny((event, data) {
  print(event);
  print(data);
});

}

[jumperchen]

Have you tried with https://... instead of wss://...

[alibukhari9]

Yes still the same issue

[jumperchen]

Do you use Nginx? If so, please add upgrade header setting to it.

[alibukhari9]

Nginx in flutter?

[jumperchen]

No, on the server side, i.e. api.capitalstake.com

[renik8484]

have you found anything on this ? I am facing the same issue.

[david-macharia]

there us a trailling zero which i thought is a port number i tried appending 80 https://xx.com:0/socket.io/?EIO=4&transport=websocket# but same issue

[markosole]

Have you managed to get it working? I am having same issue where it won't connect over https but does on http. NodeJS client app sonnects on https, just Flutter app can't.

[AreebaJawed]

any update? facing the same issue in flutter app

[Shalj]

facing the same issue in flutter app，help！

[Venusdjinni]

For anyone facing this issue, you can refer to https://socket.io/docs/v4/reverse-proxy/ . Basically, those configurations will setup your http server so that it can interpret socket calls.

However, for Apache2 configuration, if you used certbot to create your SSL certificates, you can edit your filename-ls-ssl.conf this way:

ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/

/* add these lines */

RewriteEngine on
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteCond %{HTTP:Connection} upgrade [NC]
RewriteRule ^/?(.*) "ws://localhost:7000/$1" [P,L]

/* end add these lines */

ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined

and restart apache2.

[wdcs-nadimansari]

I also getting same error,I need help for this.

[A7mdlbanna]

same issue here

[mittal-sahab-sudo]

Same Issue. Anyone figure this out ?

[abhirock1998]

Same Issue. Anyone figure this out ?

Same issue

[A7mdlbanna]

UPDATE: My issue was that I deployed the backend on a host which doesn't support websocket such as Firebase Functions

[markosole]

Hi guys, here is example that works for me. Few things first, my server is running on Apache and I am using LetsEncrypt. Configuration may be different on your server and use one below for refference. You can see two settups for: nodeJS client and FLutter client. They are both connecting using slightly different setup. Look for http and ws / wss lines.

As you can see ssl .pem certs are configured as well with full path which is for you probably different.

Apache config

<VirtualHost *:443>
    ServerAdmin [email protected]
    DocumentRoot "/www/wwwroot/messenger/"
    ServerName SSL.messenger
    ServerAlias messenger.grabber.ie 
    #errorDocument 404 /404.html
    ErrorLog "/www/wwwlogs/messenger-error_log"
    CustomLog "/www/wwwlogs/messenger-access_log" combined
    
    #SSL
    SSLEngine On
    SSLCertificateFile /www/server/panel/vhost/cert/messenger/fullchain.pem
    SSLCertificateKeyFile /www/server/panel/vhost/cert/messenger/privkey.pem
    SSLCipherSuite EECD.....
    SSLProtocol All -SSLv2 -SSLv3 -TLSv1
    SSLHonorCipherOrder On
    
    
    # Needed for Flutter clients
    RewriteEngine On
    RewriteRule /(.*)           ws://localhost:5003/$1 [P,L]
    
    # Needed for NodeJS clients
    ProxyPass / http://localhost:5003/
    ProxyPassReverse / http://localhost:5003/
    
    # HTTP reverse proxy related settings begin >>>
    <IfModule mod_proxy.c>
        ProxyRequests Off
        SSLProxyEngine on
        ProxyPass / http://127.0.0.1:5004/
        ProxyPassReverse / http://127.0.0.1:5004/
    </IfModule>
    # End of HTTP reverse proxy related settings <<<

</VirtualHost>

Since Flutter client side is configured to use "websockets" transport, proxy is configured to forward ws protocol as ws://localhost:5003/$1 [P,L]. In my case, websocket server is running on port 5003 and yours could be different, ex. 3001.

Important

On Flutter side, you have to make sure that:

1. You are using compatible Socket version. Server has to be compatible with client socket_io_client: ^2.0.1 and server side is on "socket.io": "^2.3.0"
2. Client is configured to use different transport: websocket

Flutter example

import 'package:socket_io_client/socket_io_client.dart' as IO;
import 'package:socket_io_client/socket_io_client.dart';

Future<void> _connectToServer() async {

  try {
        String socket_endpoint = "https://my-domain.com";  // <-- Change to your domain and use https
        String api_key = "my---long-token----key----here---but---change--me";
        IO.Socket socket = IO.io(socket_endpoint,
            OptionBuilder()
                .setExtraHeaders({
                  'Authorization':
                  'Bearer $api_key'  // <-- HERE IS THE KEY
                })
                .setTransports(['websocket']) // << Change transport to websocket
                .build());

        socket.connect();
        socket.emit('connect_on', 'Flutter Client sonnected!');
        

        // Connecting and Disconnecting
        socket.onConnect((_) {
          debugPrint('## Connected to Socket Server');
          
        });

        socket.onDisconnect((_) {
          debugPrint('## Lost connection with server');
          
        });
        // Ended here
      } catch (e) {
        // ToDo: Handle Socket Connection Error
    }

}



@override
void initState(){
  super.initState();
  _connectToServer(); // <-- Connect to Socket Server
}

If anyone needs extra help with this let me know.