Try to ensure websocket is closed when forgetting about it

Might not be necessary, but if it is then it prevents a sitation where a
websocket is still open but we've forgotten about it, so we will never
broadcast any new messages to it and the client will be practically frozen in
time until they disconnect and open a new websocket.

Also update the user's last_seen when the websocket is closed. This prevents a
user with js enabled who's actually idle being considered absent and being
rotated when their websocket accidentally closes for a few seconds.

anonstream/routes/websocket.py

@@ -5,6 +5,7 @@ import asyncio
 
 from quart import current_app, websocket
 
+from anonstream.user import see
 from anonstream.websocket import websocket_outbound, websocket_inbound
 from anonstream.routes.wrappers import with_user_from
 
@@ -19,4 +20,9 @@ async def live(user):
     try:
         await asyncio.gather(producer, consumer)
     finally:
+        see(user)
         user['websockets'].remove(queue)
+        try:
+            await websocket.close(1000)
+        except RuntimeError:
+            pass

anonstream/static/style.css

@@ -214,6 +214,7 @@ noscript {
   vertical-align: top;
 }
 .chat-message__markup {
+  white-space: pre-wrap;
   overflow-wrap: anywhere;
   line-height: 1.3125;
 }

anonstream/templates/home.html

@@ -41,7 +41,7 @@
     <a href="#chat">chat</a>
     <a href="#both">both</a>
   </nav>
-  <footer>anonstream 1.0.0 &mdash; <a href="https://git.076.ne.jp/ninya9k/anonstream" target="_blank">source</a></footer>
+  <footer>anonstream 1.0.1 &mdash; <a href="https://git.076.ne.jp/ninya9k/anonstream" target="_blank">source</a></footer>
   <script src="{{ url_for('static', filename='anonstream.js') }}" type="text/javascript"></script>
 </body>
 </html>

anonstream/templates/nojs_chat_messages.html

@@ -124,6 +124,7 @@
       vertical-align: top;
     }
     .chat-message__markup {
+      white-space: pre-wrap;
       overflow-wrap: anywhere;
       line-height: 1.3125;
     }
@@ -136,14 +137,14 @@
     }
 
     {% for token in messages | map(attribute='token') | list | unique %}
-      {% with user = users_by_token[token] %}
-        [data-token-hash="{{ user.token_hash }}"] > .chat-message__name {
-          color: {{ user.color }};
+      {% with this_user = users_by_token[token] %}
+        [data-token-hash="{{ this_user.token_hash }}"] > .chat-message__name {
+          color: {{ this_user.color }};
         }
-        {% if user.tripcode %}
-          [data-token-hash="{{ user.token_hash }}"] > .tripcode {
-            background-color: {{ user.tripcode.background_color }};
-            color: {{ user.tripcode.foreground_color }};
+        {% if this_user.tripcode %}
+          [data-token-hash="{{ this_user.token_hash }}"] > .tripcode {
+            background-color: {{ this_user.tripcode.background_color }};
+            color: {{ this_user.tripcode.foreground_color }};
           }
         {% endif %}
       {% endwith %}
@@ -161,15 +162,15 @@
   </aside>
   <ol id="chat-messages">
     {% for message in messages | reverse %}
-      <li class="chat-message" data-seq="{{ message.seq }}" data-token-hash="{{ user.token_hash }}">
-        {% with user = users_by_token[message.token] %}
+      {% with this_user = users_by_token[message.token] %}
+        <li class="chat-message" data-seq="{{ message.seq }}" data-token-hash="{{ this_user.token_hash }}">
           <time class="chat-message__time" datetime="{{ message.date }}T{{ message.time_seconds }}Z" title="{{ message.date }} {{ message.time_seconds }}">{{ message.time_minutes }}</time>
           {{- '&nbsp;' | safe -}}
-          {{ appearance(user, insignia_class='chat-message__insignia', name_class='chat-message__name', tag_class='chat-message__name__tag') }}
+          {{ appearance(this_user, insignia_class='chat-message__insignia', name_class='chat-message__name', tag_class='chat-message__name__tag') }}
           {{- ': ' -}}
           <span class="chat-message__markup">{{ message.markup }}</span>
-        {% endwith %}
-      </li>
+        </li>
+      {% endwith %}
     {% endfor %}
   </ol>
   <aside id="timeout-dismiss">

anonstream/templates/nojs_chat_users.html

@@ -86,14 +86,14 @@
       cursor: default;
     }
 
-    {% for user in users_watching + users_notwatching %}
-      [data-token-hash="{{ user.token_hash }}"] > .user__name {
-        color: {{ user.color }};
+    {% for user_listed in users_watching + users_notwatching %}
+      [data-token-hash="{{ user_listed.token_hash }}"] > .user__name {
+        color: {{ user_listed.color }};
       }
-      {% if user.tripcode %}
-        [data-token-hash="{{ user.token_hash }}"] > .tripcode {
-          background-color: {{ user.tripcode.background_color }};
-          color: {{ user.tripcode.foreground_color }};
+      {% if user_listed.tripcode %}
+        [data-token-hash="{{ user_listed.token_hash }}"] > .tripcode {
+          background-color: {{ user_listed.tripcode.background_color }};
+          color: {{ user_listed.tripcode.foreground_color }};
         }
       {% endif %}
     {% endfor %}
@@ -110,7 +110,7 @@
     <h5>Watching ({{ users_watching | length }})</h5>
     <ul>
       {% for user_listed in users_watching %}
-        <li class="user" data-token-hash="{{ user.token_hash }}">
+        <li class="user" data-token-hash="{{ user_listed.token_hash }}">
           {{- appearance(user_listed, insignia_class='user__insignia', name_class='user__name', tag_class='user__name__tag') -}}
           {%- if user.token == user_listed.token %} (You){% endif -%}
         </li>
@@ -120,7 +120,7 @@
     <h5>Not watching ({{ users_notwatching | length }})</h5>
     <ul>
       {% for user_listed in users_notwatching %}
-        <li class="user" data-token-hash="{{ user.token_hash }}">
+        <li class="user" data-token-hash="{{ user_listed.token_hash }}">
           {{- appearance(user_listed, insignia_class='user__insignia', name_class='user__name', tag_class='user__name__tag') -}}
           {%- if user.token == user_listed.token %} (You){% endif -%}
         </li>