Is there any way to add custom headers when using websocket transport ?

[gsRatti1]

I want to add some custom headers to websocket requests from client to server.
One of these headers is an auth token, which we dont feel comfortable sending in query params. Another header is needed for routing the requests in a canary deployment infrastructure ( and the match conditions in canary deployment support matching only on headers and cookies).

I have tried this :
const socketioOptions: SocketIOClient.ConnectOpts = {

 transport: ['websocket'],
 transportOptions : {
  extraHeaders: {
    check: 'It does not work',
  }
}

}
Yes, with 'polling' this does work. But we cannot use polling in our current infra.
Are are there alternatives we can use to pass headers ?

[darrachequesne]

The WebSocket API in the browser does not allow for custom headers.

One possible workaround is to pass the token in the subprotocol field:

const socket = io({
  transports: ["websocket"],
  protocols: ["test1234"]
})

Server-side:

io.on("connection", (socket) => {
  const protocol = socket.conn.transport.socket.protocol;
  // ...
});

Though it's not really the purpose of this field.

Reference: https://datatracker.ietf.org/doc/html/rfc6455#section-1.9

Another possibility is to first send an XHR request, return a cookie, and then init the Socket.IO connection.