Failed to construct 'WebSocket': The URL '[object Object]' is invalid

问题

I was trying to make a connection to the websocket and get the data in react router. The connection is not happening and getting error Uncaught SyntaxError: Failed to construct 'WebSocket': The URL '[object Object]' is invalid. in the browser console. Using npm start from the terminal to start the application. It is a simple react router application. Below is the react code where I think problem occurred.

import React from 'react'

export default React.createClass({
  getInitialState: function() {
     return { value : [],
                  client : '' };
  },

   componentWillMount: function() {
      client = new WebSocket("ws://localhost:8000/","echo-protocol");
      client.onerror = function() {
           console.log('Connection Error');
       };

        client.onopen = function() {
          function sendNumber() {
               if (client.readyState === client.OPEN) {
                   var number = Math.round(Math.random() * 0xFFFFFF);
                   client.send(number.toString());
                   setTimeout(sendNumber, 1000);
               }
           }
           sendNumber();
       };

    client.onmessage = function(e) {
            this.setState({
                value: e.data
            });
        }.bind(this);
    },

    componentWillUnmount: function(){
        client.close();
    },

    render: function() {
        return (React.createElement("div",null,this.state.value))
    }
 });

The webpack config file is -

module.exports = {
  entry: './index.js',

  output: {
    filename: 'bundle.js',
    publicPath: ''
  },

  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
    ]
  }
}

Also, the packge.json file is

{
  "name": "react_form",
  "version": "1.0.0",
  "description": "Sample form that uses React for its rendering",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline --content-base . --history-api-fallback"
  },
  "author": "J",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-router": "^2.0.0",
    "websocket": "^1.0.23"
  },
  "devDependencies": {
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "http-server": "^0.8.5",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  }
}

If any other piece of code is required then please let me know. Also, please find the image of the error coming in the console on selecting the route option. What is the exact issue I am not able to get ?

回答1:

try this syntax

client = new WebSocket("ws://localhost:8000/");

回答2:

I was debugging the app in various different ways I could. Then I found that there is no problem with the code. Further changed the name of the file from WebSocket to Socket and route name from webSocket to socket in various files and it worked. The problem was with naming the files and including them into the code accordingly.

回答3:

On your backend side, if you dont have header with key = "Sec-WebSocket-Protocol" and value of one of your protocols, you will always get this error on chrome. In my case, it was fine with Firefox

来源：https://stackoverflow.com/questions/38604346/failed-to-construct-websocket-the-url-object-object-is-invalid

标签

reactjs

npm

Webpack

browserify

react-router