웹 소켓을 통해 동일한 메시지를 여러 번 수신.이전 메시지는 3, 4개의 새 채팅 메시지 이후에 교체됨

웹 소켓을 통해 동일한 메시지를 여러 번 수신.이전 메시지는 3, 4개의 새 채팅 메시지 이후에 교체됨

나는 웹 소켓을 React with Django 백엔드에 통합하고 있다.

나는 메시지를 보낼 수 있고, 백엔드에서 새로운 메시지를 받을 수 있다.

문제는 3, 4개의 메시지를 보낸 후 이전 메시지가 프런트엔드의 새 메시지로 대체되고 있지만, 백엔드에서는 모두 괜찮고, 사실 내가 새로 고친 후에는 모든 것이 정상적으로 작동한다는 것이다.

이러한 상황에 맞게 상태를 업데이트하는 방법

편집:

내가 지금 발견한 가장 큰 문제는 채팅창을 보내면 국가가 여러 번 업데이트되고, 그 길이가 매번 바뀌고 화면이 많이 펄럭이는 것이다.

얇게 썰다

name: 'chat',
initialState: {
        chatMessages: [],
}

reducers: {
        setChatMessages(state, action) {
            const chatmessages = action.payload;
            return {...state, chatMessages:chatmessages}; 
        },
}

수다를 떨다

const chatMessagesSelector = useSelector(selectChats);
const chatMessages = chatMessagesSelector?.chatMessages

    chatSocket.onmessage = (e) => {
    var data = JSON.parse(e.data)
    var message = {message: data.message, user: data.user,
                    timestamp: data.timestamp};  
    //console.log(message)
    let updatedMessages = [...chatMessages];
    updatedMessages.push(message);
    dispatch(setChatMessages(updatedMessages));
}

바로 이겁니다.chatMessages위에 기록된 개체updatedMessages.

Array(1)
0: {user: "testuser", message: "check!", timestamp: "2021-03-09T09:15:09.408717+01:00}
length: 1

아래 코드(접수 1*):

chatSocket.onmessage = (e) => {
    var data = JSON.parse(e.data)
    var message = {message: data.message, user: data.user, timestamp: data.timestamp};
    let updatedMessages = [...chatMessages];
    updatedMessages.push(message);
    dispatch(setChatMessages(updatedMessages));

reducx에서 읽고 새로운 배열을 만들고 새로운 요소를 밀어 전체 배열을 디스패치한다.

그 대신 (Access 2) 감쇠기에 의해 환원 저장소에 푸시될 새 요소를 보내면 된다.

chatSocket.onmessage = (e) => {
    var data = JSON.parse(e.data)
    var message = {message: data.message, user: data.user, timestamp: data.timestamp};   
    dispatch(setChatMessages(message));

이제 (접근법 2에 대해) 환원기에서 다음과 같이 변경하십시오.

reducers: {
   setChatMessages(state, action) {
      return {...state, chatMessages: [...state.chatMessages, action.payload]};}
}

다음과 같은 작업을 수행할 수도 있다.

reducers: {
   setChatMessages(state, action) {
      state.chatMessages.push(action.payload)
}

이유:

Redex Toolkit은 우리가 Reducer에 "mutating" 논리를 쓸 수 있게 해준다.그것은 실제로 국가를 변이하지 않는데, 그것은 "초안 상태"로의 변화를 감지하고 그러한 변화를 바탕으로 완전히 새로운 불변의 상태를 만들어 내는 이머 라이브러리를 사용하기 때문이다.

*접근 1은 다음과 같은 경우 버그가 있을 수 있음chatMessages구성 요소가 오래되었거나 지연됨.

편집:

실제 문제는 이벤트 수신기가 다음과 같이 여러 번 등록된다는 것 같다.

그것을 고치려면, 당신은 그것을 안으로 옮겨야 한다.useEffect또는componentDidMount:

useEffect(() => {
  chatSocket.onmessage = (e) => {
    var data = JSON.parse(e.data)
    // ...
  }
  return function cleanup() {
    // de-register the socket event
  }
}, [])

새 메시지를 이전 메시지와 연결해야 하지만 다음 메시지로 바꾸십시오.

setChatMessages(state, action) {
  const chatMessages = action.payload;
  return { ...state, chatMessages: state.chatmessages.concat(chatMessages)};
}

동일한 메시지를 로컬에 저장한 다음 소켓에서 다시 보내면 주의하고 중복되지 않도록 하십시오.

참조URL: https://stackoverflow.com/questions/66622273/receiving-same-message-multiple-times-via-web-socket-the-older-messages-are-rep