Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

BottleでWebsocketする

python

なんどか紹介しているPython製軽量WEB鯖Bottleで、Websocketを扱う方法です。

実際のところ

環境導入

$ pip install bottle-websocket

サンプル実行

公式提供のサンプルはgithubにあります。
実行には別途、geventという並行処理系ライブラリが必要です。

$ pip install gevent
$ pip install gevent-websocket

まず、python。
"echo.py"

from bottle import get, run, template
from bottle.ext.websocket import GeventWebSocketServer
from bottle.ext.websocket import websocket

@get('/')
def index():
    return template('index')

@get('/websocket', apply=[websocket])
def echo(ws):
    while True:
        msg = ws.receive()
        if msg is not None:
            ws.send(msg)
        else: break

run(host='127.0.0.1', port=8080, server=GeventWebSocketServer)

つぎにフロントエンド"index.tpl"

<!doctype html>
<head>
    <meta charset="utf-8" />
    <title>WebSocket Echo Test</title>

    <style>
        li { list-style: none; }
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            if (!window.WebSocket) {
                if (window.MozWebSocket) {
                    window.WebSocket = window.MozWebSocket;
                } else {
                    $('#messages').append("<li>Your browser doesn't support WebSockets.</li>");
                }
            }
            ws = new WebSocket('ws://127.0.0.1:8080/websocket');
            ws.onopen = function(evt) {
                $('#messages').append('<li>WebSocket connection opened.</li>');
            }
            ws.onmessage = function(evt) {
                $('#messages').append('<li>' + evt.data + '</li>');
            }
            ws.onclose = function(evt) {
                $('#messages').append('<li>WebSocket connection closed.</li>');
            }
            $('#send').submit(function() {
                ws.send($('input:first').val());
                $('input:first').val('').focus();
                return false;
            });
        });
    </script>
</head>
<body>
    <h2>Bottle Websockets!</h2>
    <form id="send" action='.'>
        <input type="text" value="message" />
        <input type="submit" value="Send" />
    </form>
    <div id="messages"></div>
</body>
</html>

実行はフツーのbottle同様、本体を実行するだけ。

$ python echo.py