构造“WebSocket”失败：URL“[object Object]”无效答案

【问题标题】：Failed to construct 'WebSocket': The URL '[object Object]' is invalid构造“WebSocket”失败：URL“[object Object]”无效
【发布时间】：2016-11-30 22:56:12
【问题描述】：

我试图与 websocket 建立连接并在反应路由器中获取数据。连接没有发生并且在浏览器控制台中出现错误Uncaught SyntaxError: Failed to construct 'WebSocket': The URL '[object Object]' is invalid.。从终端使用npm start 启动应用程序。这是一个简单的反应路由器应用程序。下面是我认为出现问题的反应代码。

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))
    }
 });

webpack 配置文件是 -

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

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

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

另外，packge.json 文件是

{
  "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"
  }
}

如果需要任何其他代码，请告诉我。此外，请在选择路线选项时找到控制台中出现的错误图像。我无法得到的确切问题是什么？

【问题讨论】：

尝试使用new window.WebSocket 而不是new WebSocket。我也看不到你在哪里定义变量client
感谢@AlexanderT 的帮助。

标签： reactjs npm webpack browserify react-router

【解决方案1】：

我正在以各种不同的方式调试应用程序。然后我发现代码没有问题。在各种文件中进一步将文件名从WebSocket 更改为Socket 并将路由名称从webSocket 更改为socket，并且它起作用了。问题在于命名文件并将它们相应地包含到代码中。

【讨论】：

【解决方案2】：

试试这个语法：

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

【讨论】：

【解决方案3】：

在您的后端，如果您没有带有 key = "Sec-WebSocket-Protocol" 的标头和您的协议之一的值，您将始终在 chrome 上收到此错误。就我而言，Firefox 没问题

【讨论】：