套接字 io 和反应 js，发出一个事件不起作用

Question

我正在尝试使用 react 作为客户端，nodejs 和 soket io 作为服务器。

在我的 react 应用程序中，当用户提交表单时，我想使用表单数据发出一个套接字 io 事件，但我似乎没有在服务器上捕获该事件。

这是我的代码，问题是我没有收到任何错误，我认为我遗漏了一些东西，但不知道是什么。

App.js

首先我将我的 io 对象传递给我的路由，我不知道这样做是否是一个好习惯，我只是想避免重新定义每个组件中的连接。

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './Route/Home';
import Game from './Route/Game';
import io from 'socket.io-client';

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      io: io('http://localhost:5000'),
    };
  }

  render() {
    return (
      <Router>
          <Switch>
              <Route exact path='/'>
                <Home io={this.state.io} />
              </Route>
              <Route path='/game' component={Game} io={this.state.io}>
                <Game/>
              </Route>
          </Switch>
      </Router>
    );
  }
}

export default App;

Home.js

这里我以用户名状态作为参数发出事件 SET_USERNAME。

import React, { Component } from 'react';
import '../css/color.css';
import '../css/home.css';

class Home extends Component {

  constructor(props){
    super(props);
    const { io } = props;
    this.state = {username: '', io : io};
  }

  handleChange = (e) => {
    this.setState({username : e.target.value});
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const { io } = this.state;
    io.emit('SET_USERNAME', this.state.username);
  }

  render() {
    return (
        <section className="background">
          <div className="form_layout">
            <form className="form" onSubmit={this.handleSubmit} >
              <div className="form_label">
                <label htmlFor="">What's your name ?</label>
              </div>
              <input value={this.state.username} onChange={this.handleChange} className="form_input" type="text"/>
              <input className=" form_input form_button" type="submit" value="Submit"/>
            </form>
          </div>
        </section>
    );
  }
}

export default Home;

如果我在发出函数后立即添加一个 console.log(io) ，则会出现以下内容。

还有 server.js 我希望在我的控制台中打印出我的用户名的状态，但这里没有发生任何事情，似乎没有调用该事件。

var user = 0;

io.on('connection', (socket) => {
  user++;
  console.log(user);

  io.on('SET_USERNAME', (username) => {
    console.log(username);
  });

  socket.on('disconnect', () => {
    user--;  
    console.log(user);
  });

});

server.listen(5000, () => {
  console.log('listening on *:5000');
});

感谢您的帮助！

Answer 1

我认为您不小心调用了io 而不是socket 来接收事件。

  io.on('SET_USERNAME', (username) => {
    console.log(username);
  });

应改为：

  socket.on('SET_USERNAME', (username) => {
    console.log(username);
  });

在server.js。