如何使用WebSocket在web浏览器页面显示来自asyncio的值

我是asyncio和aiohttp以及WebSockets的新手。基本上，我需要生成一个随机字符串，每秒更改一次，并在网页上显示其值而不刷新。如何使用WebSocket在web浏览器页面显示来自asyncio的值

我写了下面的代码： 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

但只显示在控制台中随机字符串值。

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)

我知道我需要使用WebSockets这个任务，但不能从教程了解如何实现并连接所有组件。如果有人能帮助我会很高兴。

来源

2017-09-14 Alex Ermolaev

如果你能接受一个“拉”的解决方案，而不是一个“推”，你不一定需要使用的WebSocket。相反，您可以使用“标准”AJAX更新您的网页。在所有情况下，您都必须编写一些JavaScript代码来处理网页上的数据接收。 – JohanL

刚刚解决它在客户端。

<!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>

来源

2017-10-07 19:13:25

如何使用WebSocket在web浏览器页面显示来自asyncio的值

回答

相关问题