Как приготовить сырое блюдо в реальном времени, используя vuex и socketio? - PullRequest
Новая
       23

Как приготовить сырое блюдо в реальном времени, используя vuex и socketio?

0 голосов
/ 10 ноября 2019

Я хочу выполнить Crud в реальном времени, используя vuex, node, express и socketio, но используя следующий синтаксис, я не могу получить результат.

Сервер

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

user.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)
        })
})

Когда я создаю нового пользователя, список пользователейне обновляется автоматически, но мне нужно обновить страницу, чтобы увидеть нового пользователя, почему это происходит?

1 Ответ

0 голосов
/ 10 ноября 2019

Прежде всего, позвольте мне прояснить, что VUEX является централизованным управлением состоянием и не имеет ничего общего с " realtime ".

Вам необходимо настроить прослушиватели событий на сервере с помощью socket.io и vue-socket.io

Socket.IO может быть реализован с помощью Express, см. Здесь

Для использования VUEXс Socket.IO на стороне клиента, см. это

...