Socket.on在cmpDidMount中工作，但不是與ReactJS的特定功能

Question

我試圖讓這個工作，但是socket.on只能在componentDidMount函數內部工作，但我需要在點擊時調用它..這是我得到了什麼..

///Server.js

const express = require('express'); 
const app = express(); 
const webpack = require('webpack'); 
const webpackMiddleware = require('webpack-dev-middleware'); 
const config = require('./webpack.config.js'); 
const compiler = webpack(config); 
const server = require('http').Server(app); 
const io = require('socket.io')(server); 

app.use(webpackMiddleware(compiler, {publicPath:config.output.publicPath})) 
app.use(express.static(__dirname + '/src')) 

io.on('connection', socket => { 
    io.emit('create', socket.id) 
}) 

server.listen(3000,() => console.log('server is up!')) 

////Create.js

import React from 'react' 
import io from 'socket.io-client' 
const socket = io() 

class Create extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state={rooms: []} 
     this.add = this.add.bind(this) 
    } 

    add() { 
     socket.on('create', id => { 
      this.setState({rooms: [id, ...this.state.rooms]}) 
      console.log(this.state.rooms); 
     }) 
    } 

    render() { 
     return (<div> 
       <button className = 'btn btn-primary create' onClick={this.add}>Create Room </button> 
      </div>); 
    } 
} 

export default Create; 

的add（）函數內的socket.on，什麼也不做，但是當我把它放在componentDidMount裏面的時候，但並不像我想要的那樣... Ty！

Answer 1

這是按預期工作的。由於您的服務器在建立連接時發送了create事件，因此如果在您單擊該按鈕之前未在客戶端上設置socket.on('created', ...)，則不會處理該事件。

單擊該按鈕並添加套接字事件偵聽器不會從客戶端發送事件。

如果您想要將create事件從客戶端發送到服務器，您可以讓服務器偵聽事件並在創建空間時發回確認。

服務器：

io.on('connection', socket => { 
    socket.on('create', room => { 
     // create room 
     socket.emit('created', roomId); 
    }); 
}); 

客戶：

constructor(props) { 
    super(props); 
    this.state={rooms: []}; 
    this.add = this.add.bind(this); 
    socket.on('created', id => { 
     this.setState({rooms: [id, ...this.state.rooms]}); 
    }); 
} 

... 

add() { 
    socket.emit('create', room); 
}