服务器未收到从客户端发送的 socket.io 消息

Question

I am trying to play around with socket.io and figure out if it suits us. I have ran into a problem while trying stuff out.

so in my server i have the following code:

const express = require('express')
const bodyParser = require('body-parser')
const helmet = require('helmet')


const apiLogger = require('morgan')


const apiLoggerFormat = 'dev'

const app = express()
const redisAdapter = require('socket.io-redis');
const server = require('http').createServer(app)
const io = require('socket.io')(server)
io.adapter(redisAdapter({ host: process.env.REDIS_HOSTNAME, port: process.env.REDIS_HOSTNAME }))


io.on('connection', () =>{
    console.log('a user is connected')
    io.emit('hi')

    io.on("initial_data", () => {
        console.log("THIS IS SPARTA")
    })

})

app.use(apiLogger(apiLoggerFormat))

app.set('port', constants.port)
app.set('trust proxy', 1)
app.use(bodyParser.json({ limit: '1mb', extended: true }))
app.use(bodyParser.urlencoded({ extended: true }))



        server.listen(app.get('port'), () => {
logger.info(`Server listening on port ${app.get('port')}`)}
        


module.exports = server

and on the client i have the following component

import React, {Component} from 'react'
import socketIOClient from "socket.io-client";

let socket;

class PersonalFoodComponent extends Component {
    constructor() {
        super();
        this.state = {
            food_data: []
        }
        socket = socketIOClient(process.env.SERVER_URL);

    }


    changeData = () => socket.emit("initial_data");

    getData = (food_data) => {
        console.log(food_data);
        this.setState({food_data: Object.values(food_data)});
    };

    componentDidMount() {
        var state_current = this;
        socket.emit("initial_data");
        socket.on("get_data", this.getData);
        socket.on("change_data", this.changeData);
    }

    //
    componentWillUnmount() {
        socket.off("get_data");
        socket.off("change_data");
    }

    getFoodData() {
        return this.state.food_data.map(food => {
            return (
                    <ul style={{color: "red"}}>
                        <li> {food.buyer} </li>
                        <li> {food.key} </li>
                    </ul>
            )
        })
    }

    sendTestEvent() {
        console.log("here", socket.emit("initial_data"))
        socket.emit("initial_data")
    }

    render() {

        return (
                <div>
                    <button onClick={()=>this.sendTestEvent()}>click me!</button>
                    {this.getFoodData()}
                </div>
        )
    }
}

export default PersonalFoodComponent;

As soon as I switch to the component I see that it is able to connect, which is a good thing. I am also able to send data from the server to the client.

but, the events that i am trying to send from the client to the server aren't being processed. the initial_data is just not getting received by the server. does anyone have any idea why this might happen ?

Answer 1

change

io.on('connection', () =>{
    console.log('a user is connected')
    io.emit('hi')

    io.on("initial_data", () => {
        console.log("THIS IS SPARTA")
    })

})

to

io.on('connection', socket =>{
    console.log('a user is connected')
    io.emit('hi')

    socket.on("initial_data", () => {
        console.log("THIS IS SPARTA")
    })

})

then it should work ;)