natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ストリーミングが不安定な問題を修正

This commit is contained in:
syuilo 2021-07-26 11:12:06 +09:00
parent f3b3e06329
commit 2953ba17c3
17 changed files with 61 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CONTRIBUTING.md
View File

@ -242,6 +242,9 @@ npx ts-node ./node_modules/typeorm/cli.js migration:generate -n 変更の名前
作成されたスクリプトは不必要な変更を含むため除去してください。 作成されたスクリプトは不必要な変更を含むため除去してください。
### コネクションには`markRaw`せよ
**Vueのコンポーネントのdataオプションとして**misskey.jsのコネクションを設定するとき、必ず`markRaw`でラップしてください。インスタンスが不必要にリアクティブ化されることで、misskey.js内の処理で不具合が発生するとともに、パフォーマンス上の問題にも繋がる。なお、Composition APIを使う場合はこの限りではない(リアクティブ化はマニュアルなため)。
## その他 ## その他
### HTMLのクラス名で follow という単語は使わない ### HTMLのクラス名で follow という単語は使わない
広告ブロッカーで誤ってブロックされる 広告ブロッカーで誤ってブロックされる

4
src/client/components/drive.vue
View File

@ -46,7 +46,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, markRaw } from 'vue';
import XNavFolder from './drive.nav-folder.vue'; import XNavFolder from './drive.nav-folder.vue';
import XFolder from './drive.folder.vue'; import XFolder from './drive.folder.vue';
import XFile from './drive.file.vue'; import XFile from './drive.file.vue';
@ -139,7 +139,7 @@ export default defineComponent({
}); });
} }
this.connection = os.stream.useChannel('drive'); this.connection = markRaw(os.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);

4
src/client/components/follow-button.vue
View File

