profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

enhance: pizzaxでstreamingのuser storage updateイベントを監視して更新 (#8095)

Browse source 
* wip

* wip?

* ?

* streamingのuser storage updateイベントを監視して更新

* 必要な時以外はストレージを更新しない

* fix?

* wip

* fix

* fix
This commit is contained in:
tamaina 2021-12-29 22:13:09 +09:00 • committed by GitHub
parent 99eb919f4e
commit e159f15600
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 98 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

3
packages/client/src/components/drive.vue
View file

@ -53,6 +53,7 @@ import XFolder from './drive.folder.vue';
import XFile from './drive.file.vue'; import XFile from './drive.file.vue';
import MkButton from './ui/button.vue'; import MkButton from './ui/button.vue';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -140,7 +141,7 @@ export default defineComponent({
}); });
} }
this.connection = markRaw(os.stream.useChannel('drive')); this.connection = markRaw(stream.useChannel('drive'));
this.connection.on('fileCreated', this.onStreamDriveFileCreated); this.connection.on('fileCreated', this.onStreamDriveFileCreated);
this.connection.on('fileUpdated', this.onStreamDriveFileUpdated); this.connection.on('fileUpdated', this.onStreamDriveFileUpdated);

3
packages/client/src/components/follow-button.vue
View file

