CODEWITHSUNDEEP
pythonwebsocketpython-asyncioaiohttp
Alex Ermolaev
Alex Ermolaev

Reputation: 311

How to display value from asyncio in web browser page using WebSocket

I'm new to asyncio and aiohttp as well as WebSockets. Basically, I need to generate a random string, change it every second and display its value on the web page without refreshing.

I wrote the following code: app.py

import asyncio
import random
import string

from aiohttp import web


async def index(request):
    return web.Response(text=periodic())

@asyncio.coroutine
def periodic():
    while True:
        print(''.join(random.choice(string.ascii_uppercase + string.digits) for _ in range(10)))
        yield from asyncio.sleep(1)

def stop():
    task.cancel()

task = asyncio.Task(periodic())
loop = asyncio.get_event_loop()

try:
    loop.run_until_complete(task)
except asyncio.CancelledError:
    pass

But it only displays random string value in the console.

main.py

from aiohttp import web
from routes import setup_routes


app = web.Application()
setup_routes(app)
web.run_app(app, host='127.0.0.1', port=8080)

routes.py

from app import index


def setup_routes(app):
    app.router.add_get('/', index)

I know that I need to use WebSockets for this task but can't understand from the tutorials how to implement and connect all the components. Will be glad if somebody can help me.

Upvotes: 1

Views: 465

Answers (1)

Alex Ermolaev
Alex Ermolaev

Reputation: 311

Just resolved it on the client side.

<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
  <script language="javascript" type="text/javascript">
    $(function() {
      var conn = null;
      function log(msg) {
        var control = $('#log');
        control.html('');
        control.html(msg);
        control.scrollTop(control.scrollTop() + 1000);
      }
      function connect() {
        disconnect();
        var wsUri = (window.location.protocol=='https:'&&'wss://'||'ws://')+window.location.host;
        conn = new WebSocket(wsUri);
        log('Connecting...');
        conn.onopen = function() {
          log('Connected.');
          console.log(conn);
        };
        conn.onmessage = function(e) {
          log('Received: ' + e.data);
        };
        conn.onclose = function() {
          log('Disconnected.');
          conn = null;
        };
      }
      function disconnect() {
        if (conn != null) {
          log('Disconnecting...');
          conn.close();
          conn = null;
        }
      }

      $('#connect').click(function() {
        if (conn == null) {
          connect();
        } else {
          disconnect();
        }
        return false;
      });
      function repeat(){
          var text = Math.random().toString(36).slice(2);
          log(text);
          conn.send(text);
          setTimeout(repeat, 1000);
      };
      $('#start').click(function() {
        repeat();
        $('#text').val('').focus();
        return false;
      });
      $('#text').keyup(function(e) {
        if (e.keyCode === 13) {
          $('#send').click();
          return false;
        }
      });
    });
</script>
</head>
<body>
<div>
  <button id="connect">Connect</button>
</div>
<div>
  <button id="start">start</button>
</div>
<div id="log"
     style="width:20em;height:15em;overflow:auto;border:1px solid black">
</div>
</body>
</html>

Upvotes: 1

Related Questions