From 25d37302a8bfda954c7ede1e9d355db587c82228 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 20 Feb 2021 20:20:05 +0900 Subject: チャンネルで入力中ユーザーを表示するように、Chat UIでタイムラインでは投稿フォームを上に表示するように MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/server/api/stream/channels/channel.ts | 39 +++++++++++++++++++++- .../api/stream/channels/games/reversi-game.ts | 2 +- 2 files changed, 39 insertions(+), 2 deletions(-) (limited to 'src/server/api/stream/channels') diff --git a/src/server/api/stream/channels/channel.ts b/src/server/api/stream/channels/channel.ts index c24b3db937..aa570d1ef4 100644 --- a/src/server/api/stream/channels/channel.ts +++ b/src/server/api/stream/channels/channel.ts @@ -1,14 +1,17 @@ import autobind from 'autobind-decorator'; import Channel from '../channel'; -import { Notes } from '../../../../models'; +import { Notes, Users } from '../../../../models'; import { isMutedUserRelated } from '../../../../misc/is-muted-user-related'; import { PackedNote } from '../../../../models/repositories/note'; +import { User } from '../../../../models/entities/user'; export default class extends Channel { public readonly chName = 'channel'; public static shouldShare = false; public static requireCredential = false; private channelId: string; + private typers: Record = {}; + private emitTypersIntervalId: ReturnType; @autobind public async init(params: any) { @@ -16,6 +19,8 @@ export default class extends Channel { // Subscribe stream this.subscriber.on('notesStream', this.onNote); + this.subscriber.on(`channelStream:${this.channelId}`, this.onEvent); + this.emitTypersIntervalId = setInterval(this.emitTypers, 5000); } @autobind @@ -41,9 +46,41 @@ export default class extends Channel { this.send('note', note); } + @autobind + private onEvent(data: any) { + if (data.type === 'typing') { + const id = data.body; + const begin = this.typers[id] == null; + this.typers[id] = new Date(); + if (begin) { + this.emitTypers(); + } + } + } + + @autobind + private async emitTypers() { + const now = new Date(); + + // Remove not typing users + for (const [userId, date] of Object.entries(this.typers)) { + if (now.getTime() - date.getTime() > 5000) delete this.typers[userId]; + } + + const users = await Users.packMany(Object.keys(this.typers), null, { detail: false }); + + this.send({ + type: 'typers', + body: users, + }); + } + @autobind public dispose() { // Unsubscribe events this.subscriber.off('notesStream', this.onNote); + this.subscriber.off(`channelStream:${this.channelId}`, this.onEvent); + + clearInterval(this.emitTypersIntervalId); } } diff --git a/src/server/api/stream/channels/games/reversi-game.ts b/src/server/api/stream/channels/games/reversi-game.ts index ea62ab1e88..e1c2116ac6 100644 --- a/src/server/api/stream/channels/games/reversi-game.ts +++ b/src/server/api/stream/channels/games/reversi-game.ts @@ -15,7 +15,7 @@ export default class extends Channel { private gameId: ReversiGame['id'] | null = null; private watchers: Record = {}; - private emitWatchersIntervalId: any; + private emitWatchersIntervalId: ReturnType; @autobind public async init(params: any) { -- cgit v1.2.3-freya From 78a963fe334caae564424c6458a8565da957c8be Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 21 Feb 2021 12:26:49 +0900 Subject: Messagingの入力中インジケータを実装 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/pages/messaging/messaging-room.form.vue | 10 +++++ src/client/pages/messaging/messaging-room.vue | 32 +++++++++++++++ src/server/api/stream/channels/messaging.ts | 47 ++++++++++++++++++++-- src/server/api/stream/index.ts | 19 ++++++++- 4 files changed, 104 insertions(+), 4 deletions(-) (limited to 'src/server/api/stream/channels') diff --git a/src/client/pages/messaging/messaging-room.form.vue b/src/client/pages/messaging/messaging-room.form.vue index e561cb3db5..258300dc52 100644 --- a/src/client/pages/messaging/messaging-room.form.vue +++ b/src/client/pages/messaging/messaging-room.form.vue @@ -7,6 +7,7 @@ v-model="text" ref="text" @keypress="onKeypress" + @compositionupdate="onCompositionUpdate" @paste="onPaste" :placeholder="$ts.inputMessageHere" > @@ -29,6 +30,7 @@ import { formatTimeString } from '../../../misc/format-time-string'; import { selectFile } from '@/scripts/select-file'; import * as os from '@/os'; import { Autocomplete } from '@/scripts/autocomplete'; +import { throttle } from 'throttle-debounce'; export default defineComponent({ props: { @@ -46,6 +48,9 @@ export default defineComponent({ text: null, file: null, sending: false, + typing: throttle(3000, () => { + os.stream.send('typingOnMessaging', this.user ? { partner: this.user.id } : { group: this.group.id }); + }), faPaperPlane, faPhotoVideo, faLaughSquint }; }, @@ -147,11 +152,16 @@ export default defineComponent({ }, onKeypress(e) { + this.typing(); if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && this.canSend) { this.send(); } }, + onCompositionUpdate() { + this.typing(); + }, + chooseFile(e) { selectFile(e.currentTarget || e.target, this.$ts.selectFile, false).then(file => { this.file = file; diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue index 7fdd0a201b..3921a081d1 100644 --- a/src/client/pages/messaging/messaging-room.vue +++ b/src/client/pages/messaging/messaging-room.vue @@ -16,6 +16,14 @@