Symfoware

Python websocket-clientでバイナリデータの送受信

websocket-clientでWebSocket通信してみました。
Python websocket-clientでBottleフレームワークと通信する

バイナリデータの送受信を試してみます。

バイナリデータの送信

サンプルとして画像のバイナリデータを送信。
確認用にサーバー側でファイルに復元。
クライアントには送信されてきたバイナリデータをそのまま返却してみます。

こちらが参考になりました。
Python websocket client: sending binary content


・app.py

import json
import bottle
import gevent
from bottle.ext.websocket import GeventWebSocketServer
from bottle.ext.websocket import websocket
app = bottle.Bottle()
@app.route('/wsbin', apply=[websocket])
def wsbin(ws):
    while True:
        body = ws.receive()
        if not body:
            break
        
        # 確認用に受信したデータをファイルに出力
        with open('debug_app.jpg', 'wb') as f:
            f.write(body)
        # そのまま送り返す
        ws.send(body)
        
app.run(host='localhost', port=8080, reloader=True, debug=True, server=GeventWebSocketServer)

・client.py

import json
import time
import urllib.request
import urllib.parse
import websocket
url = 'ws://localhost:8080/wsbin'
# 画像データ読み込み
with open('images.jpg', 'rb') as f:
    data = f.read()
ws = websocket.create_connection(url)
# sendではなくsend_binaryでデータ送信
ws.send_binary(data)
body = ws.recv()
# 確認用に受信データをファイルに保存
with open('debug_client.jpg', 'wb') as f:
    f.write(body)
ws.close()

ポイントは、sendではなくsend_binaryでデータ送信する点でしょうか。
受信部分はrecvのまま変更しなくてもOKでした。

適当な画像ファイルimages.jpgを用意して実行してみると、同じ内容の
debug_app.jpg
debug_client.jpg
が出力されることが確認できました。


【参考URL】
Python websocket client: sending binary content

Python websocket-clientでBottleフレームワークと通信する

BottleフレームワークでWebSocketが使用できるよう構成し、JavaScriptで通信してみました。
BottleフレームワークでWebsocket通信を行う

Pythonからの通信を試してみます。

websocket-client

こちらを使用して接続することにしました。
https://github.com/websocket-client/websocket-client

pipでインストールしておきます。

http通信のサンプル

jsonデータを送信しサーバー側で解析。
jsonデータの応答を返すサンプルを動かしてみることにします。

まず、http通信でのサンプル。

・app.py

import json
import bottle
import gevent
from bottle.ext.websocket import GeventWebSocketServer
from bottle.ext.websocket import websocket
app = bottle.Bottle()
@app.route('/httpecho', method='POST')
def httpecho():
    body = bottle.request.body
    data = body.read().decode('utf-8')
    json_data = json.loads(data)
    return json.dumps({'status':'ok', 'message': 'hello ' + json_data['name']})
app.run(host='localhost', port=8080, reloader=True, debug=True, server=GeventWebSocketServer)

・client.py

import json
import urllib.request
import urllib.parse
url = 'http://localhost:8080/httpecho'
data = json.dumps({'name': 'symfoware'})
response = urllib.request.urlopen(url, data.encode('utf-8'))
body = response.read().decode('utf-8')
result = json.loads(body)
print(result['message'])

http通信でjson通信できました。



これをWebSocket版に変更してみます。

WebSocket

WebSocket版のサンプルは以下のようになりました。

・app.py

import json
import bottle
import gevent
from bottle.ext.websocket import GeventWebSocketServer
from bottle.ext.websocket import websocket
app = bottle.Bottle()
@app.route('/wsecho', apply=[websocket])
def wsecho(ws):
    while True:
        body = ws.receive()
        if not body:
            break
        
        json_data = json.loads(body)
        ws.send(json.dumps({'status':'ok', 'message': 'hello ' + json_data['name']}))
app.run(host='localhost', port=8080, reloader=True, debug=True, server=GeventWebSocketServer)

・client.py

import json
import websocket
url = 'ws://localhost:8080/wsecho'
data = json.dumps({'name': 'symfoware'})
ws = websocket.create_connection(url)
ws.send(data)
body = ws.recv()
result = json.loads(body)
print(result['message'])
ws.close()

実行結果に変化はありませんが、WebSocketでの通信を確認できました。

通信速度の比較

http、WebSocket各々1,000回通信した際の速度を比較してみました。

・app.py

import json
import bottle
import gevent
from bottle.ext.websocket import GeventWebSocketServer
from bottle.ext.websocket import websocket
app = bottle.Bottle()
@app.route('/httpecho', method='POST')
def httpecho():
    body = bottle.request.body
    data = body.read().decode('utf-8')
    json_data = json.loads(data)
    return json.dumps({'status':'ok', 'message': 'hello ' + json_data['name']})
@app.route('/wsecho', apply=[websocket])
def wsecho(ws):
    while True:
        body = ws.receive()
        if not body:
            break
        
        json_data = json.loads(body)
        ws.send(json.dumps({'status':'ok', 'message': 'hello ' + json_data['name']}))
app.run(host='localhost', port=8080, reloader=True, debug=True, server=GeventWebSocketServer)

・client.py

import json
import time
import urllib.request
import urllib.parse
import websocket
def http_call():
    start_time = time.perf_counter()
    url = 'http://localhost:8080/httpecho'
    data = json.dumps({'name': 'symfoware'})
    for i in range(1000):
        response = urllib.request.urlopen(url, data.encode('utf-8'))
        body = response.read().decode('utf-8')
        result = json.loads(body)
    print('http: %.4f sec' % (time.perf_counter() - start_time))
    
