Help Migrating from flask-sock to Flask SocketIO

[sepulworld]

Hi all! Ive been trying migrate from flask-sock for a relatively simple use case over to Flask SocketIO but can't quiet get it to work.

Here is my working solution with flask-sock

server side streams some log entries and receive query parameters from client web side

@sock.route("/ws/logstream")
def log_stream_websocket(ws):
    k8s_client = client.CoreV1Api()

    name = request.args["name"]
    namespace = request.args["namespace"]
    container = request.args["container"]

    resp = k8s_client.read_namespaced_pod_log(
        name,
        namespace,
        container=container,
        tail_lines=TAIL_LINES_DEFAULT,
        follow=True,
        _preload_content=False,
    )
    while True:
        try:
            line = resp.readline()
        except Exception as e:
            logging.error(
                f"""
                issue reading pod logs: {e}
            """
            )
            break
        if not line:
            break
        ws.send(line.decode("utf-8"))

    ws.close()

client javascript. This will connect to the web socket on the /ws/logstream url path, pass some parameters and receive logs and put into appropriate spot in the page

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js" integrity="sha256-NFZVyNmS1YlmiklazBA+TALYJlJtZj/y/i/oADk6CVE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-json.min.js" integrity="sha256-18m89UBQcWGjPHHo64UD+sQx4SpMxiRI1F0MbefKXWw=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism-tomorrow.min.css" integrity="sha256-xevuwyBEb2ZYh4nDhj0g3Z/rDBnM569hg9Vq6gEw/Sg=" crossorigin="anonymous" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script>

function scrollWin() {
  window.scrollBy(0, 150);
}

function connect() {
  var ws = new WebSocket('{{dinghy_ping_web_socket_host}}/ws/logstream?namespace={{namespace}}&name={{name}}&container={{container}}');

  ws.onmessage = function(event) {
    let message = event.data;
    let messageElem = document.createElement('div');
    messageElem.textContent = message;
    document.getElementById('logs').append(messageElem);
    scrollWin();
  };

  ws.onclose = function(e) {
    console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
    setTimeout(function() {
      connect();
    }, 1000);
  };

  ws.onerror = function(err) {
    console.error('Socket encountered error: ', err.message, 'Closing socket');
    ws.close();
  };
}

connect();

</script>

Im struggling to understand how to move over to Flask SocketIO. Even when I look at the examples and docs I still can't quiet grasp the changes needed.

Here is my current attempt, but it doesn't work...

server side

@socketio.on("pod_log", namespace="/pod-logs")
def pod_log(data):
    k8s_client = client.CoreV1Api()

    name = request.args["name"]
    namespace = request.args["namespace"]
    container = request.args["container"]

    resp = k8s_client.read_namespaced_pod_log(
        name,
        namespace,
        container=container,
        tail_lines=current_app.config['TAIL_LINES_DEFAULT'],
        follow=True,
        _preload_content=False,
    )
    while True:
        try:
            line = resp.readline()
        except Exception as e:
            logging.error(
                f"""
                issue reading pod logs: {e}
            """
            )
            break
        if not line:
            break
        emit('pod_log', {'data': f'{line.decode("utf-8")}'})
        #ws.send(line.decode("utf-8"))

Client side

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js" integrity="sha256-NFZVyNmS1YlmiklazBA+TALYJlJtZj/y/i/oADk6CVE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-json.min.js" integrity="sha256-18m89UBQcWGjPHHo64UD+sQx4SpMxiRI1F0MbefKXWw=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js" integrity="sha512-aMGMvNYu8Ue4G+fHa359jcPb1u+ytAF+P2SCb+PxrjCdO3n3ZTxJ30zuH39rimUggmTwmh2u7wvQsDTHESnmfQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism-tomorrow.min.css" integrity="sha256-xevuwyBEb2ZYh4nDhj0g3Z/rDBnM569hg9Vq6gEw/Sg=" crossorigin="anonymous" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" charset="utf-8">
function scrollWin() {
  window.scrollBy(0, 150);
}

$(document).ready(function() {
            // Connect to the Socket.IO server.
            // The connection URL has the following format, relative to the current page:
            //     http[s]://<domain>:<port>[/<namespace>]
            var socket = io.connect('http://localhost:8080');
            socket.query = {
                  'namespace': '{{namespace}}',
                  'name': '{{name}}',
                  'container': '{{container}}'
                };
            socket.path = '/pod-logs';

            socket.on('pod_log', function(msg) {
              console.log(msg)
              let data = msg.data;
              let messageElem = document.createElement('div');
              messageElem.textContent = data;
              document.getElementById('logs').append(messageElem);
              scrollWin();
            });

</script>
<style>
  code[class*=language-] {
    white-space: pre-wrap;
    font-size: 0.85em;
  }
</style>

any advice would be highly appreciated!

[miguelgrinberg]

You forgot to explain what is the problem that you are trying to solve. The code is not complete so I cannot run it. I don't know what's wrong with it.

[sepulworld]

Thanks @miguelgrinberg let me try to digest this some more and reword / provide better code examples