如何使用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的值

回答

相關問題