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?
axios.get()
en el cliente será capturado porrouter.post()
en el servidor? Recuerda que en HTTP los verbos GET y POST son totalmente diferentes. En todo caso deberías usaraxios.post()
en el cliente, si tu servidor está esperando una solicitud de ese tipo. Cambia eso y comenta el resultado. Saludos