未能构造'WebSocket'：URL'[object Object]'无效

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

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

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

来源

2016-07-27 Worker

尝试使用'new window.WebSocket'而不是'new WebSocket'。我也看不到你在哪里定义变量'client' –

感谢@AlexanderT的帮助。 – Worker

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

来源

2016-07-27 07:31:40 Worker

try this syntax

客户=新的WebSocket（ “WS：//本地主机：8000 /”）;

来源

2017-01-13 05:59:53 amrit

未能构造'WebSocket'：URL'[object Object]'无效

回答

相关问题