https://github.com/syuilo/misskey/pull/7129#discussion_r599518698, https://github.com/syuilo/misskey/pull/7129#discussion_r599504827

src/client/components/notification.vue

@@ -94,12 +94,18 @@ export default defineComponent({
 			getNoteSummary: (text: string) => getNoteSummary(text, i18n.locale),
 			followRequestDone: false,
 			groupInviteDone: false,
-			connection: null,
-			readObserver: null,
+			readObserver: null as IntersectionObserver | null,
 			faIdCardAlt, faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faClock, faCheck, faPollH
 		};
 	},
 
+	watch: {
+		'notification.isRead'() {
+			this.readObserver?.unobserve(this.$el);
+			this.readObserver = null;
+		},
+	},
+
 	mounted() {
 		if (!this.notification.isRead) {
 			this.readObserver = new IntersectionObserver((entries, observer) => {
@@ -107,30 +113,19 @@ export default defineComponent({
 				os.stream.send('readNotification', {
 					id: this.notification.id
 				});
-				entries.map(({ target }) => observer.unobserve(target));
+				for (const { target } of entries) {
+					observer.unobserve(target);
+				}
+				this.readObserver = null;
 			});
 
 			this.readObserver.observe(this.$el);
-
-			this.connection = os.stream.useSharedConnection('main');
-
-			// 既読処理
-			// notification.isReadは更新しないので注意
-			this.connection.on('readAllNotifications', () => {
-				this.readObserver.unobserve(this.$el);
-			});
-			this.connection.on('readNotifications', notificationIds => {
-				if (notificationIds.includes(this.notification.id)) {
-					this.readObserver.unobserve(this.$el);
-				}
-			})
 		}
 	},
 
 	beforeUnmount() {
 		if (!this.notification.isRead) {
-			this.readObserver.unobserve(this.$el);
-			this.connection.dispose();
+			this.readObserver?.unobserve(this.$el);
 		}
 	},