From cc35f2c18665bc86a9deb3ba53ebf63eb83bd22d Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 6 Sep 2020 13:04:44 +0900 Subject: [PATCH] wip --- src/client/components/drive.vue | 2 +- src/client/components/follow-button.vue | 2 +- src/client/components/note.vue | 2 +- src/client/components/notification.vue | 4 ++-- src/client/components/notifications.vue | 4 ++-- src/client/components/stream-indicator.vue | 6 +++--- src/client/components/timeline.vue | 16 ++++++++-------- src/client/deck.vue | 4 ++-- src/client/default.vue | 4 ++-- src/client/init.ts | 10 ++++------ src/client/os.ts | 3 +++ src/client/pages/instance/index.vue | 4 ++-- src/client/pages/instance/queue.vue | 2 +- src/client/pages/messaging/index.vue | 2 +- src/client/pages/messaging/messaging-room.vue | 2 +- src/client/root.vue | 4 ---- src/client/scripts/stream.ts | 9 +++------ src/client/widgets/photos.vue | 2 +- 18 files changed, 38 insertions(+), 44 deletions(-) diff --git a/src/client/components/drive.vue b/src/client/components/drive.vue index 2061359eef..d394be6cd4 100644 --- a/src/client/components/drive.vue +++ b/src/client/components/drive.vue @@ -141,7 +141,7 @@ export default defineComponent({ }); } - this.connection = this.$root.stream.useSharedConnection('drive'); + this.connection = os.stream.useSharedConnection('drive'); this.connection.on('fileCreated', this.onStreamDriveFileCreated); this.connection.on('fileUpdated', this.onStreamDriveFileUpdated); diff --git a/src/client/components/follow-button.vue b/src/client/components/follow-button.vue index 8832d07b9c..d8a5be3572 100644 --- a/src/client/components/follow-button.vue +++ b/src/client/components/follow-button.vue @@ -69,7 +69,7 @@ export default defineComponent({ }, mounted() { - this.connection = this.$root.stream.useSharedConnection('main'); + this.connection = os.stream.useSharedConnection('main'); this.connection.on('follow', this.onFollowChange); this.connection.on('unfollow', this.onFollowChange); diff --git a/src/client/components/note.vue b/src/client/components/note.vue index b502cbdf05..88ad6abe9d 100644 --- a/src/client/components/note.vue +++ b/src/client/components/note.vue @@ -253,7 +253,7 @@ export default defineComponent({ async created() { if (this.$store.getters.isSignedIn) { - this.connection = this.$root.stream; + this.connection = os.stream; } // plugin diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue index 091898616e..d7016399ea 100644 --- a/src/client/components/notification.vue +++ b/src/client/components/notification.vue @@ -104,7 +104,7 @@ export default defineComponent({ if (!this.notification.isRead) { this.readObserver = new IntersectionObserver((entries, observer) => { if (!entries.some(entry => entry.isIntersecting)) return; - this.$root.stream.send('readNotification', { + os.stream.send('readNotification', { id: this.notification.id }); entries.map(({ target }) => observer.unobserve(target)); @@ -112,7 +112,7 @@ export default defineComponent({ this.readObserver.observe(this.$el); - this.connection = this.$root.stream.useSharedConnection('main'); + this.connection = os.stream.useSharedConnection('main'); this.connection.on('readAllNotifications', () => this.readObserver.unobserve(this.$el)); } }, diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue index 6fbec56493..821037ba3f 100644 --- a/src/client/components/notifications.vue +++ b/src/client/components/notifications.vue @@ -75,7 +75,7 @@ export default defineComponent({ }, mounted() { - this.connection = this.$root.stream.useSharedConnection('main'); + this.connection = os.stream.useSharedConnection('main'); this.connection.on('notification', this.onNotification); }, @@ -88,7 +88,7 @@ export default defineComponent({ // const isMuted = !!this.allIncludeTypes && !this.allIncludeTypes.includes(notification.type); if (isMuted || document.visibilityState === 'visible') { - this.$root.stream.send('readNotification', { + os.stream.send('readNotification', { id: notification.id }); } diff --git a/src/client/components/stream-indicator.vue b/src/client/components/stream-indicator.vue index ad64acfc73..bd391e3bfb 100644 --- a/src/client/components/stream-indicator.vue +++ b/src/client/components/stream-indicator.vue @@ -20,14 +20,14 @@ export default defineComponent({ }, computed: { stream() { - return this.$root.stream; + return os.stream; }, }, created() { - this.$root.stream.on('_disconnected_', this.onDisconnected); + os.stream.on('_disconnected_', this.onDisconnected); }, beforeDestroy() { - this.$root.stream.off('_disconnected_', this.onDisconnected); + os.stream.off('_disconnected_', this.onDisconnected); }, methods: { onDisconnected() { diff --git a/src/client/components/timeline.vue b/src/client/components/timeline.vue index cebce71b1c..5879d61bb4 100644 --- a/src/client/components/timeline.vue +++ b/src/client/components/timeline.vue @@ -88,36 +88,36 @@ export default defineComponent({ this.query = { antennaId: this.antenna }; - this.connection = this.$root.stream.connectToChannel('antenna', { + this.connection = os.stream.connectToChannel('antenna', { antennaId: this.antenna }); this.connection.on('note', prepend); } else if (this.src == 'home') { endpoint = 'notes/timeline'; - this.connection = this.$root.stream.useSharedConnection('homeTimeline'); + this.connection = os.stream.useSharedConnection('homeTimeline'); this.connection.on('note', prepend); - this.connection2 = this.$root.stream.useSharedConnection('main'); + this.connection2 = os.stream.useSharedConnection('main'); this.connection2.on('follow', onChangeFollowing); this.connection2.on('unfollow', onChangeFollowing); } else if (this.src == 'local') { endpoint = 'notes/local-timeline'; - this.connection = this.$root.stream.useSharedConnection('localTimeline'); + this.connection = os.stream.useSharedConnection('localTimeline'); this.connection.on('note', prepend); } else if (this.src == 'social') { endpoint = 'notes/hybrid-timeline'; - this.connection = this.$root.stream.useSharedConnection('hybridTimeline'); + this.connection = os.stream.useSharedConnection('hybridTimeline'); this.connection.on('note', prepend); } else if (this.src == 'global') { endpoint = 'notes/global-timeline'; - this.connection = this.$root.stream.useSharedConnection('globalTimeline'); + this.connection = os.stream.useSharedConnection('globalTimeline'); this.connection.on('note', prepend); } else if (this.src == 'list') { endpoint = 'notes/user-list-timeline'; this.query = { listId: this.list }; - this.connection = this.$root.stream.connectToChannel('userList', { + this.connection = os.stream.connectToChannel('userList', { listId: this.list }); this.connection.on('note', prepend); @@ -128,7 +128,7 @@ export default defineComponent({ this.query = { channelId: this.channel }; - this.connection = this.$root.stream.connectToChannel('channel', { + this.connection = os.stream.connectToChannel('channel', { channelId: this.channel }); this.connection.on('note', prepend); diff --git a/src/client/deck.vue b/src/client/deck.vue index 723ebc31f3..d957e0d4a8 100644 --- a/src/client/deck.vue +++ b/src/client/deck.vue @@ -108,7 +108,7 @@ export default defineComponent({ window.addEventListener('wheel', this.onWheel); if (this.$store.getters.isSignedIn) { - this.connection = this.$root.stream.useSharedConnection('main'); + this.connection = os.stream.useSharedConnection('main'); this.connection.on('notification', this.onNotification); } }, @@ -162,7 +162,7 @@ export default defineComponent({ } if (document.visibilityState === 'visible') { - this.$root.stream.send('readNotification', { + os.stream.send('readNotification', { id: notification.id }); diff --git a/src/client/default.vue b/src/client/default.vue index 544343bfc3..0f095a25ae 100644 --- a/src/client/default.vue +++ b/src/client/default.vue @@ -202,7 +202,7 @@ export default defineComponent({ document.documentElement.style.overflowY = 'scroll'; if (this.$store.getters.isSignedIn) { - this.connection = this.$root.stream.useSharedConnection('main'); + this.connection = os.stream.useSharedConnection('main'); this.connection.on('notification', this.onNotification); if (this.$store.state.deviceUser.widgets.length === 0) { @@ -331,7 +331,7 @@ export default defineComponent({ return; } if (document.visibilityState === 'visible') { - this.$root.stream.send('readNotification', { + os.stream.send('readNotification', { id: notification.id }); diff --git a/src/client/init.ts b/src/client/init.ts index 2216528d48..fdcb7155d2 100644 --- a/src/client/init.ts +++ b/src/client/init.ts @@ -11,7 +11,6 @@ import { deserialize } from '@syuilo/aiscript/built/serializer'; import VueHotkey from '@/scripts/hotkey'; import Root from './root.vue'; -import Stream from '@/scripts/stream'; import widgets from './widgets'; import directives from './directives'; import components from '@/components'; @@ -22,6 +21,7 @@ import { applyTheme, lightTheme } from '@/scripts/theme'; import { isDeviceDarkmode } from '@/scripts/is-device-darkmode'; import { createPluginEnv } from '@/scripts/aiscript/api'; import { i18n, lang } from './i18n'; +import { stream } from '@/os'; console.info(`Misskey v${version}`); @@ -112,7 +112,7 @@ if (store.state.i != null) { if (i != null && i !== 'null') { try { const me = await fetchme(i); - store.dispatch('login', me); + await store.dispatch('login', me); } catch (e) { // Render the error screen // TODO: ちゃんとしたコンポーネントをレンダリングする(v10とかのトラブルシューティングゲーム付きのやつみたいな) @@ -122,11 +122,9 @@ if (store.state.i != null) { } //#endregion -const stream = new Stream(store.state.i); +stream.init(store.state.i); -const app = createApp(Root, { - stream -}); +const app = createApp(Root); app.use(store); app.use(router); diff --git a/src/client/os.ts b/src/client/os.ts index 92ef544a40..f3d3c72bdd 100644 --- a/src/client/os.ts +++ b/src/client/os.ts @@ -1,6 +1,9 @@ import { defineAsyncComponent } from 'vue'; +import Stream from '@/scripts/stream'; import { store } from './store'; +export const stream = new Stream(); + export function api(endpoint: string, data: Record = {}, token?: string | null | undefined) { return store.dispatch('api', { endpoint, data, token }); } diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue index 5502d6bb9c..c5e045e4f3 100644 --- a/src/client/pages/instance/index.vue +++ b/src/client/pages/instance/index.vue @@ -234,7 +234,7 @@ export default defineComponent({ stats: null, serverInfo: null, connection: null, - queueConnection: this.$root.stream.useSharedConnection('queueStats'), + queueConnection: os.stream.useSharedConnection('queueStats'), memUsage: 0, chartCpuMem: null, chartNet: null, @@ -499,7 +499,7 @@ export default defineComponent({ os.api('admin/server-info', {}).then(res => { this.serverInfo = res; - this.connection = this.$root.stream.useSharedConnection('serverStats'); + this.connection = os.stream.useSharedConnection('serverStats'); this.connection.on('stats', this.onStats); this.connection.on('statsLog', this.onStatsLog); this.connection.send('requestLog', { diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue index 84e077b741..ab04c85d09 100644 --- a/src/client/pages/instance/queue.vue +++ b/src/client/pages/instance/queue.vue @@ -38,7 +38,7 @@ export default defineComponent({ data() { return { - connection: this.$root.stream.useSharedConnection('queueStats'), + connection: os.stream.useSharedConnection('queueStats'), faExchangeAlt, faTrashAlt } }, diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue index 52122e4b58..e739f5e942 100644 --- a/src/client/pages/messaging/index.vue +++ b/src/client/pages/messaging/index.vue @@ -63,7 +63,7 @@ export default defineComponent({ }, mounted() { - this.connection = this.$root.stream.useSharedConnection('messagingIndex'); + this.connection = os.stream.useSharedConnection('messagingIndex'); this.connection.on('message', this.onMessage); this.connection.on('read', this.onRead); diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue index 128d26d1ce..62574600e5 100644 --- a/src/client/pages/messaging/messaging-room.vue +++ b/src/client/pages/messaging/messaging-room.vue @@ -107,7 +107,7 @@ export default defineComponent({ this.group = group; } - this.connection = this.$root.stream.connectToChannel('messaging', { + this.connection = os.stream.connectToChannel('messaging', { otherparty: this.user ? this.user.id : undefined, group: this.group ? this.group.id : undefined, }); diff --git a/src/client/root.vue b/src/client/root.vue index d119c10deb..3ca565d191 100644 --- a/src/client/root.vue +++ b/src/client/root.vue @@ -23,10 +23,6 @@ export default defineComponent({ }, props: { - // TODO: propで渡すとvueによって無駄なobserveがされるのでどうにかする - stream: { - - }, isMobile: { type: Boolean, required: false, diff --git a/src/client/scripts/stream.ts b/src/client/scripts/stream.ts index a7b37722e5..c82fb08869 100644 --- a/src/client/scripts/stream.ts +++ b/src/client/scripts/stream.ts @@ -8,16 +8,13 @@ import { wsUrl } from '@/config'; */ export default class Stream extends EventEmitter { private stream: ReconnectingWebsocket; - public state: 'initializing' | 'reconnecting' | 'connected'; + public state: 'initializing' | 'reconnecting' | 'connected' = 'initializing'; private sharedConnectionPools: Pool[] = []; private sharedConnections: SharedConnection[] = []; private nonSharedConnections: NonSharedConnection[] = []; - constructor(user) { - super(); - - this.state = 'initializing'; - + @autobind + public init(user): void { this.stream = new ReconnectingWebsocket(wsUrl + (user ? `?i=${user.token}` : ''), '', { minReconnectionDelay: 1 }); // https://github.com/pladaria/reconnecting-websocket/issues/91 this.stream.addEventListener('open', this.onOpen); this.stream.addEventListener('close', this.onClose); diff --git a/src/client/widgets/photos.vue b/src/client/widgets/photos.vue index 81ead5e609..ef71499f51 100644 --- a/src/client/widgets/photos.vue +++ b/src/client/widgets/photos.vue @@ -50,7 +50,7 @@ export default defineComponent({ }; }, mounted() { - this.connection = this.$root.stream.useSharedConnection('main'); + this.connection = os.stream.useSharedConnection('main'); this.connection.on('driveFileCreated', this.onDriveFileCreated);