“Unable to connect to dfuse endpoint. DOMException: Failed to construct 'WebSocket': The subprotocol '[object Object]' is invalid.”

Question

I ran into this error running testing on a webpage for dfuse API, could someone tell me what this is?

Here is my code:

const { EoswsClient, createEoswsSocket, InboundMessageType } = 
require("@dfuse/eosws-js")
//const WebSocket = require("ws")
const dfuseEndpoint = "mainnet.eos.dfuse.io"
const dfuseToken = ""
const client = new EoswsClient(
  createEoswsSocket(
    () =>
      new WebSocket(`wss://${dfuseEndpoint}/v1/stream?token=${dfuseToken}`, { origin: "" })
  )
)

client
  .connect()
  .then(() => {
    client
      .getActionTraces({ account: "eosio.token", action_name: "transfer" })
      .onMessage((message) => {
        if (message.type === InboundMessageType.ACTION_TRACE) {
          const { from, to, quantity, memo } = message.data.trace.act.data
          console.log(from, to, quantity, memo)
        }
      })
  })
  .catch((error) => {
    console.log("Unable to connect to dfuse endpoint.", error)
  })

Here is my webpack config:

const path = require('path');
//const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  mode: "production",
  entry: {
    entry: __dirname + '/index.js'
  },
  output: {
    path: path.resolve(__dirname, './'),
    filename: 'EoswsClient.min.js',
  },
  /*
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          mangle: true
        }
      })
    ]
  },
  */
  devtool: "source-map"
}

and here is the response:

Unable to connect to dfuse endpoint. DOMException: Failed to construct 'WebSocket': The subprotocol '[object Object]' is invalid.
    at u.s [as socketFactory] (http://localhost:15001/js/EoswsClient.min.js:1:5541)
    at u.createAnOpenSocket (http://localhost:15001/js/EoswsClient.min.js:1:16164)
    at connectionPromise.connectionPromise.Promise (http://localhost:15001/js/EoswsClient.min.js:1:15252)
    at new Promise (<anonymous>)
    at u.<anonymous> (http://localhost:15001/js/EoswsClient.min.js:1:15144)
    at Generator.next (<anonymous>)
    at http://localhost:15001/js/EoswsClient.min.js:1:12917
    at new Promise (<anonymous>)
    at o (http://localhost:15001/js/EoswsClient.min.js:1:12694)
    at u.connect (http://localhost:15001/js/EoswsClient.min.js:1:14958)

Answer 1

The browser will automatically add the Origin header for you, so it's not needed to specify it as part of your socket factory in those cases.

We will update the documentation to reflect this as well as the examples to make it clear that { Origin: "something" } is required for non-Browser environment to work correctly.

So change

const client = new EoswsClient(
  createEoswsSocket(
    () =>
      new WebSocket(`wss://${dfuseEndpoint}/v1/stream?token=${dfuseToken}`, { origin: "" })
  )
)

To

const client = new EoswsClient(
  createEoswsSocket(
    () =>
      new WebSocket(`wss://${dfuseEndpoint}/v1/stream?token=${dfuseToken}`)
  )
)