programing

페이지를 새로 고치지 않으면 소켓 IO가 작동하지 않음 - Vue js

copyandpastes 2022. 7. 4. 23:28
반응형

페이지를 새로 고치지 않으면 소켓 IO가 작동하지 않음 - Vue js

클라이언트와 서버 간의 채팅을 확립했습니다.모든 것은 정상이지만 최근 메시지를 표시하려면 채팅 페이지를 새로 고쳐야 합니다.두 개의 다른 로그인을 사용하여 테스트했지만 새로 고친 페이지는 정상적으로 동작하지만 다른 페이지는 최근 메시지로 업데이트되지 않습니다.

Server.js

io.on('connection', (socket) => {
   console.log("---- client connected ----");

   // send messages on every event
   sendStatus = function (data) {
      socket.emit('messages', data);
   }

   // get messages from the server
   socket.on('send_message', function (data) {
      new Chat({
        user_id: data.user_id,
        message: data.message,
        date: data.date,
      }).save(function(err, chat_data){
        if (!err) {
            Chat.findOne({ _id: chat_data._id }).populate('user_id').exec(function (err, chat) {
                sendStatus(chat);
            })
        }
     });
   })

  // send messages on load
  Chat.find({}).populate('user_id').exec(function (err, chat) {
     console.log('chattttttttt', chat)
     socket.emit('onload_chat', chat);
  })
})

Client.vue

 mounted () {
    this.getUsers()

    this.$socket.on('messages', (data)=> {
      this.chats.push(data)
      console.log('on send message', data)
    });
},
beforeMount () {
    this.$socket.on('onload_chat', (data)=> {
      this.chats = data
    });
},

언급URL : https://stackoverflow.com/questions/52810637/socket-io-not-working-without-refreshing-page-vue-js

반응형