时间戳

首页 > 解决方案 > 如何使用 vuex 和 socketio 制作实时 crud？

node.js - 如何使用 vuex 和 socketio 制作实时 crud？

问题描述

我想使用 vuex、node、express 和 socketio 执行实时 crud，但使用以下语法我无法得到结果。

服务器

index.js

const server = app.listen('3000',() => {
    console.log('<--- Web Server Starter --->')
    const io = require('./sockets')(server)
    io.on('connection', socket=>{
        console.log('client connected');
    })
})

socket.js

    let io
    module.exports = {
        init:httpServer =>{
            io = require('socket.io')(httpServer)
            return io
        },
        getIo:()=>{ 
            if(!io){
                throw new Error('socket io not initialized')
            }
            return io
        }
    }

用户.js

const io = require('../socket')
router.post('/newuser',(req, res) => {
    res.json({ serverResponse: 'userCreated' })
    io.getIo().emit('newuser',{serverResponse:'created',user:user})
})

客户

模块 user.js（VUEX 动作）

getusers({ commit }){
    const sessionToken = localStorage.getItem('sessionToken')
    axios.get('/newuser', {
        headers: {
            Authorization: `Bearer ${localStorage.getItem('sessionToken')}`
        },
    })
        .then(response => {
            const socket = openSocket('http://localhost:3000')
            socket.on('newuser', data => {
                if (data.serverResponse === 'created') {
                    this.users = data.user
                    commit('GET_USERS', users)
                })
        })
        .catch(error => {
            alert(error)
        })
})

当我创建新用户时，用户列表并没有自动更新，但是我必须刷新页面才能看到新用户，为什么会出现这种情况？

标签： node.jsexpressvue.jssocket.iovuex

解决方案

这是因为在您的后端，您正在处理 post url-endpoint'/newuser'以获取数据。您实际上并没有使用 socketio 发布数据，因此如果您不更新页面，axios.get那么在您发布的 API 刷新之前，您的函数将不会获得任何新数据。最好将您的套接字客户端代码放在 axios 承诺之外，以便数据主要由 socketio 在客户端上更新，而不是由 API 更新。

编辑： 这是您客户端中的代码

    getusers({
  commit
}) {
  const sessionToken = localStorage.getItem('sessionToken')
  axios.get('/newuser', {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('sessionToken')}`
      },
    })
    .then(response => {
      console.log('success');
    })
    .catch(error => {
      alert(error)
    })

  const socket = openSocket('http://localhost:3000')
  socket.on('newuser', data => {
      if (data.serverResponse === 'created') {
        this.users = data.user
        commit('GET_USERS', users)
      })
  })

你的 .catch 部分有问题，因为它在 .then 部分内，我还将你的套接字代码移到了承诺之外。

推荐阅读