-
Notifications
You must be signed in to change notification settings - Fork 7
/
Echo.vue
130 lines (108 loc) · 3.22 KB
/
Echo.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<template>
<div class="fixed-height container pt-6 is-centered has-text-centered">
<h1 class="title">WebSocket画面</h1>
<h2 class="subtitle">ステータス: {{ statusText }}</h2>
<div class="block mt-6">
<h2 class="subtitle">メッセージの送信</h2>
<div class="field is-grouped">
<p class="control is-expanded">
<input class="input is-primary" type="text" placeholder="任意のテキスト" v-model="text">
</p>
<p class="control">
<button class="button is-primary" @click="sendText">
送信
</button>
</p>
</div>
</div>
<div class="messages block mt-6">
<h2 class="subtitle">受信したメッセージ (送信したメッセージと同じ)</h2>
<template v-if="messages.length > 0">
<p v-for="(message, idx) in messages" :key="idx">
{{ message }}
</p>
</template>
<template v-else>
<p>なし</p>
</template>
</div>
</div>
</template>
<script lang="ts">
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: MIT-0
/* eslint @typescript-eslint/no-explicit-any: 0 */
import { w3cwebsocket } from 'websocket';
import { Component, Vue, Watch } from 'vue-property-decorator';
import { AmplifyEventBus } from 'aws-amplify-vue';
import { Auth } from '@aws-amplify/auth';
import config from '../aws-exports';
@Component
export default class Echo extends Vue {
client?: typeof w3cwebsocket = null;
forceCloseFlag = false;
isLoggedIn = false;
messages: string[] = [];
statusText = '未接続';
text = '';
async connect(): Promise<void> {
const currentSession = await Auth.currentSession();
const idToken = currentSession.getIdToken();
const jwtToken = idToken.getJwtToken();
this.statusText = '接続中';
this.client = new w3cwebsocket(`${config.WebSocketEndpoint}?idToken=${jwtToken}`);
this.client.onopen = () => {
this.statusText = '接続済み';
};
this.client.onerror = (e: any) => {
this.statusText = 'エラー (再接続)';
console.error(e);
setTimeout(async () => {
await this.connect();
});
};
this.client.onclose = () => {
if (!this.forceCloseFlag) {
this.statusText = '接続切れ (再接続)';
setTimeout(async () => {
await this.connect();
});
} else {
this.statusText = '切断';
}
};
this.client.onmessage = async (message: any) => {
const messageObj = JSON.parse(message.data);
this.messages.push(messageObj.message);
};
}
async mounted(): Promise<void> {
await this.connect();
AmplifyEventBus.$on('authState', (info: string) => {
if (info === 'signedIn') {
this.isLoggedIn = true;
} else {
this.isLoggedIn = false;
}
});
}
destroyed(): void {
if (this.client) {
this.forceCloseFlag = true;
this.client.close();
}
}
@Watch('isLoggedIn')
onLoginStatusChanged(): void {
if (!this.isLoggedIn) {
this.$router.push({ name: 'Home' });
}
}
sendText(): void {
if (this.client) {
this.client.send(this.text);
this.text = '';
}
}
}
</script>