Question

我正在使用socket.io websocket构建一个web单页应用程序，其响应与我的express后端连接。我检查了socket.html脚本是否正在我的index.html文件中加载。我还在同一个地方声明了一个名为socket的变量，以便从react组件脚本中访问套接字。目的是在我的react组件中使用这个变量。但是jsx编译器说：

9:2  error  'socket' is not defined  no-undef

如果我检查了套接字＆＃39; var在chrome console上看起来一切正常。我想这个var应该在编译时定义，但是怎么样？

这里是反应组件代码。

＆＃13;

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  componentDidMount(){
    
        socket.on('hello', function(){
                console.log('YAY!');
        })
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
      </div>
    );
  }
}

export default App;

＆＃13;

这是我的index.html代码。

＆＃13;

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    
    <title>React App</title>
    
    <script src="/socket.io/socket.io.js"></script>

    <script type="text/javascript">
        var socket = io.connect('http://localhost:3001')
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

＆＃13;

Answer 1

首先像这样安装socket.io：

as:client_id

然后你应该将socket.io作为模块导入，就像你使用react：

一样

npm install socket.io --save

Answer 2

解决方案。

删除index.html
在组件中导入正确的模块：
```
import io from 'socket.io-client';
```

以这种方式使用：

componentWillMount(){

  this.socket = io('http://localhost:3001');

  this.socket.on('hello', function(){
    console.log('YAY!');
  })

}

完整代码：

（index.html的）

＆＃13;

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    
    <title>React App</title>

  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

＆＃13;

React Component（App.js）

＆＃13;

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import io from 'socket.io-client';

class App extends Component {

  
  componentWillMount(){

    this.socket = io('http://localhost:3001');

	  this.socket.on('hello', function(){
		  console.log('YAY!');
	  })

  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to Riact</h2>
        </div>
      </div>
    );
  }
}

export default App;

＆＃13;

Express React Socket.io编译错误

2 个答案: