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

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

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


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



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


$ pip3 install gevent
$ pip3 install gevent-websocket
$ pip3 install bottle-websocket




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

・app.py


  1. import bottle
  2. from bottle.ext.websocket import GeventWebSocketServer
  3. from bottle.ext.websocket import websocket
  4. app = bottle.Bottle()
  5. @app.route('/')
  6. def main():
  7.     return bottle.static_file('index.html', root='./')
  8. @app.route('/websocket', apply=[websocket])
  9. def echo(ws):
  10.     while True:
  11.         msg = ws.receive()
  12.         if msg is not None:
  13.             ws.send('echo:' + msg)
  14.         else:
  15.             break
  16. app.run(host='localhost', port=8080, reloader=True, debug=True, server=GeventWebSocketServer)




・index.html


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <title>WebSocket Sample</title>
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  9. <script>
  10. $(function() {
  11.     if (!window.WebSocket) {
  12.         if (window.MozWebSocket) {
  13.             window.WebSocket = window.MozWebSocket;
  14.         } else {
  15.             $('#result').append("Your browser doesn't support WebSockets.");
  16.         }
  17.     }
  18.     
  19.     ws = new WebSocket('ws://127.0.0.1:8080/websocket');
  20.     ws.onopen = function(evt) {
  21.         $('#result').append('<li>WebSocket connection opened.</li>');
  22.     }
  23.     ws.onmessage = function(evt) {
  24.         $('#result').append('<li>' + evt.data + '</li>');
  25.     }
  26.     ws.onclose = function(evt) {
  27.         $('#result').append('<li>WebSocket connection closed.</li>');
  28.     }
  29.     $('#send').submit(function() {
  30.         ws.send($('input:first').val());
  31.         $('input:first').val('').focus();
  32.         return false;
  33.     });
  34.     $('#message').on('keyup', function() {
  35.         ws.send($('#message').val());
  36.     });
  37. })
  38. </script>
  39. </head>
  40. <body>
  41.     <h3>WebSocket Sample</h3>
  42.     <div>
  43.         <input type="text" id="message" />
  44.     </div>
  45.     <ul id="result"></ul>
  46. </body>
  47. </html>




狙い通りの動作です。

a15_01.png


関連記事

コメント

非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