diff --git a/frontend/src/api/chat/ChatClientTest.js b/frontend/src/api/chat/ChatClientTest.js index 64ae247..ea70265 100644 --- a/frontend/src/api/chat/ChatClientTest.js +++ b/frontend/src/api/chat/ChatClientTest.js @@ -262,6 +262,9 @@ export default class ChatClientTest { } else { sleepTime = randInt(0, 400) } + if (this.timerId) { + window.clearTimeout(this.timerId) + } this.timerId = window.setTimeout(this.onTimeout.bind(this), sleepTime) } diff --git a/frontend/src/views/Room.vue b/frontend/src/views/Room.vue index b307f47..24dcc75 100644 --- a/frontend/src/views/Room.vue +++ b/frontend/src/views/Room.vue @@ -32,11 +32,16 @@ export default { } }, data() { + let customStyleElement = document.createElement('style') + document.head.appendChild(customStyleElement) return { config: chatConfig.deepCloneDefaultConfig(), + chatClient: null, + textEmoticons: [], // 官方的文本表情(后端配置的) pronunciationConverter: null, - textEmoticons: [], // 官方的文本表情 + + customStyleElement, // 仅用于样式生成器中预览样式 } }, computed: { @@ -79,12 +84,18 @@ export default { // 当前窗口不可见,延迟到可见时加载,防止OBS中一次并发太多请求(OBS中浏览器不可见时也会加载网页,除非显式设置) document.addEventListener('visibilitychange', this.onVisibilityChange) } + + window.addEventListener('message', this.onWindowMessage) }, beforeDestroy() { + window.removeEventListener('message', this.onWindowMessage) + document.removeEventListener('visibilitychange', this.onVisibilityChange) if (this.chatClient) { this.chatClient.stop() } + + document.head.removeChild(this.customStyleElement) }, methods: { onVisibilityChange() { @@ -105,6 +116,7 @@ export default { } try { + // 其他初始化就不用等了,就算失败了也不会有很大影响 await initChatClientPromise } catch (e) { this.$message.error({ @@ -199,11 +211,29 @@ export default { this.textEmoticons = await chat.getTextEmoticons() }, - start() { - this.chatClient.start() - }, - stop() { - this.chatClient.stop() + // 处理样式生成器发送的消息 + onWindowMessage(event) { + if (event.origin !== window.location.origin) { + console.warn(`消息origin错误,${event.origin} != ${window.location.origin}`) + return + } + + let { type, data } = event.data + switch (type) { + case 'roomSetCustomStyle': + this.customStyleElement.innerText = data.css + break + case 'roomStartClient': + if (this.chatClient) { + this.chatClient.start() + } + break + case 'roomStopClient': + if (this.chatClient) { + this.chatClient.stop() + } + break + } }, onAddText(data) { diff --git a/frontend/src/views/StyleGenerator/index.vue b/frontend/src/views/StyleGenerator/index.vue index 5f318d7..1c8a12d 100644 --- a/frontend/src/views/StyleGenerator/index.vue +++ b/frontend/src/views/StyleGenerator/index.vue @@ -28,16 +28,16 @@