反应js nodejs socket.io

Question

I have a problem connecting to my front end server socket on my back end in my front end ( react ) i have this:

import React, { Component } from 'react';
import {Form,FormGroup, Label, Input, Button, Alert} from 'reactstrap';
import Header from '../../components/header';
import io from 'socket.io-client';
export default class Login extends Component {

    constructor(props) {
        super(props)
        console.log(this.props);
        this.state = {
            message: this.props.location.state?this.props.location.state.message: '',
        };
    }

    signIn = () => {
        let socket = null;

            async function connect () {
               socket = io.connect('http://localhost:8080/');
            }
            connect();

    }

    render(){
        return(
            <div className="col-md-6">
                <Header title="ReactJS Login"/>
                <hr className="my-3"/>

                    <Button color="primary" onClick={this.signIn}> Entrar </Button>

            </div>
        );
    }
}

in my back end:

const usersRouter = require('./routes/userRoutes');
const postRouter = require('./routes/post');
const matchRouter = require('./routes/matchRoutes');
const app = express();
const router = express.Router();

const socket = require('socket.io');

const server = app.listen(
  port,
  console.log(`Server running in ${process.env.NODE_ENV} mode on port ${port}`)
  );

let io = require('socket.io')(server);
app.set("io", io);

io.on('connection', socket => {
   require('./routes/socket')(socket);
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });''
app.use(express.json());
app.use('/', router);


module.exports = app;

in my router folder i have this:

const socketController = require ('../controllers/SocketController');
module.exports = (socket) => {
    socket.on('myevent', (message) => {
            console.log('bateu aq');
           socket.emit('myEvent', {message: 'hello world'});
    });
 };

I am also wondering how I could add a jwt validate middleware to my route that I have

I also don't know if this is the best code structure I can have to work with socket using routes and controllers, if anyone can help me how to improve it.

Answer 1

There is no code in your example that is actually interacting with the server. Please update the code as follows to determine the connections and events are working as per the question comments.

React:

async function connect () {
    socket = io.connect('http://localhost:8080/');

    socket.on('hello', (message) => {
        console.log(message);
    });

    socket.on('myevent', message => {
        console.log(message);
    });

    socket.emit('myevent', {foo: 'bar'});
}

Express:

module.exports = (socket) => {
    socket.emit('hello', {data: 'this is a message'});

    socket.on('myevent', (message) => {
       console.log(message);

       socket.emit('myevent', {message: 'OK'});
    });
 };