添加获取头像

chat.py

@@ -6,6 +6,7 @@ import json
 import logging
 from typing import *
 
+import aiohttp
 import tornado.websocket
 
 import blivedm.blivedm as blivedm
@@ -20,11 +21,33 @@ class Command(enum.IntEnum):
     ADD_VIP = 3
 
 
+http_session = aiohttp.ClientSession()
+_avatar_url_cache: Dict[int, str] = {}
+
+
+async def get_avatar_url(user_id):
+    if user_id in _avatar_url_cache:
+        return _avatar_url_cache[user_id]
+    async with http_session.get('https://api.bilibili.com/x/space/acc/info',
+                                params={'mid': user_id}) as r:
+        data = await r.json()
+    url = data['data']['face']
+    if not url.endswith('noface.gif'):
+        url += '@24w_24h.webp'
+    _avatar_url_cache[user_id] = url
+
+    if len(_avatar_url_cache) > 10000:
+        for _, key in zip(range(100), _avatar_url_cache):
+            del _avatar_url_cache[key]
+
+    return url
+
+
 class Room(blivedm.BLiveClient):
     _COMMAND_HANDLERS = blivedm.BLiveClient._COMMAND_HANDLERS.copy()
 
     def __init__(self, room_id):
-        super().__init__(room_id)
+        super().__init__(room_id, session=http_session)
         self.future = None
         self.clients: List['ChatHandler'] = []
 
@@ -42,17 +65,19 @@ class Room(blivedm.BLiveClient):
             client.write_message(body)
 
     async def __my_on_get_danmaku(self, command):
-        user_id = command['info'][2][0]
-        # TODO 获取头像
         data = {
-            'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@24w_24h.webp',
+            'avatarUrl': await get_avatar_url(command['info'][2][0]),
             'timestamp': command['info'][0][4],
             'content': command['info'][1],
             'authorName': command['info'][2][1]
         }
         self.send_message(Command.ADD_TEXT, data)
 
-    _COMMAND_HANDLERS['SEND_GIFT'] = __my_on_get_danmaku
+    _COMMAND_HANDLERS['DANMU_MSG'] = __my_on_get_danmaku
+
+    # 新舰长 {'cmd': 'GUARD_BUY', 'data': {'uid': 1822222, 'username': 'MRSKING', 'guard_level': 3,
+    # 'num': 1, 'price': 198000, 'gift_id': 10003, 'gift_name': '舰长', 'start_time': 1558506165,
+    # 'end_time': 1558506165}}
 
 
 class RoomManager:

frontend/public/index.html

@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <!-- 重要：如果带referer则获取头像时会403 -->
+    <meta name="referrer" content="no-referrer">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>blivechat</title>
   </head>

frontend/src/components/Room.vue

@@ -60,17 +60,21 @@ export default {
       switch(body.cmd) {
         case 1: // ADD_TEXT
           this.messages.push(message)
+          if (this.messages.length > 50)
+            this.messages.shift()
           break;
         case 2: // ADD_GIFT
           break;
         case 3: // ADD_VIP
           break;
       }
-      window.scrollTo(0, document.body.scrollHeight)
     }
   },
   beforeDestroy() {
     this.websocket.close()
+  },
+  updated() {
+      window.scrollTo(0, document.body.scrollHeight)
   }
 }
 </script>
@@ -288,8 +292,10 @@ yt-live-chat-ticker-paid-message-item-renderer #fake-avatar {
 
 /* 以下为自动生成：https://chatv2.septapus.com/ */
 
-@import url("https://fonts.googleapis.com/css?family=Changa One");
-@import url("https://fonts.googleapis.com/css?family=Imprima");
+/* @import url("https://fonts.googleapis.com/css?family=Changa One"); */
+/* @import url("https://fonts.googleapis.com/css?family=Imprima"); */
+@import url("https://fonts.lug.ustc.edu.cn/css?family=Changa One");
+@import url("https://fonts.lug.ustc.edu.cn/css?family=Imprima");
 
 /* Background colors*/
 body {
@@ -373,6 +379,7 @@ yt-live-chat-legacy-paid-message-renderer #author-photo {
   height: 24px !important;
   border-radius: 24px !important;
   margin-right: 6px !important;
+  background-size: cover;
 }
 
 /* Hide badges. */