vuex와 socketio를 사용하여 실시간 크러드를 만드는 방법

vuex와 socketio를 사용하여 실시간 크러드를 만드는 방법

vuex, node, express, socketio를 사용하여 실시간 crud를 수행하고 싶은데 다음 구문을 사용해도 결과를 얻을 수 없습니다.

서버

index.displaces를 표시합니다.

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

소켓.케이블

    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
        }
    }

user.displaces

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

고객

Module 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)
        })
})

새 사용자를 만들 때 사용자 목록은 자동으로 업데이트되지 않지만 새 사용자를 보려면 페이지를 새로 고쳐야 합니다.왜 이런 일이 일어나는 거죠?

이는 백엔드에서 포스트 URL 엔드 포인트를 처리하고 있기 때문입니다.'/newuser'데이터를 가져옵니다.실제로 socketio를 사용하여 데이터를 게시하는 것이 아니기 때문에 페이지를 업데이트하지 않으면axios.get게시할 API가 새로 고쳐질 때까지 함수에 새로운 데이터가 없습니다.데이터가 주로 API가 아닌 socketio에 의해 클라이언트에 업데이트되도록 소켓클라이언트 코드를 Axios 약속 밖에 두는 것이 좋습니다.

편집: 이것은 클라이언트의 코드입니다.

    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 부분에 문제가 있었습니다.그때의 .catch 부분은 약속 이외의 소켓 코드를 옮겼습니다.

즉, /newuser에 투고할 때 서버에 저장됩니다.클라이언트의 socketio에서 exmiss를 전송하면 일부 소켓이벤트가 발생했는지 여부를 확인하기 위해 axios를 사용할 필요가 없습니다.axios.get()를 삭제하고 계속 유지합니다.

 const socket = openSocket('http://localhost:3000')
   socket.on('newuser', data => {
   //do some thing             
   })

언급URL : https://stackoverflow.com/questions/58788915/how-to-make-a-realtime-crud-using-vuex-and-socketio