frontend: ハッシュタグTLをリアルタイムに更新 (yojo-art#144)

kozakura913 · Jul 3, 2024 · deb5a72 · deb5a72
2 parents 24a2334 + f3dfb0b
commit deb5a72
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/CHANGELOG_yojo.md b/CHANGELOG_yojo.md
@@ -26,6 +26,7 @@
 
 ### Client
 - feat: 未ログイン時サーバーで指定されている場合、マスコット画像が表示されます
+- enhance: ハッシュタグTLをリアルタイムに更新
 
 ### Server
 - fix: リモートユーザーにはファイルサイズ制限を適用しない

diff --git a/packages/cherrypick-js/etc/cherrypick-js.api.md b/packages/cherrypick-js/etc/cherrypick-js.api.md
@@ -723,7 +723,7 @@ export type Channels = {
     };
     hashtag: {
         params: {
-            q?: string;
+            q?: string[][];
         };
         events: {
             note: (payload: Note) => void;

diff --git a/packages/cherrypick-js/src/streaming.types.ts b/packages/cherrypick-js/src/streaming.types.ts
@@ -142,7 +142,7 @@ export type Channels = {
 	};
 	hashtag: {
 		params: {
-			q?: string;
+			q?: string[][];
 		};
 		events: {
 			note: (payload: Note) => void;

diff --git a/packages/frontend/src/pages/tag.vue b/packages/frontend/src/pages/tag.vue
@@ -27,6 +27,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
 import { defaultStore } from '@/store.js';
+import { useStream } from '@/stream.js';
 import * as os from '@/os.js';
 
 const props = defineProps<{
@@ -42,6 +43,8 @@ const pagination = {
 };
 const notes = ref<InstanceType<typeof MkNotes>>();
 
+const stream = useStream();
+
 async function post() {
 	defaultStore.set('postFormHashtags', props.tag);
 	defaultStore.set('postFormWithHashtags', true);
@@ -59,6 +62,17 @@ definePageMetadata(() => ({
 	title: props.tag,
 	icon: 'ti ti-hash',
 }));
+
+function openStream() {
+	const connection = stream.useChannel('hashtag', {
+		q: [[props.tag]],
+	});
+	connection.on('note', note => {
+		notes.value?.pagingComponent?.prepend(note);
+	});
+}
+
+openStream();
 </script>
 
 <style lang="scss" module>