Блог

Сообщество Hy, я разработчик интерфейсов с реактивным интерфейсом, впервые работающий на WebSocket, и мне очень трудно работать над этим, я пробую много видео и блогов на YouTube, которые также работают для меня. Бэкэнд WebSocket выполнен на python Django, который выполнен каким-то разработчиком бэкэнда. Теперь я пытаюсь в react-native использовать WebSocket (), но он работает неправильно.

Позвольте мне отобразить код подключения

 const url = 'ws://000.000.00.0/api/ws/chat/3/2/'
 const ws = new WebSocket(url)
 

Этот код я использовал для подключения, который хорошо работает.

Чтобы отправить сообщение, я использовал это на onPress, он также хорошо отправляет сообщение.

   const sendMessage = () =>{
    scrollHandler()
    ws.onopen=e=>{
      console.log('open',e)
    }
    if (ws.readyState === WebSocket.OPEN amp;amp; msg != '') {
      ws.send(msg);
      setMsg('')
      ws.onclose = (e) => {
        console.log(e.code, e.reason);
      };
    }else {
      console.log('not send');
      ws.onclose = (e) => {
        // connection closed
        console.log(e.code, e.reason);
      };
    }
  }
 

Чтобы увидеть отправку сообщений и получение сообщений, я использовал это, которое отображает мои сообщения:

   ws.onmessage = async (message) => {
    console.log(message)
  };
 

Ответ от ws.onmessage, который я получаю при отправке сообщения, таков

 {"data": "{"type": "Hey", "text": "male@mail.com", "sender": "2", "success": true}", "isTrusted": false}
 

Ответ от ws.onmessage, который я получаю при получении сообщения, таков

 {"data": "{"type": "hy wait", "text": "add@mail.com", "sender": "3", "success": true}", "isTrusted": false}
 

Приведенный выше код очень хорошо работает на консоли и почтальоне.

Теперь проблема заключается в отображении сообщений на экране моего чата, для чего я пытаюсь создать некоторые состояния const [temp, setTemp] = useState([]); const [Список сообщений, setMessagesList] = useState([]); и использовал их в ws.onmessage следующим образом:

   ws.onmessage = async (message) => {
    const data = JSON.parse(message.data);
    if (data.sender == 2) {
     await setMessagesList(messagesList => [
        ...messagesList,
        {msg: data.type, sender: data.sender},
      ]);
        console.log('messagesList', messagesList);
      await setTemp(messagesList);
      setMessagesList([]);
    }
    else if (data.sender == 3) {
      await setMessagesList(messagesList => [
        ...messagesList,
        {msg: data.type, sender: data.sender},
      ]);
      await setTemp(messagesList);
      await setMessagesList([]);
    }
  };
 

First I parse the data that I’m receiving then set conditions on sender id and then set in messageslist state after setting it again in temp state list and then trying to map that which work one or two messages after the app has gone slow and hang or restart, which I mean I’m not using the right approach and also feel mess in that approach. If any of you work on that give me some suggestions on what I need to do to map or display my messages on-screen nicely without any issue.

Your help will be appreciatable.