Skip to content
This repository was archived by the owner on Feb 5, 2024. It is now read-only.

Commit 2953ba1

Browse files
syuilosyuilo
committed
ストリーミングが不安定な問題を修正
1 parent f3b3e06 commit 2953ba1

File tree

17 files changed

+61
-58
lines changed

17 files changed

+61
-58
lines changed

‎CONTRIBUTING.md

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

‎src/client/components/drive.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
</template>
4747

4848
<script lang="ts">
49-
import { defineComponent } from 'vue';
49+
import { defineComponent, markRaw } from 'vue';
5050
import XNavFolder from './drive.nav-folder.vue';
5151
import XFolder from './drive.folder.vue';
5252
import XFile from './drive.file.vue';
@@ -139,7 +139,7 @@ export default defineComponent({
139139
});
140140
}
141141
142-
this.connection = os.stream.useChannel('drive');
142+
this.connection = markRaw(os.stream.useChannel('drive'));
143143
144144
this.connection.on('fileCreated', this.onStreamDriveFileCreated);
145145
this.connection.on('fileUpdated', this.onStreamDriveFileUpdated);

‎src/client/components/follow-button.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</template>
2929

3030
<script lang="ts">
31-
import { defineComponent } from 'vue';
31+
import { defineComponent, markRaw } from 'vue';
3232
import * as os from '@client/os';
3333
3434
export default defineComponent({
@@ -71,7 +71,7 @@ export default defineComponent({
7171
},
7272
7373
mounted() {
74-
this.connection = os.stream.useChannel('main');
74+
this.connection = markRaw(os.stream.useChannel('main'));
7575
7676
this.connection.on('follow', this.onFollowChange);
7777
this.connection.on('unfollow', this.onFollowChange);

‎src/client/components/notification.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
</template>
5959

6060
<script lang="ts">
61-
import { defineComponent } from 'vue';
61+
import { defineComponent, markRaw } from 'vue';
6262
import { getNoteSummary } from '@/misc/get-note-summary';
6363
import XReactionIcon from './reaction-icon.vue';
6464
import MkFollowButton from './follow-button.vue';
@@ -109,7 +109,7 @@ export default defineComponent({
109109
110110
this.readObserver.observe(this.$el);
111111
112-
this.connection = os.stream.useChannel('main');
112+
this.connection = markRaw(os.stream.useChannel('main'));
113113
this.connection.on('readAllNotifications', () => this.readObserver.unobserve(this.$el));
114114
}
115115
},

‎src/client/components/notifications.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</template>
2222

2323
<script lang="ts">
24-
import { defineComponent, PropType } from 'vue';
24+
import { defineComponent, PropType, markRaw } from 'vue';
2525
import paging from '@client/scripts/paging';
2626
import XNotification from './notification.vue';
2727
import XList from './date-separated-list.vue';
@@ -89,7 +89,7 @@ export default defineComponent({
8989
},
9090
9191
mounted() {
92-
this.connection = os.stream.useChannel('main');
92+
this.connection = markRaw(os.stream.useChannel('main'));
9393
this.connection.on('notification', this.onNotification);
9494
},
9595

‎src/client/components/timeline.vue

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</template>
44

55
<script lang="ts">
6-
import { defineComponent } from 'vue';
6+
import { defineComponent, markRaw } from 'vue';
77
import XNotes from './notes.vue';
88
import * as os from '@client/os';
99
import * as sound from '@client/scripts/sound';
@@ -92,33 +92,33 @@ export default defineComponent({
9292
this.query = {
9393
antennaId: this.antenna
9494
};
95-
this.connection = os.stream.useChannel('antenna', {
95+
this.connection = markRaw(os.stream.useChannel('antenna', {
9696
antennaId: this.antenna
97-
});
97+
}));
9898
this.connection.on('note', prepend);
9999
} else if (this.src == 'home') {
100100
endpoint = 'notes/timeline';
101-
this.connection = os.stream.useChannel('homeTimeline');
101+
this.connection = markRaw(os.stream.useChannel('homeTimeline'));
102102
this.connection.on('note', prepend);
103103
104-
this.connection2 = os.stream.useChannel('main');
104+
this.connection2 = markRaw(os.stream.useChannel('main'));
105105
this.connection2.on('follow', onChangeFollowing);
106106
this.connection2.on('unfollow', onChangeFollowing);
107107
} else if (this.src == 'local') {
108108
endpoint = 'notes/local-timeline';
109-
this.connection = os.stream.useChannel('localTimeline');
109+
this.connection = markRaw(os.stream.useChannel('localTimeline'));
110110
this.connection.on('note', prepend);
111111
} else if (this.src == 'social') {
112112
endpoint = 'notes/hybrid-timeline';
113-
this.connection = os.stream.useChannel('hybridTimeline');
113+
this.connection = markRaw(os.stream.useChannel('hybridTimeline'));
114114
this.connection.on('note', prepend);
115115
} else if (this.src == 'global') {
116116
endpoint = 'notes/global-timeline';
117-
this.connection = os.stream.useChannel('globalTimeline');
117+
this.connection = markRaw(os.stream.useChannel('globalTimeline'));
118118
this.connection.on('note', prepend);
119119
} else if (this.src == 'mentions') {
120120
endpoint = 'notes/mentions';
121-
this.connection = os.stream.useChannel('main');
121+
this.connection = markRaw(os.stream.useChannel('main'));
122122
this.connection.on('mention', prepend);
123123
} else if (this.src == 'directs') {
124124
endpoint = 'notes/mentions';
@@ -130,16 +130,16 @@ export default defineComponent({
130130
prepend(note);
131131
}
132132
};
133-
this.connection = os.stream.useChannel('main');
133+
this.connection = markRaw(os.stream.useChannel('main'));
134134
this.connection.on('mention', onNote);
135135
} else if (this.src == 'list') {
136136
endpoint = 'notes/user-list-timeline';
137137
this.query = {
138138
listId: this.list
139139
};
140-
this.connection = os.stream.useChannel('userList', {
140+
this.connection = markRaw(os.stream.useChannel('userList', {
141141
listId: this.list
142-
});
142+
}));
143143
this.connection.on('note', prepend);
144144
this.connection.on('userAdded', onUserAdded);
145145
this.connection.on('userRemoved', onUserRemoved);
@@ -148,9 +148,9 @@ export default defineComponent({
148148
this.query = {
149149
channelId: this.channel
150150
};
151-
this.connection = os.stream.useChannel('channel', {
151+
this.connection = markRaw(os.stream.useChannel('channel', {
152152
channelId: this.channel
153-
});
153+
}));
154154
this.connection.on('note', prepend);
155155
}
156156

‎src/client/init.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import '@client/style.scss';
66

77
import * as Sentry from '@sentry/browser';
88
import { Integrations } from '@sentry/tracing';
9-
import { computed, createApp, watch } from 'vue';
9+
import { computed, createApp, watch, markRaw } from 'vue';
1010

1111
import widgets from '@client/widgets';
1212
import directives from '@client/directives';
@@ -282,7 +282,7 @@ if ($i) {
282282
}
283283
}
284284

285-
const main = stream.useChannel('main', null, 'System');
285+
const main = markRaw(stream.useChannel('main', null, 'System'));
286286

287287
// 自分の情報が更新されたとき
288288
main.on('meUpdated', i => {

‎src/client/pages/instance/metrics.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export default defineComponent({
9090
stats: null,
9191
serverInfo: null,
9292
connection: null,
93-
queueConnection: os.stream.useChannel('queueStats'),
93+
queueConnection: markRaw(os.stream.useChannel('queueStats')),
9494
memUsage: 0,
9595
chartCpuMem: null,
9696
chartNet: null,
@@ -121,7 +121,7 @@ export default defineComponent({
121121
os.api('admin/server-info', {}).then(res => {
122122
this.serverInfo = res;
123123
124-
this.connection = os.stream.useChannel('serverStats');
124+
this.connection = markRaw(os.stream.useChannel('serverStats'));
125125
this.connection.on('stats', this.onStats);
126126
this.connection.on('statsLog', this.onStatsLog);
127127
this.connection.send('requestLog', {

‎src/client/pages/instance/queue.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</template>
1212

1313
<script lang="ts">
14-
import { defineComponent } from 'vue';
14+
import { defineComponent, markRaw } from 'vue';
1515
import MkButton from '@client/components/ui/button.vue';
1616
import XQueue from './queue.chart.vue';
1717
import FormBase from '@client/components/form/base.vue';
@@ -35,7 +35,7 @@ export default defineComponent({
3535
title: this.$ts.jobQueue,
3636
icon: 'fas fa-clipboard-list',
3737
},
38-
connection: os.stream.useChannel('queueStats'),
38+
connection: markRaw(os.stream.useChannel('queueStats')),
3939
}
4040
},
4141

‎src/client/pages/messaging/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
</template>
3838

3939
<script lang="ts">
40-
import { defineAsyncComponent, defineComponent } from 'vue';
40+
import { defineAsyncComponent, defineComponent, markRaw } from 'vue';
4141
import { getAcct } from '@/misc/acct';
4242
import MkButton from '@client/components/ui/button.vue';
4343
import { acct } from '../../filters/user';
@@ -63,7 +63,7 @@ export default defineComponent({
6363
},
6464
6565
mounted() {
66-
this.connection = os.stream.useChannel('messagingIndex');
66+
this.connection = markRaw(os.stream.useChannel('messagingIndex'));
6767
6868
this.connection.on('message', this.onMessage);
6969
this.connection.on('read', this.onRead);

‎src/client/pages/messaging/messaging-room.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
</template>
3737

3838
<script lang="ts">
39-
import { computed, defineComponent } from 'vue';
39+
import { computed, defineComponent, markRaw } from 'vue';
4040
import XList from '@client/components/date-separated-list.vue';
4141
import XMessage from './messaging-room.message.vue';
4242
import XForm from './messaging-room.form.vue';
@@ -141,10 +141,10 @@ const Component = defineComponent({
141141
this.group = group;
142142
}
143143
144-
this.connection = os.stream.useChannel('messaging', {
144+
this.connection = markRaw(os.stream.useChannel('messaging', {
145145
otherparty: this.user ? this.user.id : undefined,
146146
group: this.group ? this.group.id : undefined,
147-
});
147+
}));
148148
149149
this.connection.on('message', this.onMessage);
150150
this.connection.on('read', this.onRead);

‎src/client/pages/reversi/game.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</template>
66

77
<script lang="ts">
8-
import { defineComponent } from 'vue';
8+
import { defineComponent, markRaw } from 'vue';
99
import GameSetting from './game.setting.vue';
1010
import GameBoard from './game.board.vue';
1111
import * as os from '@client/os';
@@ -61,9 +61,9 @@ export default defineComponent({
6161
if (this.connection) {
6262
this.connection.dispose();
6363
}
64-
this.connection = os.stream.useChannel('gamesReversiGame', {
64+
this.connection = markRaw(os.stream.useChannel('gamesReversiGame', {
6565
gameId: this.game.id
66-
});
66+
}));
6767
this.connection.on('started', this.onStarted);
6868
});
6969
},

‎src/client/pages/reversi/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
</template>
6161

6262
<script lang="ts">
63-
import { defineComponent } from 'vue';
63+
import { defineComponent, markRaw } from 'vue';
6464
import * as os from '@client/os';
6565
import MkButton from '@client/components/ui/button.vue';
6666
import MkFolder from '@client/components/ui/folder.vue';
@@ -92,7 +92,7 @@ export default defineComponent({
9292
9393
mounted() {
9494
if (this.$i) {
95-
this.connection = os.stream.useChannel('gamesReversi');
95+
this.connection = markRaw(os.stream.useChannel('gamesReversi'));
9696
9797
this.connection.on('invited', this.onInvited);
9898

‎src/client/ui/chat/timeline.vue

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
</template>
2424

2525
<script lang="ts">
26-
import { defineComponent } from 'vue';
26+
import { defineComponent, markRaw } from 'vue';
2727
import XNotes from './notes.vue';
2828
import * as os from '@client/os';
2929
import * as sound from '@client/scripts/sound';
@@ -121,33 +121,33 @@ export default defineComponent({
121121
this.query = {
122122
antennaId: this.antenna
123123
};
124-
this.connection = os.stream.useChannel('antenna', {
124+
this.connection = markRaw(os.stream.useChannel('antenna', {
125125
antennaId: this.antenna
126-
});
126+
}));
127127
this.connection.on('note', prepend);
128128
} else if (this.src == 'home') {
129129
endpoint = 'notes/timeline';
130-
this.connection = os.stream.useChannel('homeTimeline');
130+
this.connection = markRaw(os.stream.useChannel('homeTimeline'));
131131
this.connection.on('note', prepend);
132132
133-
this.connection2 = os.stream.useChannel('main');
133+
this.connection2 = markRaw(os.stream.useChannel('main'));
134134
this.connection2.on('follow', onChangeFollowing);
135135
this.connection2.on('unfollow', onChangeFollowing);
136136
} else if (this.src == 'local') {
137137
endpoint = 'notes/local-timeline';
138-
this.connection = os.stream.useChannel('localTimeline');
138+
this.connection = markRaw(os.stream.useChannel('localTimeline'));
139139
this.connection.on('note', prepend);
140140
} else if (this.src == 'social') {
141141
endpoint = 'notes/hybrid-timeline';
142-
this.connection = os.stream.useChannel('hybridTimeline');
142+
this.connection = markRaw(os.stream.useChannel('hybridTimeline'));
143143
this.connection.on('note', prepend);
144144
} else if (this.src == 'global') {
145145
endpoint = 'notes/global-timeline';
146-
this.connection = os.stream.useChannel('globalTimeline');
146+
this.connection = markRaw(os.stream.useChannel('globalTimeline'));
147147
this.connection.on('note', prepend);
148148
} else if (this.src == 'mentions') {
149149
endpoint = 'notes/mentions';
150-
this.connection = os.stream.useChannel('main');
150+
this.connection = markRaw(os.stream.useChannel('main'));
151151
this.connection.on('mention', prepend);
152152
} else if (this.src == 'directs') {
153153
endpoint = 'notes/mentions';
@@ -159,16 +159,16 @@ export default defineComponent({
159159
prepend(note);
160160
}
161161
};
162-
this.connection = os.stream.useChannel('main');
162+
this.connection = markRaw(os.stream.useChannel('main'));
163163
this.connection.on('mention', onNote);
164164
} else if (this.src == 'list') {
165165
endpoint = 'notes/user-list-timeline';
166166
this.query = {
167167
listId: this.list
168168
};
169-
this.connection = os.stream.useChannel('userList', {
169+
this.connection = markRaw(os.stream.useChannel('userList', {
170170
listId: this.list
171-
});
171+
}));
172172
this.connection.on('note', prepend);
173173
this.connection.on('userAdded', onUserAdded);
174174
this.connection.on('userRemoved', onUserRemoved);
@@ -178,9 +178,9 @@ export default defineComponent({
178178
this.query = {
179179
channelId: this.channel
180180
};
181-
this.connection = os.stream.useChannel('channel', {
181+
this.connection = markRaw(os.stream.useChannel('channel', {
182182
channelId: this.channel
183-
});
183+
}));
184184
this.connection.on('note', prepend);
185185
this.connection.on('typers', typers => {
186186
this.typers = this.$i ? typers.filter(u => u.id !== this.$i.id) : typers;

‎src/client/widgets/job-queue.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
</template>
4747

4848
<script lang="ts">
49-
import { defineComponent } from 'vue';
49+
import { defineComponent, markRaw } from 'vue';
5050
import define from './define';
5151
import * as os from '@client/os';
5252
import number from '@client/filters/number';
@@ -65,7 +65,7 @@ export default defineComponent({
6565
extends: widget,
6666
data() {
6767
return {
68-
connection: os.stream.useChannel('queueStats'),
68+
connection: markRaw(os.stream.useChannel('queueStats')),
6969
inbox: {
7070
activeSincePrevTick: 0,
7171
active: 0,

0 commit comments

Comments
 (0)