@ -30,6 +30,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, markRaw } from 'vue'; import { defineComponent, markRaw } from 'vue';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
export default defineComponent({ export default defineComponent({
props: { props: {
@ -71,7 +72,7 @@ export default defineComponent({
}, },
mounted() { mounted() {
this.connection = markRaw(os.stream.useChannel('main')); this.connection = markRaw(stream.useChannel('main'));
this.connection.on('follow', this.onFollowChange); this.connection.on('follow', this.onFollowChange);
this.connection.on('unfollow', this.onFollowChange); this.connection.on('unfollow', this.onFollowChange);

3
packages/client/src/components/note-detailed.vue
View file

@ -140,6 +140,7 @@ import { checkWordMute } from '@/scripts/check-word-mute';
import { userPage } from '@/filters/user'; import { userPage } from '@/filters/user';
import { notePage } from '@/filters/note'; import { notePage } from '@/filters/note';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import { noteActions, noteViewInterruptors } from '@/store'; import { noteActions, noteViewInterruptors } from '@/store';
import { reactionPicker } from '@/scripts/reaction-picker'; import { reactionPicker } from '@/scripts/reaction-picker';
import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm'; import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
@ -260,7 +261,7 @@ export default defineComponent({
async created() { async created() {
if (this.$i) { if (this.$i) {
this.connection = os.stream; this.connection = stream;
} }
this.muted = await checkWordMute(this.appearNote, this.$i, this.$store.state.mutedWords); this.muted = await checkWordMute(this.appearNote, this.$i, this.$store.state.mutedWords);

3
packages/client/src/components/note.vue
View file

@ -122,6 +122,7 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
import { checkWordMute } from '@/scripts/check-word-mute'; import { checkWordMute } from '@/scripts/check-word-mute';
import { userPage } from '@/filters/user'; import { userPage } from '@/filters/user';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import { noteActions, noteViewInterruptors } from '@/store'; import { noteActions, noteViewInterruptors } from '@/store';
import { reactionPicker } from '@/scripts/reaction-picker'; import { reactionPicker } from '@/scripts/reaction-picker';
import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm'; import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
@ -245,7 +246,7 @@ export default defineComponent({
async created() { async created() {
if (this.$i) { if (this.$i) {
this.connection = os.stream; this.connection = stream;
} }
this.collapsed = this.appearNote.cw == null && this.appearNote.text && ( this.collapsed = this.appearNote.cw == null && this.appearNote.text && (

5
packages/client/src/components/notification.vue
View file

@ -74,6 +74,7 @@ import { notePage } from '@/filters/note';
import { userPage } from '@/filters/user'; import { userPage } from '@/filters/user';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import { useTooltip } from '@/scripts/use-tooltip'; import { useTooltip } from '@/scripts/use-tooltip';
export default defineComponent({ export default defineComponent({
@ -106,7 +107,7 @@ export default defineComponent({
if (!props.notification.isRead) { if (!props.notification.isRead) {
const readObserver = new IntersectionObserver((entries, observer) => { const readObserver = new IntersectionObserver((entries, observer) => {
if (!entries.some(entry => entry.isIntersecting)) return; if (!entries.some(entry => entry.isIntersecting)) return;
os.stream.send('readNotification', { stream.send('readNotification', {
id: props.notification.id id: props.notification.id
}); });
observer.disconnect(); observer.disconnect();
@ -114,7 +115,7 @@ export default defineComponent({
readObserver.observe(elRef.value); readObserver.observe(elRef.value);
const connection = os.stream.useChannel('main'); const connection = stream.useChannel('main');
connection.on('readAllNotifications', () => readObserver.disconnect()); connection.on('readAllNotifications', () => readObserver.disconnect());
onUnmounted(() => { onUnmounted(() => {

5
packages/client/src/components/notifications.vue
View file

@ -28,6 +28,7 @@ import XList from './date-separated-list.vue';
import XNote from './note.vue'; import XNote from './note.vue';
import { notificationTypes } from 'misskey-js'; import { notificationTypes } from 'misskey-js';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
export default defineComponent({ export default defineComponent({
@ -100,7 +101,7 @@ export default defineComponent({
}, },
mounted() { mounted() {
this.connection = markRaw(os.stream.useChannel('main')); this.connection = markRaw(stream.useChannel('main'));
this.connection.on('notification', this.onNotification); this.connection.on('notification', this.onNotification);
}, },
@ -112,7 +113,7 @@ export default defineComponent({
onNotification(notification) { onNotification(notification) {
const isMuted = !this.allIncludeTypes.includes(notification.type); const isMuted = !this.allIncludeTypes.includes(notification.type);
if (isMuted || document.visibilityState === 'visible') { if (isMuted || document.visibilityState === 'visible') {
os.stream.send('readNotification', { stream.send('readNotification', {
id: notification.id id: notification.id
}); });
} }

4
packages/client/src/components/post-form.vue
View file

@ -74,11 +74,11 @@ import { formatTimeString } from '@/scripts/format-time-string';
import { Autocomplete } from '@/scripts/autocomplete'; import { Autocomplete } from '@/scripts/autocomplete';
import { noteVisibilities } from 'misskey-js'; import { noteVisibilities } from 'misskey-js';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import { selectFiles } from '@/scripts/select-file'; import { selectFiles } from '@/scripts/select-file';
import { defaultStore, notePostInterruptors, postFormActions } from '@/store'; import { defaultStore, notePostInterruptors, postFormActions } from '@/store';
import { throttle } from 'throttle-debounce'; import { throttle } from 'throttle-debounce';
import MkInfo from '@/components/ui/info.vue'; import MkInfo from '@/components/ui/info.vue';
import { defaultStore } from '@/store';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -176,7 +176,7 @@ export default defineComponent({
imeText: '', imeText: '',
typing: throttle(3000, () => { typing: throttle(3000, () => {
if (this.channel) { if (this.channel) {
os.stream.send('typingOnChannel', { channel: this.channel.id }); stream.send('typingOnChannel', { channel: this.channel.id });
} }
}), }),
postFormActions, postFormActions,

9
packages/client/src/components/taskmanager.vue
View file

@ -83,6 +83,7 @@ import MkTab from '@/components/tab.vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import follow from '@/directives/follow-append'; import follow from '@/directives/follow-append';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -104,15 +105,15 @@ export default defineComponent({
const connections = shallowRef([]); const connections = shallowRef([]);
const pools = shallowRef([]); const pools = shallowRef([]);
const refreshStreamInfo = () => { const refreshStreamInfo = () => {
console.log(os.stream.sharedConnectionPools, os.stream.sharedConnections, os.stream.nonSharedConnections); console.log(stream.sharedConnectionPools, stream.sharedConnections, stream.nonSharedConnections);
const conn = os.stream.sharedConnections.map(c => ({ const conn = stream.sharedConnections.map(c => ({
id: c.id, name: c.name, channel: c.channel, users: c.pool.users, in: c.inCount, out: c.outCount, id: c.id, name: c.name, channel: c.channel, users: c.pool.users, in: c.inCount, out: c.outCount,
})).concat(os.stream.nonSharedConnections.map(c => ({ })).concat(stream.nonSharedConnections.map(c => ({
id: c.id, name: c.name, channel: c.channel, users: null, in: c.inCount, out: c.outCount, id: c.id, name: c.name, channel: c.channel, users: null, in: c.inCount, out: c.outCount,
}))); })));
conn.sort((a, b) => (a.id > b.id) ? 1 : -1); conn.sort((a, b) => (a.id > b.id) ? 1 : -1);
connections.value = conn; connections.value = conn;
pools.value = os.stream.sharedConnectionPools; pools.value = stream.sharedConnectionPools;
}; };
const interval = setInterval(refreshStreamInfo, 1000); const interval = setInterval(refreshStreamInfo, 1000);
onBeforeUnmount(() => { onBeforeUnmount(() => {

21
packages/client/src/components/timeline.vue
View file

@ -6,6 +6,7 @@
import { defineComponent, markRaw } from 'vue'; import { defineComponent, markRaw } from 'vue';
import XNotes from './notes.vue'; import XNotes from './notes.vue';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import * as sound from '@/scripts/sound'; import * as sound from '@/scripts/sound';
export default defineComponent({ export default defineComponent({
@ -92,33 +93,33 @@ export default defineComponent({
this.query = { this.query = {
antennaId: this.antenna antennaId: this.antenna
}; };
this.connection = markRaw(os.stream.useChannel('antenna', { this.connection = markRaw(stream.useChannel('antenna', {
antennaId: this.antenna antennaId: this.antenna
})); }));
this.connection.on('note', prepend); this.connection.on('note', prepend);
} else if (this.src == 'home') { } else if (this.src == 'home') {
endpoint = 'notes/timeline'; endpoint = 'notes/timeline';
this.connection = markRaw(os.stream.useChannel('homeTimeline')); this.connection = markRaw(stream.useChannel('homeTimeline'));
this.connection.on('note', prepend); this.connection.on('note', prepend);
this.connection2 = markRaw(os.stream.useChannel('main')); this.connection2 = markRaw(stream.useChannel('main'));
this.connection2.on('follow', onChangeFollowing); this.connection2.on('follow', onChangeFollowing);
this.connection2.on('unfollow', onChangeFollowing); this.connection2.on('unfollow', onChangeFollowing);
} else if (this.src == 'local') { } else if (this.src == 'local') {
endpoint = 'notes/local-timeline'; endpoint = 'notes/local-timeline';
this.connection = markRaw(os.stream.useChannel('localTimeline')); this.connection = markRaw(stream.useChannel('localTimeline'));
this.connection.on('note', prepend); this.connection.on('note', prepend);
} else if (this.src == 'social') { } else if (this.src == 'social') {
endpoint = 'notes/hybrid-timeline'; endpoint = 'notes/hybrid-timeline';
this.connection = markRaw(os.stream.useChannel('hybridTimeline')); this.connection = markRaw(stream.useChannel('hybridTimeline'));
this.connection.on('note', prepend); this.connection.on('note', prepend);
} else if (this.src == 'global') { } else if (this.src == 'global') {
endpoint = 'notes/global-timeline'; endpoint = 'notes/global-timeline';
this.connection = markRaw(os.stream.useChannel('globalTimeline')); this.connection = markRaw(stream.useChannel('globalTimeline'));
this.connection.on('note', prepend); this.connection.on('note', prepend);
} else if (this.src == 'mentions') { } else if (this.src == 'mentions') {
endpoint = 'notes/mentions'; endpoint = 'notes/mentions';
this.connection = markRaw(os.stream.useChannel('main')); this.connection = markRaw(stream.useChannel('main'));
this.connection.on('mention', prepend); this.connection.on('mention', prepend);
} else if (this.src == 'directs') { } else if (this.src == 'directs') {
endpoint = 'notes/mentions'; endpoint = 'notes/mentions';
@ -130,14 +131,14 @@ export default defineComponent({
prepend(note); prepend(note);
} }
}; };
this.connection = markRaw(os.stream.useChannel('main')); this.connection = markRaw(stream.useChannel('main'));
this.connection.on('mention', onNote); this.connection.on('mention', onNote);
} else if (this.src == 'list') { } else if (this.src == 'list') {
endpoint = 'notes/user-list-timeline'; endpoint = 'notes/user-list-timeline';
this.query = { this.query = {
listId: this.list listId: this.list
}; };
this.connection = markRaw(os.stream.useChannel('userList', { this.connection = markRaw(stream.useChannel('userList', {
listId: this.list listId: this.list
})); }));
this.connection.on('note', prepend); this.connection.on('note', prepend);
@ -148,7 +149,7 @@ export default defineComponent({
this.query = { this.query = {
channelId: this.channel channelId: this.channel
}; };
this.connection = markRaw(os.stream.useChannel('channel', { this.connection = markRaw(stream.useChannel('channel', {
channelId: this.channel channelId: this.channel
})); }));
this.connection.on('note', prepend); this.connection.on('note', prepend);

3
packages/client/src/init.ts
View file

@ -26,7 +26,8 @@ import { router } from '@/router';
import { applyTheme } from '@/scripts/theme'; import { applyTheme } from '@/scripts/theme';
import { isDeviceDarkmode } from '@/scripts/is-device-darkmode'; import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { stream, confirm, alert, post, popup, toast } from '@/os'; import { confirm, alert, post, popup, toast } from '@/os';
import { stream } from '@/stream';
import * as sound from '@/scripts/sound'; import * as sound from '@/scripts/sound';
import { $i, refreshAccount, login, updateAccount, signout } from '@/account'; import { $i, refreshAccount, login, updateAccount, signout } from '@/account';
import { defaultStore, ColdDeviceStorage } from '@/store'; import { defaultStore, ColdDeviceStorage } from '@/store';

2
packages/client/src/os.ts
View file

@ -12,8 +12,6 @@ import { resolve } from '@/router';
import { $i } from '@/account'; import { $i } from '@/account';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
export const stream = markRaw(new Misskey.Stream(url, $i));
export const pendingApiRequestsCount = ref(0); export const pendingApiRequestsCount = ref(0);
let apiRequestsCount = 0; // for debug let apiRequestsCount = 0; // for debug
export const apiRequests = ref([]); // for debug export const apiRequests = ref([]); // for debug

5
packages/client/src/pages/admin/metrics.vue
View file

@ -101,6 +101,7 @@ const alpha = (hex, a) => {
return `rgba(${r}, ${g}, ${b}, ${a})`; return `rgba(${r}, ${g}, ${b}, ${a})`;
}; };
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -119,7 +120,7 @@ export default defineComponent({
stats: null, stats: null,
serverInfo: null, serverInfo: null,
connection: null, connection: null,
queueConnection: markRaw(os.stream.useChannel('queueStats')), queueConnection: markRaw(stream.useChannel('queueStats')),
memUsage: 0, memUsage: 0,
chartCpuMem: null, chartCpuMem: null,
chartNet: null, chartNet: null,
@ -150,7 +151,7 @@ export default defineComponent({
os.api('admin/server-info', {}).then(res => { os.api('admin/server-info', {}).then(res => {
this.serverInfo = res; this.serverInfo = res;
this.connection = markRaw(os.stream.useChannel('serverStats')); this.connection = markRaw(stream.useChannel('serverStats'));
this.connection.on('stats', this.onStats); this.connection.on('stats', this.onStats);
this.connection.on('statsLog', this.onStatsLog); this.connection.on('statsLog', this.onStatsLog);
this.connection.send('requestLog', { this.connection.send('requestLog', {

3
packages/client/src/pages/admin/overview.vue
View file

@ -81,6 +81,7 @@ import number from '@/filters/number';
import MkInstanceInfo from './instance.vue'; import MkInstanceInfo from './instance.vue';
import XMetrics from './metrics.vue'; import XMetrics from './metrics.vue';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
export default defineComponent({ export default defineComponent({
@ -113,7 +114,7 @@ export default defineComponent({
notesComparedToThePrevDay: null, notesComparedToThePrevDay: null,
fetchJobs: () => os.api('admin/queue/deliver-delayed', {}), fetchJobs: () => os.api('admin/queue/deliver-delayed', {}),
fetchModLogs: () => os.api('admin/show-moderation-logs', {}), fetchModLogs: () => os.api('admin/show-moderation-logs', {}),
queueStatsConnection: markRaw(os.stream.useChannel('queueStats')), queueStatsConnection: markRaw(stream.useChannel('queueStats')),
} }
}, },

3
packages/client/src/pages/admin/queue.vue
View file

@ -17,6 +17,7 @@ import XQueue from './queue.chart.vue';
import FormBase from '@/components/debobigego/base.vue'; import FormBase from '@/components/debobigego/base.vue';
import FormButton from '@/components/debobigego/button.vue'; import FormButton from '@/components/debobigego/button.vue';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
export default defineComponent({ export default defineComponent({
@ -36,7 +37,7 @@ export default defineComponent({
icon: 'fas fa-clipboard-list', icon: 'fas fa-clipboard-list',
bg: 'var(--bg)', bg: 'var(--bg)',
}, },
connection: markRaw(os.stream.useChannel('queueStats')), connection: markRaw(stream.useChannel('queueStats')),
} }
}, },

3
packages/client/src/pages/messaging/index.vue
View file

@ -44,6 +44,7 @@ import * as Acct from 'misskey-js/built/acct';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import { acct } from '@/filters/user'; import { acct } from '@/filters/user';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
export default defineComponent({ export default defineComponent({
@ -66,7 +67,7 @@ export default defineComponent({
}, },
mounted() { mounted() {
this.connection = markRaw(os.stream.useChannel('messagingIndex')); this.connection = markRaw(stream.useChannel('messagingIndex'));
this.connection.on('message', this.onMessage); this.connection.on('message', this.onMessage);
this.connection.on('read', this.onRead); this.connection.on('read', this.onRead);

3
packages/client/src/pages/messaging/messaging-room.form.vue
View file

@ -28,6 +28,7 @@ import * as autosize from 'autosize';
import { formatTimeString } from '@/scripts/format-time-string'; import { formatTimeString } from '@/scripts/format-time-string';
import { selectFile } from '@/scripts/select-file'; import { selectFile } from '@/scripts/select-file';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import { Autocomplete } from '@/scripts/autocomplete'; import { Autocomplete } from '@/scripts/autocomplete';
import { throttle } from 'throttle-debounce'; import { throttle } from 'throttle-debounce';
@ -48,7 +49,7 @@ export default defineComponent({
file: null, file: null,
sending: false, sending: false,
typing: throttle(3000, () => { typing: throttle(3000, () => {
os.stream.send('typingOnMessaging', this.user ? { partner: this.user.id } : { group: this.group.id }); stream.send('typingOnMessaging', this.user ? { partner: this.user.id } : { group: this.group.id });
}), }),
}; };
}, },

3
packages/client/src/pages/messaging/messaging-room.vue
View file

@ -43,6 +43,7 @@ import XForm from './messaging-room.form.vue';
import * as Acct from 'misskey-js/built/acct'; import * as Acct from 'misskey-js/built/acct';
import { isBottom, onScrollBottom, scroll } from '@/scripts/scroll'; import { isBottom, onScrollBottom, scroll } from '@/scripts/scroll';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import { popout } from '@/scripts/popout'; import { popout } from '@/scripts/popout';
import * as sound from '@/scripts/sound'; import * as sound from '@/scripts/sound';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
@ -141,7 +142,7 @@ const Component = defineComponent({
this.group = group; this.group = group;
} }
this.connection = markRaw(os.stream.useChannel('messaging', { this.connection = markRaw(stream.useChannel('messaging', {
otherparty: this.user ? this.user.id : undefined, otherparty: this.user ? this.user.id : undefined,
group: this.group ? this.group.id : undefined, group: this.group ? this.group.id : undefined,
})); }));

3
packages/client/src/pages/reversi/game.vue
View file

@ -9,6 +9,7 @@ import { defineComponent, markRaw } from 'vue';
import GameSetting from './game.setting.vue'; import GameSetting from './game.setting.vue';
import GameBoard from './game.board.vue'; import GameBoard from './game.board.vue';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
export default defineComponent({ export default defineComponent({
@ -61,7 +62,7 @@ export default defineComponent({
if (this.connection) { if (this.connection) {
this.connection.dispose(); this.connection.dispose();
} }
this.connection = markRaw(os.stream.useChannel('gamesReversiGame', { this.connection = markRaw(stream.useChannel('gamesReversiGame', {
gameId: this.game.id gameId: this.game.id
})); }));
this.connection.on('started', this.onStarted); this.connection.on('started', this.onStarted);

3
packages/client/src/pages/reversi/index.vue
View file

@ -62,6 +62,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, markRaw } from 'vue'; import { defineComponent, markRaw } from 'vue';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkFolder from '@/components/ui/folder.vue'; import MkFolder from '@/components/ui/folder.vue';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
@ -92,7 +93,7 @@ export default defineComponent({
mounted() { mounted() {
if (this.$i) { if (this.$i) {
this.connection = markRaw(os.stream.useChannel('gamesReversi')); this.connection = markRaw(stream.useChannel('gamesReversi'));
this.connection.on('invited', this.onInvited); this.connection.on('invited', this.onInvited);

16
packages/client/src/pizzax.ts
View file

@ -1,6 +1,7 @@
import { onUnmounted, Ref, ref, watch } from 'vue'; import { onUnmounted, Ref, ref, watch } from 'vue';
import { $i } from './account'; import { $i } from './account';
import { api } from './os'; import { api } from './os';
import { stream } from './stream';
type StateDef = Record<string, { type StateDef = Record<string, {
where: 'account' | 'device' | 'deviceAccount'; where: 'account' | 'device' | 'deviceAccount';
@ -19,6 +20,8 @@ export class Storage<T extends StateDef> {
public readonly state: { [K in keyof T]: T[K]['default'] }; public readonly state: { [K in keyof T]: T[K]['default'] };
public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> }; public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> };
private connection = stream.useChannel('main');
constructor(key: string, def: T) { constructor(key: string, def: T) {
this.key = key; this.key = key;
this.keyForLocalStorage = 'pizzax::' + key; this.keyForLocalStorage = 'pizzax::' + key;
@ -69,8 +72,19 @@ export class Storage<T extends StateDef> {
localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache)); localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
}); });
}, 1); }, 1);
// streamingのuser storage updateイベントを監視して更新
this.connection.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
if (scope[1] !== this.key || this.state[key] === value) return;
// TODO: streamingのuser storage updateイベントを監視して更新 this.state[key] = value;
this.reactiveState[key].value = value;
const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
if (cache[key] !== value) {
cache[key] = value;
localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
}
});
} }
} }

3
packages/client/src/scripts/select-file.ts
View file

@ -1,4 +1,5 @@
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { DriveFile } from 'misskey-js/built/entities'; import { DriveFile } from 'misskey-js/built/entities';
@ -48,7 +49,7 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
const marker = Math.random().toString(); // TODO: UUIDとか使う const marker = Math.random().toString(); // TODO: UUIDとか使う
const connection = os.stream.useChannel('main'); const connection = stream.useChannel('main');
connection.on('urlUploadFinished', data => { connection.on('urlUploadFinished', data => {
if (data.marker === marker) { if (data.marker === marker) {
res(multiple ? [data.file] : data.file); res(multiple ? [data.file] : data.file);

6
packages/client/src/stream.ts Normal file
View file

@ -0,0 +1,6 @@
import * as Misskey from 'misskey-js';
import { markRaw } from 'vue';
import { $i } from '@/account';
import { url } from '@/config';
export const stream = markRaw(new Misskey.Stream(url, $i));

3
packages/client/src/ui/_common_/common.vue
View file

@ -15,9 +15,10 @@
<script lang="ts"> <script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue'; import { defineAsyncComponent, defineComponent } from 'vue';
import { stream, popup, popups, uploads, pendingApiRequestsCount } from '@/os'; import { popup, popups, uploads, pendingApiRequestsCount } from '@/os';
import * as sound from '@/scripts/sound'; import * as sound from '@/scripts/sound';
import { $i } from '@/account'; import { $i } from '@/account';
import { stream } from '@/stream';
export default defineComponent({ export default defineComponent({
components: { components: {

7
packages/client/src/ui/_common_/stream-indicator.vue
View file

@ -11,6 +11,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
export default defineComponent({ export default defineComponent({
data() { data() {
@ -20,14 +21,14 @@ export default defineComponent({
}, },
computed: { computed: {
stream() { stream() {
return os.stream; return stream;
}, },
}, },
created() { created() {
os.stream.on('_disconnected_', this.onDisconnected); stream.on('_disconnected_', this.onDisconnected);
}, },
beforeUnmount() { beforeUnmount() {
os.stream.off('_disconnected_', this.onDisconnected); stream.off('_disconnected_', this.onDisconnected);
}, },
methods: { methods: {
onDisconnected() { onDisconnected() {

3
packages/client/src/ui/chat/note.vue
View file

@ -118,6 +118,7 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
import { checkWordMute } from '@/scripts/check-word-mute'; import { checkWordMute } from '@/scripts/check-word-mute';
import { userPage } from '@/filters/user'; import { userPage } from '@/filters/user';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import { noteActions, noteViewInterruptors } from '@/store'; import { noteActions, noteViewInterruptors } from '@/store';
import { reactionPicker } from '@/scripts/reaction-picker'; import { reactionPicker } from '@/scripts/reaction-picker';
import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm'; import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
@ -243,7 +244,7 @@ export default defineComponent({
async created() { async created() {
if (this.$i) { if (this.$i) {
this.connection = os.stream; this.connection = stream;
} }
this.collapsed = this.appearNote.cw == null && this.appearNote.text && ( this.collapsed = this.appearNote.cw == null && this.appearNote.text && (

3
packages/client/src/ui/chat/pages/channel.vue
View file

@ -26,6 +26,7 @@ import { computed, defineComponent, markRaw } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import XNotes from '../notes.vue'; import XNotes from '../notes.vue';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import * as sound from '@/scripts/sound'; import * as sound from '@/scripts/sound';
import { scrollToBottom, getScrollPosition, getScrollContainer } from '@/scripts/scroll'; import { scrollToBottom, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
import follow from '@/directives/follow-append'; import follow from '@/directives/follow-append';
@ -106,7 +107,7 @@ export default defineComponent({
sound.play(note.userId === this.$i.id ? 'noteMy' : 'note'); sound.play(note.userId === this.$i.id ? 'noteMy' : 'note');
}; };
this.connection = markRaw(os.stream.useChannel('channel', { this.connection = markRaw(stream.useChannel('channel', {
channelId: this.channelId channelId: this.channelId
})); }));
this.connection.on('note', prepend); this.connection.on('note', prepend);

11
packages/client/src/ui/chat/pages/timeline.vue
View file

@ -17,6 +17,7 @@
import { computed, defineComponent, markRaw } from 'vue'; import { computed, defineComponent, markRaw } from 'vue';
import XNotes from '../notes.vue'; import XNotes from '../notes.vue';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import * as sound from '@/scripts/sound'; import * as sound from '@/scripts/sound';
import { scrollToBottom, getScrollPosition, getScrollContainer } from '@/scripts/scroll'; import { scrollToBottom, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
import follow from '@/directives/follow-append'; import follow from '@/directives/follow-append';
@ -90,23 +91,23 @@ export default defineComponent({
if (this.src == 'home') { if (this.src == 'home') {
endpoint = 'notes/timeline'; endpoint = 'notes/timeline';
this.connection = markRaw(os.stream.useChannel('homeTimeline')); this.connection = markRaw(stream.useChannel('homeTimeline'));
this.connection.on('note', prepend); this.connection.on('note', prepend);
this.connection2 = markRaw(os.stream.useChannel('main')); this.connection2 = markRaw(stream.useChannel('main'));
this.connection2.on('follow', onChangeFollowing); this.connection2.on('follow', onChangeFollowing);
this.connection2.on('unfollow', onChangeFollowing); this.connection2.on('unfollow', onChangeFollowing);
} else if (this.src == 'local') { } else if (this.src == 'local') {
endpoint = 'notes/local-timeline'; endpoint = 'notes/local-timeline';
this.connection = markRaw(os.stream.useChannel('localTimeline')); this.connection = markRaw(stream.useChannel('localTimeline'));
this.connection.on('note', prepend); this.connection.on('note', prepend);
} else if (this.src == 'social') { } else if (this.src == 'social') {
endpoint = 'notes/hybrid-timeline'; endpoint = 'notes/hybrid-timeline';
this.connection = markRaw(os.stream.useChannel('hybridTimeline')); this.connection = markRaw(stream.useChannel('hybridTimeline'));
this.connection.on('note', prepend); this.connection.on('note', prepend);
} else if (this.src == 'global') { } else if (this.src == 'global') {
endpoint = 'notes/global-timeline'; endpoint = 'notes/global-timeline';
this.connection = markRaw(os.stream.useChannel('globalTimeline')); this.connection = markRaw(stream.useChannel('globalTimeline'));
this.connection.on('note', prepend); this.connection.on('note', prepend);
} }

3
packages/client/src/ui/chat/post-form.vue
View file

@ -59,6 +59,7 @@ import * as Acct from 'misskey-js/built/acct';
import { formatTimeString } from '@/scripts/format-time-string'; import { formatTimeString } from '@/scripts/format-time-string';
import { Autocomplete } from '@/scripts/autocomplete'; import { Autocomplete } from '@/scripts/autocomplete';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import { selectFiles } from '@/scripts/select-file'; import { selectFiles } from '@/scripts/select-file';
import { notePostInterruptors, postFormActions } from '@/store'; import { notePostInterruptors, postFormActions } from '@/store';
import { throttle } from 'throttle-debounce'; import { throttle } from 'throttle-debounce';
@ -130,7 +131,7 @@ export default defineComponent({
imeText: '', imeText: '',
typing: throttle(3000, () => { typing: throttle(3000, () => {
if (this.channel) { if (this.channel) {
os.stream.send('typingOnChannel', { channel: this.channel }); stream.send('typingOnChannel', { channel: this.channel });
} }
}), }),
postFormActions, postFormActions,

3
packages/client/src/widgets/job-queue.vue
View file

@ -49,6 +49,7 @@
import { defineComponent, markRaw } from 'vue'; import { defineComponent, markRaw } from 'vue';
import define from './define'; import define from './define';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
import number from '@/filters/number'; import number from '@/filters/number';
import * as sound from '@/scripts/sound'; import * as sound from '@/scripts/sound';
@ -70,7 +71,7 @@ export default defineComponent({
extends: widget, extends: widget,
data() { data() {
return { return {
connection: markRaw(os.stream.useChannel('queueStats')), connection: markRaw(stream.useChannel('queueStats')),
inbox: { inbox: {
activeSincePrevTick: 0, activeSincePrevTick: 0,
active: 0, active: 0,

3
packages/client/src/widgets/photos.vue
View file

@ -20,6 +20,7 @@ import MkContainer from '@/components/ui/container.vue';
import define from './define'; import define from './define';
import { getStaticImageUrl } from '@/scripts/get-static-image-url'; import { getStaticImageUrl } from '@/scripts/get-static-image-url';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
const widget = define({ const widget = define({
name: 'photos', name: 'photos',
@ -48,7 +49,7 @@ export default defineComponent({
}; };
}, },
mounted() { mounted() {
this.connection = markRaw(os.stream.useChannel('main')); this.connection = markRaw(stream.useChannel('main'));
this.connection.on('driveFileCreated', this.onDriveFileCreated); this.connection.on('driveFileCreated', this.onDriveFileCreated);

3
packages/client/src/widgets/server-metric/index.vue
View file

@ -23,6 +23,7 @@ import XCpu from './cpu.vue';
import XMemory from './mem.vue'; import XMemory from './mem.vue';
import XDisk from './disk.vue'; import XDisk from './disk.vue';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream';
const widget = define({ const widget = define({
name: 'serverMetric', name: 'serverMetric',
@ -63,7 +64,7 @@ export default defineComponent({
os.api('server-info', {}).then(res => { os.api('server-info', {}).then(res => {
this.meta = res; this.meta = res;
}); });
this.connection = markRaw(os.stream.useChannel('serverStats')); this.connection = markRaw(stream.useChannel('serverStats'));
}, },
unmounted() { unmounted() {
this.connection.dispose(); this.connection.dispose();