5

Quiero realizar un CRUD realtime utilizando Vuex, Node, Express y Socket.io pero utilizando la siguiente sintaxis no logro obtener el resultado.

Servidor:

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

Cliente:

  • Modulo user.js (VUEX actions)
    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)
            })
    })

Cuando creo el nuevo usuario, en el cliente no se actualiza la lista de usuarios automáticamente, sino que tengo que refrescar la página, ¿por qué pasa esto?

2
  • ¿Porqué crees que usar axios.get() en el cliente será capturado por router.post() en el servidor? Recuerda que en HTTP los verbos GET y POST son totalmente diferentes. En todo caso deberías usar axios.post() en el cliente, si tu servidor está esperando una solicitud de ese tipo. Cambia eso y comenta el resultado. Saludos Commented el 19 nov. 2019 a las 8:28
  • los get y post no pintan nada en el objetivo, ya que si quieres usar socket no necesitas axios. solo socket cliente y socket server Commented el 19 nov. 2019 a las 15:59

1 respuesta 1

2
+25
  • axios es para hacer peticiones HTTP
  • sockets abren un canal de comunicación entre cliente servidor

O usas axios, o usas sockets.

Lo voy a hacer como si fuese un solo archivo, ya tu lo distribuyes como quieras. Esto porque no vi en ninguna parte tu index.js donde llames a user.js

Cliente

const socket = openSocket('http://localhost:3000') // esto lo tomé de tu codigo no estoy seguro si funciona

socket.emit('newuser', form ); // te conectas al canal y envías los datos del formulario

// Medio por el que escucha si el servidor responde a la conexion con newuser
socket.on('usercreated', msg => {
    console.log( msg )
});

Server

const io = require('./sockets')(server)
io.on('connection', socket => {
  console.log('client connected');

  socket.on('newuser', function( form ){
    
    // Tu codigo sea lo que sea que haga

    io.emit('usercreated', 'Usuario creado con exito' );
  });

})

const server = app.listen('3000',() => {
    console.log('<--- Web Server Starter --->')
})

En teoría así es como debe funcionar... acomodalo a tu gusto.. LEE LA DOCUMENTACION

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.