Custom headers for WebSocket JS

Question

I finding a simple solution to use WebSocket with custom headers for web app based on PHP as backend and js+vuejs as frontend.

My app should connect to WebSocket server

Answer 1

Websocket client API doesn't allow to send custom header, they allow you to set exactly one header, namely Sec-WebSocket-Protocol, i.e. the application specific subprotocol. You could use this header for passing the bearer token.

Other option is to use token in query string.

Or you can use some library on client or server which support custom headers implementation eg. https://github.com/crossbario/autobahn-python/tree/master/examples/twisted/websocket/echo_httpheaders

Answer 2

I'm so confused at the massive amount of mis-information of websockets and headers. There is a way to add headers to WebSocket connections.

Like this

options.headers= {"header1":"value"}
const socket = new WebSocket('wss://yourwebsocketAPIpath', [],options )