我正在尝试使用socket.io并弄清是否适合我们。 我在尝试东西时遇到问题。
所以在我的服务器上,我有以下代码:
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
在客户端上,我具有以下组件
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;
当我切换到该组件时,我看到它能够连接,这是一件好事。 我还能够将数据从服务器发送到客户端。
但是,我尝试从客户端发送到服务器的事件未得到处理。 initial_data
只是没有被服务器接收。
有谁知道为什么会发生这种情况?
答案 0 :(得分:1)
更改
io.on('connection', () =>{
console.log('a user is connected')
io.emit('hi')
io.on("initial_data", () => {
console.log("THIS IS SPARTA")
})
})
到
io.on('connection', socket =>{
console.log('a user is connected')
io.emit('hi')
socket.on("initial_data", () => {
console.log("THIS IS SPARTA")
})
})
然后它应该可以工作;)