Question

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

在我的react应用程序上，当用户提交表单时，我想发出一个带有表单数据的socket 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

我认为您不小心致电了SumOffsets而不是io来接收该事件。

socket

应更改为：

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

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

soket io和reactjs，发出事件不起作用

1 个答案: