Vue-Socket.io how to pass auth token header and how to proxy connection?

Question

Socket.io

Hello. Help me understand how to work with sockets. I read the docks, dug the Internet, but in practice it does not work. There is no JS example on sockets in the API documentation. The connection via the usual REST is successful, that is, the token is working.

There is an external socket server (Tinkoff openApi) and an authorization token.
Created a regular project through Vue Cli. Connected plugin vue-socket.io
main.js

//....
import VueSocketIO from 'vue-socket.io'
import SocketIO from "socket.io-client"

const options = { 
  transportOptions: {
    polling: {
      extraHeaders: {
        Authorization: `Bearer ${token}`
      }
    }
  },
  // Такой вариант тоже пробовал
  // extraHeaders: {
  //   Authorization: `Bearer ${token}`
  // }
};

Vue.use(new VueSocketIO({
    debug: true,
    connection: SocketIO('wss://api-invest.tinkoff.ru/openapi/md/v1/md-openapi/ws', options),
  })
);
//...

home.vue

sockets: {
      connect: function () {
          console.log('socket connected')
      }
  },

The connect function does not work
The following is seen in the console.


======
Here I thought, let me check the connection over the native socket and to the official ws test server.

added to Home.vue

created() {
    let socket = new WebSocket("wss://echo.websocket.org");
    socket.onopen = function() {
      console.log("Соединение установлено.");
    };
  },

The connection worked.

Change url to tinkoff

let socket = new WebSocket("wss://api-invest.tinkoff.ru/openapi/md/v1/md-openapi/ws");

As expected, I get an error in authorization


Went to google how to transfer the token. Stumbled upon this question and here's another .
I try

let socket = new WebSocket("wss://api-invest.tinkoff.ru/openapi/md/v1/md-openapi/ws", ["Authorization", token]);

I am getting an error.


Then I gave up :). I don't know how to proceed.

Before that, even when using the plugin, I tried to proxy through vue.config.js to bypass CORS (is it possible for sockets at all?) It didn’t work.

module.exports = {
  devServer: {
        proxy: {
          '^/': { 
            target: 'wss://echo.websocket.org'
          }
        }
    }
}

//... main.js
connection: SocketIO('http://localhost:8080', options),

After these changes, the browser console gives a 500 error

GET http://localhost:8080/socket.io/?EIO=3&transport=polling&t=NAbvfZ8 500 (Internal Server Error)

In the editor console, Vue also swears

Proxy error: Could not proxy request /socket.io/?EIO=3&transport=polling&t=NAbw8kS from localhost:8080 to wss://echo.websocket.org.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

ECONNRESET means the connection was forcibly closed by the host. This is usually due to a connection being lost on the remote socket due to a timeout or a reboot. Usually found via http and net modules.

Competence is still not enough, I hope for help.
Sorry for the long question, I wanted more details.

Answer 1

You cannot set headers for websockets from the browser.
You can pass the token through a link or through a cookie.

Answer 2

transport=polling - obviously not a websocket, so the 500 error
socket.io has two protocols and it seems like it should switch to WS itself, but you can also force it to use the websocket first.
then somewhere it slipped that the websocket was somehow not the same for socket.io,
almost everything is on their website,
somewhere there https://socket.io/docs/#Using-it-just-as-a-cross- b...