Replace HTTP polling from web GUI with Socket.IO

online_log/app.py

@@ -2,13 +2,14 @@
 import requests
 import os
 from flask import Flask, send_from_directory, request, jsonify
+from flask_socketio import SocketIO
 import argparse
 
 app = Flask(__name__, static_folder='static')
 app.logger.setLevel(logging.ERROR)
 log = logging.getLogger('werkzeug')
 log.setLevel(logging.ERROR)
-messages = []
+socketio = SocketIO(app)
 port = [8000]
 
 def send_msg(role, text):
@@ -34,11 +35,6 @@ def replay():
     return send_from_directory("static", "replay.html")
 
 
-@app.route("/get_messages")
-def get_messages():
-    return jsonify(messages)
-
-
 @app.route("/send_message", methods=["POST"])
 def send_message():
     data = request.get_json()
@@ -48,7 +44,7 @@ def send_message():
     avatarUrl = find_avatar_url(role)
 
     message = {"role": role, "text": text, "avatarUrl": avatarUrl}
-    messages.append(message)
+    socketio.emit("message", message)
     return jsonify(message)
 
 
@@ -65,4 +61,4 @@ def find_avatar_url(role):
     args = parser.parse_args()
     port.append(args.port)
     print(f"Please visit http://127.0.0.1:{port[-1]}/ for the front-end display page. \nIn the event of a port conflict, please modify the port argument (e.g., python3 app.py --port 8012).")
-    app.run(host='0.0.0.0', debug=False, port=port[-1])
+    socketio.run(app, host='0.0.0.0', debug=False, port=port[-1])

online_log/static/index.html

@@ -15,6 +15,7 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
     <script src="static/js/main.js"></script>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism-okaidia.min.css">
@@ -46,7 +47,6 @@
 
 
     <div class="container d-flex flex-column" id="chat-box"></div>
-    <script src="static/js/main.js"></script>
 </body>
 
 </html>

online_log/static/js/main.js

@@ -64,19 +64,12 @@ function parseCodeBlocks(text, role) {
 }
 
 
-function get_new_messages() {
-
-  $.getJSON("/get_messages", function (data) {
-    var lastDisplayedMessageIndex = $("#chat-box .message-container").length;
-
-    for (var i = lastDisplayedMessageIndex; i < data.length; i++) {
-      var role = data[i].role;
-      var text = data[i].text;
-      var avatarUrl = data[i].avatarUrl;
-
-      append_message(role, text, avatarUrl);
-
-    }
+function get_messages() {
+  const socket = io.connect(`${location.hostname}:${location.port}`);
+  socket.on("connect", function () {
+    socket.on("message", function(data) {
+      append_message(data.role, data.text, data.avatarUrl);
+    });
   });
 }
 
@@ -130,10 +123,5 @@ function copyToClipboard(element) {
 
 
 $(document).ready(function () {
-  get_new_messages();
-  setInterval(function () {
-    get_new_messages();
-  }, 1000);
-});
-
-
+  get_messages();
+});