def ws_call():
    start_time = time.perf_counter()
    url = 'ws://localhost:8080/wsecho'
    data = json.dumps({'name': 'symfoware'})
    ws = websocket.create_connection(url)
    
    for i in range(1000):
        ws.send(data)
        body = ws.recv()
        result = json.loads(body)
    ws.close()
    print('ws: %.4f sec' % (time.perf_counter() - start_time))
if __name__ == '__main__':
    http_call()
    ws_call()

実行結果



WebSocketの方が4倍程度高速になりました。

BottleフレームワークでWebsocket通信を行う

Python製軽量Webフレームワーク Bottle
https://bottlepy.org/docs/dev/

単体ではWebsocket通信を行うことはできませんが、プラグインを導入することで対応できるようです。
BottleでWebsocketする
bottle-websocket

ライブラリのインストールとサンプル

bottle-websocketと、依存しているgevent、gevent-websocketをpipでインストール。




サンプルを参考にテキストに文字を入力したら「echo:」という文字列を付与した応答を送信するプログラムを作成しました。

・app.py

import bottle
from bottle.ext.websocket import GeventWebSocketServer
from bottle.ext.websocket import websocket
app = bottle.Bottle()
@app.route('/')
def main():
    return bottle.static_file('index.html', root='./')
@app.route('/websocket', apply=[websocket])
def echo(ws):
    while True:
        msg = ws.receive()
        if msg is not None:
            ws.send('echo:' + msg)
        else:
            break
app.run(host='localhost', port=8080, reloader=True, debug=True, server=GeventWebSocketServer)

・index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>WebSocket Sample</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(function() {
    if (!window.WebSocket) {
        if (window.MozWebSocket) {
            window.WebSocket = window.MozWebSocket;
        } else {
            $('#result').append("Your browser doesn't support WebSockets.");
        }
    }
    
    ws = new WebSocket('ws://127.0.0.1:8080/websocket');
    ws.onopen = function(evt) {
        $('#result').append('<li>WebSocket connection opened.</li>');
    }
    ws.onmessage = function(evt) {
        $('#result').append('<li>' + evt.data + '</li>');
    }
    ws.onclose = function(evt) {
        $('#result').append('<li>WebSocket connection closed.</li>');
    }
    $('#send').submit(function() {
        ws.send($('input:first').val());
        $('input:first').val('').focus();
        return false;
    });
    $('#message').on('keyup', function() {
        ws.send($('#message').val());
    });
})
</script>
</head>
<body>
    <h3>WebSocket Sample</h3>
    <div>
        <input type="text" id="message" />
    </div>
    <ul id="result"></ul>
</body>
</html>

狙い通りの動作です。

動画をMotion JPEG(multipart jpeg)に変換し、Bottleフレームワークで配信する

こちらの記事で知ったのですが、
OpenCV – Stream video to web browser/HTML page
Motion JPEGという連続して画像を配信する規格があるそうです。

動画ファイルから画像を切り出して加工。
ブラウザに配信するということが簡単に実現できますね。

参考サイトではwebフレームワークにFlaskが使用されていますが、
Bottleを使用して同様の配信を試してみます。

動画ファイルの読み込みにはOpenCVを利用します。

サンプル

サンプルはこのようになりました。

・app.py

import time
import bottle
import cv2
app = bottle.Bottle()
def gen():
    
    cam = cv2.VideoCapture('travelpockets_iceland_land_of_fire_and_ice.mp4')
    while True:
        # 動画から1フレーム分の画像を読み込み
        ret_val, image = cam.read()
        if not ret_val:
            break
        # jpg形式に変換
        flag, frame = cv2.imencode('.jpg', image)
        yield b'--frame\r\n' + b'Content-Type: image/jpeg\r\n\r\n' + bytearray(frame) + b'\r\n\r\n'
        # 連続再生されるのでwaitを入れる
        time.sleep(1/60)
@app.route('/')
def main():
    return bottle.static_file('index.html', root='./')
@app.route('/video_feed')
def video_feed():
    bottle.response.content_type = 'multipart/x-mixed-replace;boundary=frame'
    return gen()
app.run(host='localhost', port=8080, reloader=True, debug=True)

・index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>mjpeg Sample</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h3>mjpeg Sample</h3>
    <div>
        <img src="./video_feed">
    </div>
</body>
</html>

再生する動画はこちらからお借りしました。
https://mazwai.com/video/iceland-%7C-land-of-fire-and-ice/455108


サーバーを起動



ブラウザでhttp://localhost:8080/にアクセスすると、動画のように連続して画像が表示されました。




【参考URL】
OpenCV – Stream video to web browser/HTML page
https://github.com/mrxmamun/camera-live-streaming/blob/master/app.py
Python Live Video Streaming Example

Ryzen + MSI マザーボードで仮想化サポートの有効化(kvm.koの利用)

この構成でパソコンを作成しました。
Ubuntu 18.04 + Ryzen 9の動作確認構成

Ryzen 9 + MSIのマザーボードの組み合わせです。

KVMをインストールして起動したところこんな警告が表示されました。


CPUの仮想化サポートが有効になっていないようです。

BIOSでの設定変更

MSI MPG X570 GAMING PRO CARBON WI-FI ATX マザーボード [AMD X570チップセット搭載] MB4780


上記マザーボードでの設定変更例となります。
起動時にF12(だったはず)を押して、BIOSの設定画面に入ります。

「OC(Over Clock)」の項目を選択。

表示される選択肢の中から「CPU Features」の項目を選択。

「SVM Mode」を「Disabled」から「Enabled」に変更して設定を保存。

これでCPU仮想化が有効となり、kvm.koの読み込みエラーがなくなりました。