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

Posted 2023-02-21

【中文标题】构造“WebSocket”失败：URL“[object Object]”无效

【英文标题】：Failed to construct 'WebSocket': The URL '[object Object]' is invalid

【发布时间】：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 的帮助。

【参考方案1】：

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

【参考方案2】：

试试这个语法：

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

【参考方案3】：

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