Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u5bfe\u3057\u3066\u3001\u975e\u540c\u671f\u901a\u4fe1\u3092\u5b9f\u73fe\u3059\u308b\u65b9\u6cd5\u306e\u4e00\u3064\u3067\u3059\u3002\u975e\u540c\u671f\u901a\u4fe1\u3068\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u3092\u66f4\u65b0\u3057\u306a\u304f\u3066\u3082\u81ea\u52d5\u7684\u306b\u56f3\u8868\u3084\u30c6\u30ad\u30b9\u30c8\u306a\u3069\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u66f4\u65b0\u3055\u308c\u3066\u3044\u304f\u4ed5\u7d44\u307f\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u3053\u3053\u3067\u306f\u3001\u30ed\u30fc\u30ab\u30eb\u306a\u3069\u306b\u4fdd\u5b58\u3055\u308c\u3066\u3044\u308b\u9023\u756a\u306e\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\uff08a1.png, a2.png, a3.png…\uff09\u306a\u3069\u3092\u5b9a\u671f\u7684\u306b\u66f4\u65b0\u3057\u3066\u3044\u304f\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8ff0\u3079\u307e\u3059\u3002\u30b5\u30fc\u30d0\u30b5\u30a4\u30c9\uff08python\u5074\uff09\u3067\u753b\u50cf\u3092\u8aad\u307f\u8fbc\u307f\u3001\u30d0\u30a4\u30ca\u30ea\u30c7\u30fc\u30bf\u306b\u5909\u63db\u3057\u3001\u305d\u308c\u3092\u30ed\u30fc\u30ab\u30eb\u5074\uff08html\uff09\u306b\u9010\u6b21\u9001\u4fe1\u3057\u3001\u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u3066\u3044\u304d\u307e\u3059\uff08\u30d0\u30a4\u30ca\u30ea\u30c7\u30fc\u30bf\u3068\u306f\u3001\u753b\u50cf\u3092\u4e00\u7a2e\u306e\u6587\u5b57\u5217\u306b\u5909\u63db\u3057\u305f\u30c7\u30fc\u30bf\u3068\u306a\u308a\u307e\u3059\uff09\u3002<\/p>\n
<\/br><\/p>\n
HTML\u5074\uff08\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9: index.html\uff09<\/p>\n
<!doctype html>\r\n<head>\r\n <meta charset=\"utf-8\" \/>\r\n <title>WebSocket: sending image file<\/title>\r\n\r\n <!-- WebSocket -->\r\n <script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.4\/jquery.min.js\"><\/script>\r\n <script>\r\n\r\n $(document).ready(function() {\r\n\r\n \/\/ WebSocket\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6\u304b\u30c1\u30a7\u30c3\u30af\r\n if (!window.WebSocket) {\r\n \/\/ Firexox\u304b\u30c1\u30a7\u30c3\u30af\r\n if (window.MozWebSocket) {\r\n \/\/ Firefox\u3060\u3063\u305f\u3089\u3001MozWebSocket\u3092\u5229\u7528\r\n window.WebSocket = window.MozWebSocket;\r\n } else {\r\n \/\/ Firefox\u3067\u306a\u3051\u308c\u3070\u3001Websocket\u3092\u5229\u7528\u4e0d\u53ef\u3068\u30e1\u30c3\u30bb\u30fc\u30b8\u8868\u793a\r\n $('#mes01').append(\"<li>Your browser doesn't support WebSockets.<\/li>\");\r\n }\r\n }\r\n\r\n \/\/ WebSocket\u306e\u5b9a\u7fa9\uff08\u30b5\u30fc\u30d0\u306epy\u30d5\u30a1\u30a4\u30eb\u306erun\u3068\u5408\u308f\u305b\u308b\u3053\u3068\uff09\r\n ws = new WebSocket('ws:\/\/localhost:8000\/websocket');\r\n\r\n \/\/ \u63a5\u7d9a\u6642\u306e\u51e6\u7406\r\n ws.onopen = function(evt) {\r\n $('#mes01').append('<p>WebSocket\u3092\u63a5\u7d9a\u3057\u307e\u3057\u305f\u3002<\/p>');\r\n }\r\n\r\n \/\/ \u30b5\u30fc\u30d0\u304b\u3089\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u53d7\u3051\u53d6\u3063\u305f\u6642\u306e\u51e6\u7406\r\n ws.onmessage = function(evt) {\r\n\r\n \/\/ \u753b\u50cf\u306e\u8868\u793a\uff08\u30d0\u30a4\u30ca\u30ea\uff09\r\n blob = evt.data \/\/ <- python\u304b\u3089\u53d7\u3051\u53d6\u3063\u305f\u30d0\u30a4\u30ca\u30ea\u306e\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\r\n var reader = new FileReader();\r\n reader.onload = function(){\r\n var b64 = reader.result;\r\n }\r\n reader.readAsDataURL(blob);\r\n reader.onload = function(evt) {\r\n var data_url = reader.result;\r\n\t\t\t\t $('#img1').attr('src',data_url);\r\n\t\t\t\t var base64 = btoa(data_url);\r\n\t\t\t }\r\n\r\n }\r\n\r\n \/\/ \u5207\u65ad\u6642\u306e\u51e6\u7406\r\n ws.onclose = function(evt) {\r\n $('#mes01').append('<p>WebSocket\u3092\u5207\u65ad\u3057\u307e\u3057\u305f\u3002<\/p>');\r\n }\r\n });\r\n <\/script>\r\n<\/head>\r\n\r\n<!-- HTML\u8a18\u8ff0\u7b87\u6240 -->\r\n<body>\r\n <div id=\"mes01\"><\/div>\r\n <img id=\"img1\"\/>\r\n<\/body>\r\n\r\n<\/html><\/pre>\n\u306a\u304a\u3001div\u9818\u57df\u306b\u6587\u5b57\u3092\u30b9\u30bf\u30c3\u30af\u3055\u305b\u305f\u3044\u5834\u5408\u3068\u3001\u4e0a\u66f8\u304d\u3057\u305f\u3044\u5834\u5408\u304c\u3042\u308b\u3002\u30b9\u30bf\u30c3\u30af\u306fappend, \u66f8\u304d\u63db\u3048\u306ftext\u3092\u5229\u7528\u3059\u308b\u3002\u4ee5\u4e0b\u306f\u3001id=mes01\u3068\u540d\u4ed8\u3051\u3089\u308c\u305f\u3068\u3053\u308d\u306b\u3001p\u30bf\u30b0\u3092\u30b9\u30bf\u30c3\u30af\u306a\u3044\u3057\u306f\u4e0a\u66f8\u304d\u3059\u308b\u51e6\u7406\u3067\u3042\u308b\u3002ws.onmessage\u306b\u5165\u308c\u3066\u307f\u3066\u3001\u51fa\u529b\u3092\u78ba\u8a8d\u3059\u308b\u3068\u826f\u3044\u3002<\/p>\n
\r\n$('#mes01').append('\u3053\u308c\u306f\u30b9\u30bf\u30c3\u30af<\/p>');\r\n$('#mes01').text('
\u3053\u308c\u306f\u4e0a\u66f8\u304d<\/p>');\r\n<\/pre>\n
<\/br>
\nbottle-python\u5074\uff08\u30b5\u30fc\u30d0\u30b5\u30a4\u30c9: test.python\uff09<\/p>\n
from bottle import route, run, get, post, request, static_file, debug, template\r\nfrom bottle.ext.websocket import GeventWebSocketServer\r\nfrom bottle.ext.websocket import websocket\r\nimport time\r\nimport io\r\nfrom PIL import Image\r\n\r\n# *** \u9759\u7684\u30d5\u30a1\u30a4\u30eb\u3092\u6271\u3046\u305f\u3081\u306e\u8a2d\u5b9a ***\r\n@route('\/aaa\/<filename:path>') # py\u304c\u3042\u308b\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u8d77\u70b9\u3068\u3057\u305f\u30d1\u30b9\u6307\u5b9a\r\ndef static(filename):\r\n # \u30d5\u30eb\u30d1\u30b9\u3067\u3001\u9759\u7684\u30d5\u30a1\u30a4\u30eb\uff08\u753b\u50cf\u306a\u3069\uff09\u304c\u3042\u308b\u5834\u6240\u3092\u6307\u5b9a\uff08pwd\u30b3\u30de\u30f3\u30c9\u3067\u63a2\u3059\u3068\u826f\u3044\uff09\r\n return static_file(filename, root=\"\/Users\/omae\/Desktop\/main\/ResearchProgramm\/JSPrac\/bottle_websocket_img\/aaa\")\r\n\r\n\r\n@get('\/')\r\ndef index():\r\n return template('index.html')\r\n\r\n# websocket\r\nimg_id=0\r\n@get('\/websocket', apply=[websocket])\r\ndef echo(ws):\r\n global img_id\r\n\r\n # while\u306b\u3066\u975e\u540c\u671f\u901a\u4fe1\u3092\u7121\u9650\u30eb\u30fc\u30d7\u5316\r\n while True:\r\n\r\n # \u753b\u50cf\u3092\u30ed\u30fc\u30c9\u3057\u30d0\u30a4\u30ca\u30ea\u5316\r\n tmpimg = Image.open(\".\/aaa\/chart\"+str(img_id)+\".png\")\r\n with io.BytesIO() as output:\r\n tmpimg.save(output,format=\"PNG\")\r\n contents = output.getvalue()#\u30d0\u30a4\u30ca\u30ea\u53d6\u5f97\r\n\r\n # HTML\u5074\u3078\u753b\u50cf\uff08\u30d0\u30a4\u30ca\u30ea\u30c7\u30fc\u30bf\uff09\u3092\u9001\u4fe1\r\n ws.send(contents)\r\n\r\n # \u753b\u50cfid\u306e\u5909\u66f4\u3068\u901a\u4fe1\u9593\u9694\u306e\u8a2d\u5b9a\r\n img_id = img_id + 1\r\n time.sleep(0.1)\r\n\r\n# \u30b5\u30fc\u30d0\u8d77\u52d5\r\nrun(host=\"localhost\", port=8000, server=GeventWebSocketServer)<\/pre>\nWebSocket\u3068\u306f Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u5bfe\u3057\u3066\u3001\u975e\u540c\u671f\u901a\u4fe1\u3092\u5b9f\u73fe\u3059\u308b\u65b9\u6cd5\u306e\u4e00\u3064\u3067\u3059\u3002\u975e\u540c\u671f\u901a\u4fe1\u3068\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u3092\u66f4\u65b0\u3057\u306a\u304f\u3066\u3082\u81ea\u52d5\u7684\u306b\u56f3\u8868\u3084\u30c6\u30ad\u30b9\u30c8\u306a\u3069\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u66f4\u65b0\u3055\u308c\u3066\u3044\u304f\u4ed5\u7d44\u307f\u3068\u306a\u308a\u307e\u3059\u3002 <\/p><\/div>\n