When upgrading my front end react app to https using nginx, the backend socket server stopped working. The original call to the back end was done via W3CWebSocket(ws://x.x.x.x:xxxx) in react.

I am able to connect to my tokio-native-tls socket server but cannot properly complete the handshake. I seem to be missing the HTML part.

My certificates loaded properly on the server. I don’t understand how to incorporate the additional HTML handling. The upgrade response from the front end is never being read in as part of the handshake. It shows up on the unrelated subsequent read. (see below)

Front end result:

socketMiddleware.js:106 WebSocket connection to 'wss://www.xxx.com:5001/' failed: Error during WebSocket handshake: net::ERR_INVALID_HTTP_RESPONSE

Does anyone have example code for a backend TSL Tokio socket server that can respond properly to a wss://www.xxx.com:xxxx/ request from the front end?

Server debug output:

accept connection from 142.196.248.38:7439 tls_stream TlsStream( SslStream { stream: AllowStd { inner: TcpStream { addr: V4( , ), peer: V4( 142.196.248.38:7439, ), fd: 9, }, context: 0x0000000000000000, }, ssl: Ssl { state: "SSL negotiation finished successfully", verify_result: X509VerifyResult { code: 0, error: "ok", }, }, }, )

Here is the rest of the handshake code that is not making it in:

GET / HTTP/1.1 Host: www.xxx.com:5001 Connection: Upgrade Pragma: no-cache Cache-Control: no-cache User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36 Upgrade: websocket Origin: https://www.xxx.com Sec-WebSocket-Version: 13 Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.9 Sec-WebSocket-Key: +dd3mdZN5i1qw71aG9/rbA== Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits

Any help would be appreciated!

Submit an answer

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!