wip

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);

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);

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

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));
 		}
 	},

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
 				});
 			}

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() {

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);

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
 				});
 

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
 				});
 

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, {
+const app = createApp(Root);
-	stream
-});
 
 app.use(store);
 app.use(router);

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<string, any> = {}, token?: string | null | undefined) {
 	return store.dispatch('api', { endpoint, data, token });
 }

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', {

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
 		}
 	},

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);

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,
 			});

src/client/root.vue

@@ -23,10 +23,6 @@ export default defineComponent({
 	},
 
 	props: {
-		// TODO: propで渡すとvueによって無駄なobserveがされるのでどうにかする
-		stream: {
-
-		},
 		isMobile: {
 			type: Boolean,
 			required: false,

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) {
+	@autobind
-		super();
+	public init(user): void {
-
-		this.state = 'initializing';
-
 		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);

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);