Fehler beim Erstellen von 'WebSocket': Die URL '[Objekt Objekt]' ist ungültig

Question

Ich habe versucht, eine Verbindung zum Websocket herstellen und die Daten in Reagieren Router. Die Verbindung wird nicht hergestellt und der Fehler Uncaught SyntaxError: Failed to construct 'WebSocket': The URL '[object Object]' is invalid. wird in der Browserkonsole angezeigt. Verwenden Sie npm start vom Terminal, um die Anwendung zu starten. Es ist eine einfache Reaktion Router-Anwendung. Unten ist der reaktive Code, wo ich denke, dass ein Problem aufgetreten ist.

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

Die webpack Konfigurationsdatei ist -

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

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

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

Auch die packge.json Datei ist

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

Wenn ein anderes Stück Code dann erforderlich ist, lassen Sie es mich wissen. Außerdem finden Sie das Bild des Fehlers in der Konsole bei der Auswahl der Route Option. Was ist das genaue Problem, das ich nicht bekommen kann?

Answer 1

Ich debugging die App auf verschiedene Arten, die ich könnte. Dann habe ich festgestellt, dass es mit dem Code kein Problem gibt. Weiter hat sich der Name der Datei von WebSocket zu Socket geändert und der Name der Route von webSocket zu socket in verschiedenen Dateien geändert und es hat funktioniert. Das Problem bestand darin, die Dateien zu benennen und sie entsprechend in den Code aufzunehmen.

Answer 2

try this syntax 

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