NodeJS 如何将socket.io集成到我的express项目的mvc架构中

x8diyxa7  于 12个月前  发布在  Node.js
关注(0)|答案(1)|浏览(174)

我正在使用socket.io和express制作后端,但是我无法使用nextjs将套接字与我的前端连接,当进入一个页面时,会执行一个通过端点与Web套接字连接的获取,控制器工作,因为我收到响应,但是套接字没有响应,如果有人能指导我,我会很感激,我是新来的。
index.js

app.use('/items', itemsRouter)

app.listen(port, () => {
  console.log('Server is runnig on port http://localhost:3001')
})

字符串
router.js

export const itemsRouter = Router()

itemsRouter.get('/', ItemController.getAll)
itemsRouter.post('/', ItemController.create)
itemsRouter.post('/api/data', ItemController.getData)


controller.js

export class ItemController {
  static getData = async (req, res) => {
    io.on('connection', async (socket) => {
      console.log('an user has connected')
    })
  }
}

fnvucqvd

fnvucqvd1#

下面是提供的服务器,使用socket.io服务器示例和一个套接字事件处理程序进行了更新。

const express = require("express");
const { createServer } = require("http");
const { Server } = require("socket.io");

const app = express()

app.use('/items', itemsRouter)

const httpServer = createServer(app);
const io = new Server(httpServer, { /* options */ });

io.on('connection', async (socket) => {
  console.log('an user has connected', socket.id)
  socket.on('apiData', ItemController.getDataSocket)
})

字符串
Express/HTTP路由器保持不变。
我添加了等效的socket.io和express请求/响应控制器,以展示它们签名的不同之处。

export class ItemController {
  static getDataExpress = async (req, res) => {
    const { id } = req.body
    const data = await someFetch(id)
    res.json({ data })
  }
  static getDataSocket = async(payload, callback) => {
    const { id } = payload
    const data = await someFetch(id)
    callback({ data })
  }
}


通常情况下,套接字对于流式传输和广播更有用,而不是express已经能够实现的请求/响应模式。通常您会希望从路由触发套接字,因此通常希望将io示例附加到请求。
io示例添加到index.js中的app

app.use((req,res,next) => {
  req.app.set('io', io)
})


例如,向已加入itemsroom的感兴趣的客户端广播新项目。

export class ItemController {
  static newItem = async (req, res) => {
    const { item } = req.body
    const data = await creatItem(item)
    req.app.get('io).to("items").emit('newItem', item)
    res.json({ item })
  }
}

相关问题