未能構造'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]'無效

回答

相關問題