Fix error about non-empty Sec-WebSocket-Protocol header

Introduction

When you encounter this problem about WebSocket connection to 'wss://<address>/live' failed: Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received, here is an article on how to fix this problem.

Review

According to the error message, we know that the WebSocket client sent a request with non-empty ‘Sec-WebSocket-Protocol’ header as shown below:

Therefore, let’s find more about the Sec-WebSocket-Protocol header field. And the header field definition can be found in RFC 6455.

It is used in the WebSocket opening handshake. It is sent from the client to the server and back from the server to the client to confirm the subprotocol of the connection. This enables scripts to both select a subprotocol and be sure that the server agreed to serve that subprotocol.

Conclusion

Now we know that this problem is caused by the backend server not agreeing to serve the subprotocol (Known by above picture it is x-wss). Therefore, we should add the Sec-WebSocket-Protocol header field to the response in our server side, and the value should be the same with the client. Otherwise, the connection will be closed.