[英]React, Node.js EvenEmitting on Express route to socket.io
我正在使用socket.io
向客户端发送消息,我知道我可以使用HTTP
响应形式的快速路由来完成此示例,但在实际场景中,当我从 ZDB974238714CA8DE634A7CED14F 获取数据时,我会发出
然而,这个例子复制了我现在遇到的问题:
当我单击客户端上的按钮时,我向快速路由发出获取请求,我的意图是在单击后立即记录发出消息,但我必须双击才能打印消息。
服务器.js
import express from 'express'
import { createServer } from 'http'
import { Server } from 'socket.io'
import route from './route.js'
import { EventEmitter } from 'events'
const app = express()
const httpServer = createServer(app)
const io = new Server(httpServer, {
cors: true,
origins: [`http://locahost:4000}`]
})
const myEmitter = new EventEmitter()
app.use('/route', route)
app.set('event', myEmitter) // Attach the event emitter to use on routes
const connections = []
io.on('connection', (socket) => {
connections.push(socket)
console.log(`Socket id ${socket.id} connected`)
socket.on('disconnect', () => {
connections.splice(connections.indexOf(socket), 1)
})
})
// Socket.io emit generator on an EventEmitter listener
myEmitter.on('my-event', (data) => {
connections.forEach((socket) => {
socket.emit('notify', data)
})
})
httpServer.listen(4000, () => console.log(`App listening on port 4000.`))
route.js - 快速路线
import { Router } from 'express'
const router = Router()
router.get('/', async (req, res) => {
// Import the EventEmitter
const event = req.app.get('event')
// Here I send the string to the EventEmitter
event.emit('my-event', 'Hello from route')
res.send({ ok: true })
})
export default router
客户端 - 在点击事件上调用 React function
// To get the message logged, I am having to run this function twice
const callRoute = () => {
// Initialize socket
const socket = socketIOClient('http://localhost:4000')
// I request the express route with axios
await axios('/route')
// Then I want to print the message
socket.on('notify', (data) => {
console.log(data)
})
}
我发现了问题,我只需要在客户端进行一些更改:
而不是在功能组件内部初始化套接字,它必须在它之外,然后使用useEffect
来监听发射
// Declare it before the app
const socket = socketIOClient('http://localhost:4000')
// Main functional component
const App = () => {
// Here initialize the socket.io listener
useEffect(() => {
socket.on('notify', (data) => {
console.log(data)
})
}, [])
// Also disconnect if unmounts
useEffect(() => () => socket.disconnect(), [])
// And now I can connect to the route
const callRoute = () => {
await axios('/route')
}
....
此外,如果您想使用此设置向特定客户端发出,我很难找到,请执行以下操作:
在客户端获取浏览器socket.id
并将其放在 state
const [clientID, setClientID] = useState('')
useEffect(() => {
socket.on('connect', () => {
setClientID(socket.id)
})
socket.on('notify', (data) => {
console.log(data)
})
}, [])
// Then send the clientID to the route
const callRoute = () => {
await axios('/route', { params: { clientID } })
}
在路由上传递 clientID
event.emit('my-event', {
message: 'Hello from route',
socketID: req.query.clientID
})
并在服务器上将您的发射器更改为此
myEmitter.on('my-event', (data) => {
io.to(data.socketID).emit('notify', data.message)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.