优化消息平滑算法

frontend/src/api/chat/ChatClientTest.js

@@ -3,20 +3,57 @@ import * as constants from '@/components/ChatRenderer/constants'
 import * as avatar from './avatar'
 
 const NAMES = [
-  'xfgryujk', 'Simon', 'Il Harper', 'Kinori', 'shugen', 'yuyuyzl', '3Shain', '光羊', '黑炎', 'Misty', '孤梦星影',
-  'ジョナサン・ジョースター', 'ジョセフ・ジョースター', 'ディオ・ブランドー', '空條承太郎', '博丽灵梦', '雾雨魔理沙',
-  'Rick Astley'
+  '光羊',
+  '黑炎',
+  '孤梦星影',
+  '博丽灵梦',
+  '雾雨魔理沙',
+  '空條承太郎',
+  'ディオ・ブランドー',
+  'ジョセフ・ジョースター',
+  'ジョナサン・ジョースター',
+  'Simon',
+  'Misty',
+  'Kinori',
+  'shugen',
+  '3Shain',
+  'yuyuyzl',
+  'xfgryujk',
+  'Il Harper',
+  'Rick Astley',
 ]
 
 const CONTENTS = [
-  '草', 'kksk', '8888888888', '888888888888888888888888888888', '老板大气，老板身体健康',
-  'The quick brown fox jumps over the lazy dog', "I can eat glass, it doesn't hurt me",
-  '我不做人了，JOJO', '無駄無駄無駄無駄無駄無駄無駄無駄', '欧啦欧啦欧啦欧啦欧啦欧啦欧啦欧啦', '逃げるんだよォ！',
-  '嚯，朝我走过来了吗，没有选择逃跑而是主动接近我么', '不要停下来啊', '已经没有什么好怕的了',
-  'I am the bone of my sword. Steel is my body, and fire is my blood.', '言いたいことがあるんだよ！',
-  '我忘不掉夏小姐了。如果不是知道了夏小姐，说不定我已经对这个世界没有留恋了', '迷えば、敗れる',
-  'Farewell, ashen one. May the flame guide thee', '竜神の剣を喰らえ！', '竜が我が敌を喰らう！',
-  '有一说一，这件事大家懂的都懂，不懂的，说了你也不明白，不如不说', '让我看看', '我柜子动了，我不玩了'
+  '草',
+  '让我看看',
+  '不要停下来啊',
+  '我不做人了，JOJO',
+  '已经没有什么好怕的了',
+  '我柜子动了，我不玩了',
+  '老板大气，老板身体健康',
+  '我醉提酒游寒山，爽滑慢舔',
+  '無駄無駄無駄無駄無駄無駄無駄無駄',
+  '欧啦欧啦欧啦欧啦欧啦欧啦欧啦欧啦',
+  '所有没好全部康复呀，我的癌也全部康复呀',
+  '嚯，朝我走过来了吗，没有选择逃跑而是主动接近我么',
+  '有一说一，这件事大家懂的都懂，不懂的，说了你也不明白，不如不说',
+  '如来来了吗？如来嘛~他真来了吗？如~来~到底来没来？如来~如来他真来了吗？如来~你看看，来没来？如~来~',
+  '迷えば、敗れる',
+  '逃げるんだよォ！',
+  '竜神の剣を喰らえ！',
+  '竜が我が敌を喰らう！',
+  '言いたいことがあるんだよ！',
+  '知らず知らず隠してた 本当の声を響かせてよほら',
+  'kksk',
+  '8888888888',
+  'Never gonna give you up',
+  'Never gonna let you down',
+  '888888888888888888888888888888',
+  'I am the storm that is approaching',
+  "I can eat glass, it doesn't hurt me",
+  'The quick brown fox jumps over the lazy dog',
+  'Farewell, ashen one. May the flame guide thee',
+  'I am the bone of my sword. Steel is my body, and fire is my blood.',
 ]
 
 const EMOTICONS = [
@@ -194,9 +231,6 @@ function randInt(min, max) {
 
 export default class ChatClientTest {
   constructor() {
-    this.minSleepTime = 800
-    this.maxSleepTime = 1200
-
     this.onAddText = null
     this.onAddGift = null
     this.onAddMember = null
@@ -219,7 +253,14 @@ export default class ChatClientTest {
   }
 
   refreshTimer() {
-    this.timerId = window.setTimeout(this.onTimeout.bind(this), randInt(this.minSleepTime, this.maxSleepTime))
+    // 模仿B站的消息间隔模式
+    let sleepTime
+    if (randInt(0, 4) == 0) {
+      sleepTime = randInt(1000, 2000)
+    } else {
+      sleepTime = randInt(0, 400)
+    }
+    this.timerId = window.setTimeout(this.onTimeout.bind(this), sleepTime)
   }
 
   onTimeout() {

frontend/src/components/ChatRenderer/index.vue

@@ -264,15 +264,19 @@ export default {
       } else {
         let curTime = new Date()
         let interval = curTime - this.lastEnqueueTime
-        // 让发消息速度变化不要太频繁
-        if (interval > 1000) {
+        // 真实的进队列时间间隔模式大概是这样：2500, 300, 300, 300, 2500, 300, ...
+        // B站消息有缓冲，会一次发多条消息。这里把波峰视为发送了一次真实的WS消息，所以要过滤掉间隔太小的
+        if (interval > 1000 || this.enqueueIntervals.length < 5) {
           this.enqueueIntervals.push(interval)
           if (this.enqueueIntervals.length > 5) {
             this.enqueueIntervals.splice(0, this.enqueueIntervals.length - 5)
           }
+          // 这边估计得尽量大，只要不太早把消息缓冲发完就是平滑的。有MESSAGE_MAX_INTERVAL保底，不会让消息延迟太大
+          // 其实可以用单调队列求最大值，偷懒不写了
           this.estimatedEnqueueInterval = Math.max(...this.enqueueIntervals)
-          this.lastEnqueueTime = curTime
         }
+        // 上次入队时间还是要设置，否则会太早把消息缓冲发完，然后较长时间没有新消息
+        this.lastEnqueueTime = curTime
       }
 
       // 把messages分成messageGroup，每个组里最多有1个需要平滑的消息