update chat room demo

Author: wang0618

demos/chat_room.py

@@ -5,27 +5,26 @@
 from pywebio.output import *
 from pywebio.session import defer_call, info as session_info, run_async
 
-# 最大消息记录保存
 MAX_MESSAGES_CNT = 10 ** 4
 
-chat_msgs = []  # 聊天记录 (name, msg)
-online_users = set()  # 在线用户
+chat_msgs = []  # The chat message history. The item is (name, message content)
+online_users = set()
 
 
 def t(eng, chinese):
     """return English or Chinese text according to the user's browser language"""
     return chinese if 'zh' in session_info.user_language else eng
 
 
-async def refresh_msg(my_name, msg_box):
+async def refresh_msg(my_name):
     """send new message to current session"""
     global chat_msgs
     last_idx = len(chat_msgs)
     while True:
         await asyncio.sleep(0.5)
         for m in chat_msgs[last_idx:]:
             if m[0] != my_name:  # only refresh message that not sent by current user
-                msg_box.append(put_markdown('`%s`: %s' % m, sanitize=True))
+                put_markdown('`%s`: %s' % m, sanitize=True, scope='msg-box')
 
         # remove expired message
         if len(chat_msgs) > MAX_MESSAGES_CNT:
@@ -38,26 +37,24 @@ async def main():
     """PyWebIO chat room
 
     You can chat with everyone currently online.
-    和当前所有在线的人聊天
     """
     global chat_msgs
 
     put_markdown(t("## PyWebIO chat room\nWelcome to the chat room, you can chat with all the people currently online. You can open this page in multiple tabs of your browser to simulate a multi-user environment. This application uses less than 90 lines of code, the source code is [here](https://github.com/wang0618/PyWebIO/blob/dev/demos/chat_room.py)", "## PyWebIO聊天室\n欢迎来到聊天室，你可以和当前所有在线的人聊天。你可以在浏览器的多个标签页中打开本页面来测试聊天效果。本应用使用不到90行代码实现，源代码[链接](https://github.com/wang0618/PyWebIO/blob/dev/demos/chat_room.py)"))
 
-    msg_box = output()
-    put_scrollable(msg_box, height=300, keep_bottom=True)
+    put_scrollable(put_scope('msg-box'), height=300, keep_bottom=True)
     nickname = await input(t("Your nickname", "请输入你的昵称"), required=True, validate=lambda n: t('This name is already been used', '昵称已被使用') if n in online_users or n == '📢' else None)
 
     online_users.add(nickname)
     chat_msgs.append(('📢', '`%s` joins the room. %s users currently online' % (nickname, len(online_users))))
-    msg_box.append(put_markdown('`📢`: `%s` join the room. %s users currently online' % (nickname, len(online_users)), sanitize=True))
+    put_markdown('`📢`: `%s` join the room. %s users currently online' % (nickname, len(online_users)), sanitize=True, scope='msg-box')
 
     @defer_call
     def on_close():
         online_users.remove(nickname)
         chat_msgs.append(('📢', '`%s` leaves the room. %s users currently online' % (nickname, len(online_users))))
 
-    refresh_task = run_async(refresh_msg(nickname, msg_box))
+    refresh_task = run_async(refresh_msg(nickname))
 
     while True:
         data = await input_group(t('Send message', '发送消息'), [
@@ -68,7 +65,7 @@ def on_close():
             break
         if data['cmd'] == t('Multiline Input', '多行输入'):
             data['msg'] = '\n' + await textarea('Message content', help_text=t('Message content supports Markdown syntax', '消息内容支持Markdown语法'))
-        msg_box.append(put_markdown('`%s`: %s' % (nickname, data['msg']), sanitize=True))
+        put_markdown('`%s`: %s' % (nickname, data['msg']), sanitize=True, scope='msg-box')
         chat_msgs.append((nickname, data['msg']))
 
     refresh_task.close()