@ -28,7 +28,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, markRaw } from 'vue';
import * as os from '@client/os'; import * as os from '@client/os';
export default defineComponent({ export default defineComponent({
@ -71,7 +71,7 @@ export default defineComponent({
}, },
mounted() { mounted() {
this.connection = os.stream.useChannel('main'); this.connection = markRaw(os.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);

4
src/client/components/notification.vue
View File

@ -58,7 +58,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, markRaw } from 'vue';
import { getNoteSummary } from '@/misc/get-note-summary'; import { getNoteSummary } from '@/misc/get-note-summary';
import XReactionIcon from './reaction-icon.vue'; import XReactionIcon from './reaction-icon.vue';
import MkFollowButton from './follow-button.vue'; import MkFollowButton from './follow-button.vue';
@ -109,7 +109,7 @@ export default defineComponent({
this.readObserver.observe(this.$el); this.readObserver.observe(this.$el);
this.connection = os.stream.useChannel('main'); this.connection = markRaw(os.stream.useChannel('main'));
this.connection.on('readAllNotifications', () => this.readObserver.unobserve(this.$el)); this.connection.on('readAllNotifications', () => this.readObserver.unobserve(this.$el));
} }
}, },

4
src/client/components/notifications.vue
View File

@ -21,7 +21,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from 'vue'; import { defineComponent, PropType, markRaw } from 'vue';
import paging from '@client/scripts/paging'; import paging from '@client/scripts/paging';
import XNotification from './notification.vue'; import XNotification from './notification.vue';
import XList from './date-separated-list.vue'; import XList from './date-separated-list.vue';
@ -89,7 +89,7 @@ export default defineComponent({
}, },
mounted() { mounted() {
this.connection = os.stream.useChannel('main'); this.connection = markRaw(os.stream.useChannel('main'));
this.connection.on('notification', this.onNotification); this.connection.on('notification', this.onNotification);
}, },

28
src/client/components/timeline.vue
View File

@ -3,7 +3,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, markRaw } from 'vue';
import XNotes from './notes.vue'; import XNotes from './notes.vue';
import * as os from '@client/os'; import * as os from '@client/os';
import * as sound from '@client/scripts/sound'; import * as sound from '@client/scripts/sound';
@ -92,33 +92,33 @@ export default defineComponent({
this.query = { this.query = {
antennaId: this.antenna antennaId: this.antenna
}; };
this.connection = os.stream.useChannel('antenna', { this.connection = markRaw(os.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 = os.stream.useChannel('homeTimeline'); this.connection = markRaw(os.stream.useChannel('homeTimeline'));
this.connection.on('note', prepend); this.connection.on('note', prepend);
this.connection2 = os.stream.useChannel('main'); this.connection2 = markRaw(os.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 = os.stream.useChannel('localTimeline'); this.connection = markRaw(os.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 = os.stream.useChannel('hybridTimeline'); this.connection = markRaw(os.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 = os.stream.useChannel('globalTimeline'); this.connection = markRaw(os.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 = os.stream.useChannel('main'); this.connection = markRaw(os.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,16 +130,16 @@ export default defineComponent({
prepend(note); prepend(note);
} }
}; };
this.connection = os.stream.useChannel('main'); this.connection = markRaw(os.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 = os.stream.useChannel('userList', { this.connection = markRaw(os.stream.useChannel('userList', {
listId: this.list listId: this.list
}); }));
this.connection.on('note', prepend); this.connection.on('note', prepend);
this.connection.on('userAdded', onUserAdded); this.connection.on('userAdded', onUserAdded);
this.connection.on('userRemoved', onUserRemoved); this.connection.on('userRemoved', onUserRemoved);
@ -148,9 +148,9 @@ export default defineComponent({
this.query = { this.query = {
channelId: this.channel channelId: this.channel
}; };
this.connection = os.stream.useChannel('channel', { this.connection = markRaw(os.stream.useChannel('channel', {
channelId: this.channel channelId: this.channel
}); }));
this.connection.on('note', prepend); this.connection.on('note', prepend);
} }

4
src/client/init.ts
View File

@ -6,7 +6,7 @@ import '@client/style.scss';
import * as Sentry from '@sentry/browser'; import * as Sentry from '@sentry/browser';
import { Integrations } from '@sentry/tracing'; import { Integrations } from '@sentry/tracing';
import { computed, createApp, watch } from 'vue'; import { computed, createApp, watch, markRaw } from 'vue';
import widgets from '@client/widgets'; import widgets from '@client/widgets';
import directives from '@client/directives'; import directives from '@client/directives';
@ -282,7 +282,7 @@ if ($i) {
} }
} }
const main = stream.useChannel('main', null, 'System'); const main = markRaw(stream.useChannel('main', null, 'System'));
// 自分の情報が更新されたとき // 自分の情報が更新されたとき
main.on('meUpdated', i => { main.on('meUpdated', i => {

4
src/client/pages/instance/metrics.vue
View File

@ -90,7 +90,7 @@ export default defineComponent({
stats: null, stats: null,
serverInfo: null, serverInfo: null,
connection: null, connection: null,
queueConnection: os.stream.useChannel('queueStats'), queueConnection: markRaw(os.stream.useChannel('queueStats')),
memUsage: 0, memUsage: 0,
chartCpuMem: null, chartCpuMem: null,
chartNet: null, chartNet: null,
@ -121,7 +121,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 = os.stream.useChannel('serverStats'); this.connection = markRaw(os.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', {

4
src/client/pages/instance/queue.vue
View File

@ -11,7 +11,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, markRaw } from 'vue';
import MkButton from '@client/components/ui/button.vue'; import MkButton from '@client/components/ui/button.vue';
import XQueue from './queue.chart.vue'; import XQueue from './queue.chart.vue';
import FormBase from '@client/components/form/base.vue'; import FormBase from '@client/components/form/base.vue';
@ -35,7 +35,7 @@ export default defineComponent({
title: this.$ts.jobQueue, title: this.$ts.jobQueue,
icon: 'fas fa-clipboard-list', icon: 'fas fa-clipboard-list',
}, },
connection: os.stream.useChannel('queueStats'), connection: markRaw(os.stream.useChannel('queueStats')),
} }
}, },

4
src/client/pages/messaging/index.vue
View File

@ -37,7 +37,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue'; import { defineAsyncComponent, defineComponent, markRaw } from 'vue';
import { getAcct } from '@/misc/acct'; import { getAcct } from '@/misc/acct';
import MkButton from '@client/components/ui/button.vue'; import MkButton from '@client/components/ui/button.vue';
import { acct } from '../../filters/user'; import { acct } from '../../filters/user';
@ -63,7 +63,7 @@ export default defineComponent({
}, },
mounted() { mounted() {
this.connection = os.stream.useChannel('messagingIndex'); this.connection = markRaw(os.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);

6
src/client/pages/messaging/messaging-room.vue
View File

@ -36,7 +36,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent } from 'vue'; import { computed, defineComponent, markRaw } from 'vue';
import XList from '@client/components/date-separated-list.vue'; import XList from '@client/components/date-separated-list.vue';
import XMessage from './messaging-room.message.vue'; import XMessage from './messaging-room.message.vue';
import XForm from './messaging-room.form.vue'; import XForm from './messaging-room.form.vue';
@ -141,10 +141,10 @@ const Component = defineComponent({
this.group = group; this.group = group;
} }
this.connection = os.stream.useChannel('messaging', { this.connection = markRaw(os.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,
}); }));
this.connection.on('message', this.onMessage); this.connection.on('message', this.onMessage);
this.connection.on('read', this.onRead); this.connection.on('read', this.onRead);

6
src/client/pages/reversi/game.vue
View File

@ -5,7 +5,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; 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 '@client/os'; import * as os from '@client/os';
@ -61,9 +61,9 @@ export default defineComponent({
if (this.connection) { if (this.connection) {
this.connection.dispose(); this.connection.dispose();
} }
this.connection = os.stream.useChannel('gamesReversiGame', { this.connection = markRaw(os.stream.useChannel('gamesReversiGame', {
gameId: this.game.id gameId: this.game.id
}); }));
this.connection.on('started', this.onStarted); this.connection.on('started', this.onStarted);
}); });
}, },

4
src/client/pages/reversi/index.vue
View File

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

28
src/client/ui/chat/timeline.vue
View File

@ -23,7 +23,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, markRaw } from 'vue';
import XNotes from './notes.vue'; import XNotes from './notes.vue';
import * as os from '@client/os'; import * as os from '@client/os';
import * as sound from '@client/scripts/sound'; import * as sound from '@client/scripts/sound';
@ -121,33 +121,33 @@ export default defineComponent({
this.query = { this.query = {
antennaId: this.antenna antennaId: this.antenna
}; };
this.connection = os.stream.useChannel('antenna', { this.connection = markRaw(os.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 = os.stream.useChannel('homeTimeline'); this.connection = markRaw(os.stream.useChannel('homeTimeline'));
this.connection.on('note', prepend); this.connection.on('note', prepend);
this.connection2 = os.stream.useChannel('main'); this.connection2 = markRaw(os.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 = os.stream.useChannel('localTimeline'); this.connection = markRaw(os.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 = os.stream.useChannel('hybridTimeline'); this.connection = markRaw(os.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 = os.stream.useChannel('globalTimeline'); this.connection = markRaw(os.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 = os.stream.useChannel('main'); this.connection = markRaw(os.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';
@ -159,16 +159,16 @@ export default defineComponent({
prepend(note); prepend(note);
} }
}; };
this.connection = os.stream.useChannel('main'); this.connection = markRaw(os.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 = os.stream.useChannel('userList', { this.connection = markRaw(os.stream.useChannel('userList', {
listId: this.list listId: this.list
}); }));
this.connection.on('note', prepend); this.connection.on('note', prepend);
this.connection.on('userAdded', onUserAdded); this.connection.on('userAdded', onUserAdded);
this.connection.on('userRemoved', onUserRemoved); this.connection.on('userRemoved', onUserRemoved);
@ -178,9 +178,9 @@ export default defineComponent({
this.query = { this.query = {
channelId: this.channel channelId: this.channel
}; };
this.connection = os.stream.useChannel('channel', { this.connection = markRaw(os.stream.useChannel('channel', {
channelId: this.channel channelId: this.channel
}); }));
this.connection.on('note', prepend); this.connection.on('note', prepend);
this.connection.on('typers', typers => { this.connection.on('typers', typers => {
this.typers = this.$i ? typers.filter(u => u.id !== this.$i.id) : typers; this.typers = this.$i ? typers.filter(u => u.id !== this.$i.id) : typers;

4
src/client/widgets/job-queue.vue
View File

@ -46,7 +46,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, markRaw } from 'vue';
import define from './define'; import define from './define';
import * as os from '@client/os'; import * as os from '@client/os';
import number from '@client/filters/number'; import number from '@client/filters/number';
@ -65,7 +65,7 @@ export default defineComponent({
extends: widget, extends: widget,
data() { data() {
return { return {
connection: os.stream.useChannel('queueStats'), connection: markRaw(os.stream.useChannel('queueStats')),
inbox: { inbox: {
activeSincePrevTick: 0, activeSincePrevTick: 0,
active: 0, active: 0,

4
src/client/widgets/photos.vue
View File

@ -15,7 +15,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, markRaw } from 'vue';
import MkContainer from '@client/components/ui/container.vue'; import MkContainer from '@client/components/ui/container.vue';
import define from './define'; import define from './define';
import { getStaticImageUrl } from '@client/scripts/get-static-image-url'; import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
@ -48,7 +48,7 @@ export default defineComponent({
}; };
}, },
mounted() { mounted() {
this.connection = os.stream.useChannel('main'); this.connection = markRaw(os.stream.useChannel('main'));
this.connection.on('driveFileCreated', this.onDriveFileCreated); this.connection.on('driveFileCreated', this.onDriveFileCreated);

4
src/client/widgets/server-metric/index.vue
View File

@ -14,7 +14,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, markRaw } from 'vue';
import define from '../define'; import define from '../define';
import MkContainer from '@client/components/ui/container.vue'; import MkContainer from '@client/components/ui/container.vue';
import XCpuMemory from './cpu-mem.vue'; import XCpuMemory from './cpu-mem.vue';
@ -63,7 +63,7 @@ export default defineComponent({
os.api('server-info', {}).then(res => { os.api('server-info', {}).then(res => {
this.meta = res; this.meta = res;
}); });
this.connection = os.stream.useChannel('serverStats'); this.connection = markRaw(os.stream.useChannel('serverStats'));
}, },
unmounted() { unmounted() {
this.connection.dispose(); this.connection.dispose();