套接字通知

问题描述

我有一个从 Spring Boot 后端接收通知的屏幕，我将它们显示在铃铛中。删除通知时，它会很好地删除它，但是当另一个新通知到达时，它会加载我已经删除的通知。

import SockJS from 'sockjs-client'; 
import Stomp from 'stompjs';

// core components

const HeaderNotificacions = () => {

const [chipData,setChipData] = useState([]); //Hook where I load the notifications that come from the backend    > 

const historyAlerts = localStorage.getItem('notys')
 ? JSON.parse(localStorage.getItem('notys'))
 : [];   if (chipData.length === 0 && historyAlerts.length !== 0) { //I get the notifcations when I reload the browser
 setChipData(historyAlerts);   }

useEffect(() => {


 var sock = new SockJS(
   `${process.env.REACT_APP_WEB_SOCKET}mocaConsola/api/notifications`
 );
 let stompClient = Stomp.over(sock);
 sock.onopen = function () {
   /*    console.log('open'); */
 };
 stompClient.connect({},function (frame) {
   stompClient.subscribe('/ws/alertNotification',function (greeting) {
     if (stompClient !== null) {
       stompClient.disconnect();
     }

     setChipData([
       ...chipData,{
         key: greeting.headers['message-id'],label: JSON.parse(greeting.body).content,},]);
   });
 });   },[chipData]);

localStorage.setItem('notys',JSON.stringify(chipData));

const handleDelete = (chipToDelete) => () => {
 const historyAlerts = localStorage.getItem('notys')  //function to delete a notification
   ? JSON.parse(localStorage.getItem('notys'))            
   : [];

 setChipData((chips) =>
   chips.filter((chip) => chip.key !== chipToDelete.key)
 );

 const local = historyAlerts.filter((chip) => chip.key !== chipToDelete.key);
 localStorage.setItem('notys',JSON.stringify(local));   };

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）