2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

WebSocketの使い道

Last updated at Posted at 2019-01-15

最近のUIはWeb越し。しかし、HTMLやJavaScript周りの仕様は、大体が、ユーザが何かをクリックしたらどうこうという、従来のマウス・タッチUIを前提にしています。

一方、端末側のパワーが非力なので(端末にパワーを持たせるとシステムが高価になる)、センサーのデータをサーバで処理したい。そして、サーバ側の処理結果に応じて、UIを制御したい。そこでは、ユーザがクリックやタッチするイベントはありません。

現状のHTML/JavaScriptによるUIを使いながら、サーバ側からの制御を可能にするにはどうするか? asyncio の aiohttp の WebSocketがこの用途に使えます。

以下、クライアントラズパイで、ブラウザとPythonプロセスを動かし、サーバ側のPythonで両者と通信し、サーバの処理に応じて、ブラウザにUI指示を送り、クライアントPythonに UI 以外(センサーなど)の指示を送る、ようなプログラムのスケルトンです。

サーバ

import asyncio
import aiohttp.web
...

async def browser_handler(request):
    browser_websocket = aiohttp.web.WebSocketResponse()
    await browser_websocket.prepare(request)
  # await send_str()でDOM制御指示 ...
    return browser_websocket

async def client_handler(request):
    clientpy_websocket = aiohttp.web.WebSocketResponse()
    await clientpy_websocket.prepare(request)
    # await send_str()やawait receive_str()で、
    # クライアントのデータやセンサー制御指示のやり取り...
    return clientpy_websocket

if __name__ == '__main__':
    loop = asyncio.get_event_loop()
    app = aiohttp.web.Application(loop=loop)
    app.router.add_route('GET', '/ws/b', browser_handler)
    app.router.add_route('GET', '/ws/c', client_handler)
    aiohttp.web.run_app(app, host=HOST, port=PORT)

クライアントPython

import asyncio
import aiohttp
...
async def client():
    session = aiohttp.ClientSession()
    async with session.ws_connect('http://HOST:PORT/ws/c') as ws:
        # await send_str()したりawait receive_str()したりして,
        # サーバから指示を受け、クライアントラズパイにつけたセンサーを
        # 操作したり、別ポートでデータストリームをUPD送信するように設定
    # したりする処理...

if __name__ == '__main__':
    try:
        loop = asyncio.get_event_loop()
        loop.run_until_complete(client())
    finally:
        loop.close()
 

クライアントブラウザ

<!DOCTYPE html>
<html><head>
</head>
<body>
    <script>
        var ws = new WebSocket('http://HOST:PORT/ws/b');
        ws.onmessage = function(e) {
             // サーバからの指示に応じてDOM操作
        };
    ...
2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?