SlideShare a Scribd company logo
1 of 32
Download to read offline
WebSocketで始めるPython


            2011-11-19
 HTML5 プログラミング生放送勉強会 第11回@大阪
お前、誰よ
●
  稲田 尚也 (@naoina)
●
  若さ溢れる0x19歳
●
  京都のPythonista
●
  kyoto.py
今日は
WebSocket
について話します
WebSocketとは
●
    WEBブラウザで使えるソケット
●
    まだ規格は草案(ドラフト)段階
●
    各ブラウザベンダーが先行実装
WebSocketとは
●
    WEBブラウザで使えるソケット
●
    まだ規格は草案(ドラフト)段階
●
    各ブラウザベンダーが先行実装
    ※Iなんとかさんはお察しください
WebSocketとは
●
    WEBブラウザで使えるソケット
●
    まだ規格は草案(ドラフト)段階
●
    各ブラウザベンダーが先行実装
     ※Iなんとかさんはお察しください
●
    HTML5ではない
WebSocket ≠ HTML5
●
    元はHTML5規格
●
    後にAPIはW3Cが、プロトコルは
    IETFが策定することに
なにが嬉しいか
●
    双方向通信
●
    リアルタイム性
●
    軽いプロトコル
プロトコル
プロトコル




           引用: http://ja.wikipedia.org/wiki/WebSocket



基本的に各プロトコルバージョン間での互換性はない
プロトコル
●
    TCPで通信
●
    80番ポートまたは443番ポート
●
    文字列およびバイナリの送受信
●
    通常のソケットとしては使えない
WebSocketサーバー
WebSocketサーバー
●
    Node.js + Socket.IO
●
    pywebsocket
●
    gevent-websocket
●
    Meinheld
●
    Tornado
WebSocketサーバー
●
    Node.js + Socket.IO
●
    pywebsocket
●
    gevent-websocket
●
    meinheld
●
    tornado
簡単な例
クライアント(ブラウザ)側
 1   var ws = new WebSocket('ws://127.0.0.1/chat');
 2
 3   ws.onopen = function() {
 4       console.log("open");
 5   }
 6
 7   ws.onmessage = function(msg) {
 8       console.log("message received: " + msg.data);
 9   }
10
11   ws.onclose = function() {
12       console.log("closed");
13   }
14
15   ws.onerror = function() {
16       console.log("error");
17   }
18
19   ws.send("ぐだぽよ");
サーバー側
 1   import tornado.ioloop
 2
 3   from tornado.web import Application
 4   from tornado.websocket import WebSocketHandler
 5
 6
 7   class Handler(WebSocketHandler):
 8       def open(self):
 9           ...
10
11       def on_message(self, msg):
12           ...
13           self.write_message(msg)
14
15       def on_close(self):
16           ...
17
18   app = Application([
19       (r"/chat", Handler),
20       ])
21
22   if __name__ == '__main__':
23       app.listen(8080)
24       tornado.ioloop.IOLoop.instance().start()
ね、簡単でしょ?
Node.jsとSocket.IO使った方が
 簡単とか言わないでください
One more thing
WebSocketを使った
ニコ生コメントビューア
すでにあると面白くないので
  ググッて調べました
( ^ω^)………
無さそうだったので作ってみました
ソースコード
https://github.com/naoina/html5-pronama-demo
解説
まとめ
●
    WebSocketは難しくない
●
    Pythonを使えば簡単にWebSocket
    サーバーが書ける
●
    よってPythonを使うと幸せになる
質問?
ありがとうございました

More Related Content

What's hot

Perlワンライナーで全てのモジュールにuse v5.8.0つける!
Perlワンライナーで全てのモジュールにuse v5.8.0つける!Perlワンライナーで全てのモジュールにuse v5.8.0つける!
Perlワンライナーで全てのモジュールにuse v5.8.0つける!
debug-ito
 
JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
Shumpei Shiraishi
 
JasmineによるJavascriptテスト駆動開発
JasmineによるJavascriptテスト駆動開発JasmineによるJavascriptテスト駆動開発
JasmineによるJavascriptテスト駆動開発
Yoichi Toyota
 

What's hot (20)

Visualizenetworktraffic 20181108
Visualizenetworktraffic 20181108Visualizenetworktraffic 20181108
Visualizenetworktraffic 20181108
 
[Basic 6] DNS / ソケット通信 / その他
[Basic 6] DNS / ソケット通信 / その他[Basic 6] DNS / ソケット通信 / その他
[Basic 6] DNS / ソケット通信 / その他
 
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみようWebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
 
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャーNode.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
 
Vimはこわくない
VimはこわくないVimはこわくない
Vimはこわくない
 
Perlワンライナーで全てのモジュールにuse v5.8.0つける!
Perlワンライナーで全てのモジュールにuse v5.8.0つける!Perlワンライナーで全てのモジュールにuse v5.8.0つける!
Perlワンライナーで全てのモジュールにuse v5.8.0つける!
 
virtio勉強会 #1 「virtioの基本的なところ(DRAFT版)」
virtio勉強会 #1 「virtioの基本的なところ(DRAFT版)」virtio勉強会 #1 「virtioの基本的なところ(DRAFT版)」
virtio勉強会 #1 「virtioの基本的なところ(DRAFT版)」
 
[Intermediate 03] MinChain - 教育用ブロックチェーンの紹介
[Intermediate 03] MinChain - 教育用ブロックチェーンの紹介[Intermediate 03] MinChain - 教育用ブロックチェーンの紹介
[Intermediate 03] MinChain - 教育用ブロックチェーンの紹介
 
AndroidでWebSocket
AndroidでWebSocketAndroidでWebSocket
AndroidでWebSocket
 
WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3
 
JavaOne2014報告会資料
JavaOne2014報告会資料JavaOne2014報告会資料
JavaOne2014報告会資料
 
JavaOne2016報告
JavaOne2016報告JavaOne2016報告
JavaOne2016報告
 
JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
 
ヤギにサーバーを管理してもらう話
ヤギにサーバーを管理してもらう話ヤギにサーバーを管理してもらう話
ヤギにサーバーを管理してもらう話
 
YOLO V3で独自データセットを学習させて物体検出 / Yolo V3 with your own dataset
YOLO V3で独自データセットを学習させて物体検出 / Yolo V3 with your own datasetYOLO V3で独自データセットを学習させて物体検出 / Yolo V3 with your own dataset
YOLO V3で独自データセットを学習させて物体検出 / Yolo V3 with your own dataset
 
JasmineによるJavascriptテスト駆動開発
JasmineによるJavascriptテスト駆動開発JasmineによるJavascriptテスト駆動開発
JasmineによるJavascriptテスト駆動開発
 
Bp study39 nodejs
Bp study39 nodejsBp study39 nodejs
Bp study39 nodejs
 
プロフェッショナルSSL/TLS 7章
プロフェッショナルSSL/TLS 7章プロフェッショナルSSL/TLS 7章
プロフェッショナルSSL/TLS 7章
 
Bitcoin testnet
Bitcoin testnetBitcoin testnet
Bitcoin testnet
 
仮想通貨テストベッドネットワークの構築
仮想通貨テストベッドネットワークの構築仮想通貨テストベッドネットワークの構築
仮想通貨テストベッドネットワークの構築
 

Similar to HTML5-pronama-study

120512 metro styleapp_javascript
120512 metro styleapp_javascript120512 metro styleapp_javascript
120512 metro styleapp_javascript
Takayoshi Tanaka
 
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるNetラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
david9142
 
.NET 5 勉強会 ~.NET Framework から .NET へ~
.NET 5 勉強会 ~.NET Framework から .NET へ~.NET 5 勉強会 ~.NET Framework から .NET へ~
.NET 5 勉強会 ~.NET Framework から .NET へ~
Fujio Kojima
 
Firefox mobile for android internals
Firefox mobile for android internalsFirefox mobile for android internals
Firefox mobile for android internals
Makoto Kato
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
 
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作るnode+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
 

Similar to HTML5-pronama-study (20)

PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocketPlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
 
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリWebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
 
120512 metro styleapp_javascript
120512 metro styleapp_javascript120512 metro styleapp_javascript
120512 metro styleapp_javascript
 
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるNetラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
 
Node予備校 vol.1 名古屋
Node予備校 vol.1 名古屋Node予備校 vol.1 名古屋
Node予備校 vol.1 名古屋
 
Web socketドロンくん その後-
Web socketドロンくん その後-Web socketドロンくん その後-
Web socketドロンくん その後-
 
RoboVM
RoboVMRoboVM
RoboVM
 
20130315 abc firefox_os
20130315 abc firefox_os20130315 abc firefox_os
20130315 abc firefox_os
 
OWIN - .NETにおけるPSGI -
OWIN - .NETにおけるPSGI -OWIN - .NETにおけるPSGI -
OWIN - .NETにおけるPSGI -
 
WebRTC meetup Tokyo 1
WebRTC meetup  Tokyo 1WebRTC meetup  Tokyo 1
WebRTC meetup Tokyo 1
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
 
Nodeにしましょう
NodeにしましょうNodeにしましょう
Nodeにしましょう
 
.NET 5 勉強会 ~.NET Framework から .NET へ~
.NET 5 勉強会 ~.NET Framework から .NET へ~.NET 5 勉強会 ~.NET Framework から .NET へ~
.NET 5 勉強会 ~.NET Framework から .NET へ~
 
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC WebアプリケーションPlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
 
Firefox OS and Web server
Firefox OS and Web serverFirefox OS and Web server
Firefox OS and Web server
 
メトロスタイルアプリ開発 最初の一歩
メトロスタイルアプリ開発最初の一歩メトロスタイルアプリ開発最初の一歩
メトロスタイルアプリ開発 最初の一歩
 
Firefox mobile for android internals
Firefox mobile for android internalsFirefox mobile for android internals
Firefox mobile for android internals
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
 
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作るnode+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
 
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
 

More from Naoya Inada (8)

べき等データベースマイグレーションツールmigu
べき等データベースマイグレーションツールmiguべき等データベースマイグレーションツールmigu
べき等データベースマイグレーションツールmigu
 
Tokyo Otaku Mode での PayPal 活用事例
Tokyo Otaku Mode での PayPal 活用事例Tokyo Otaku Mode での PayPal 活用事例
Tokyo Otaku Mode での PayPal 活用事例
 
シンプルなシステム構成フレームワークalnair
シンプルなシステム構成フレームワークalnairシンプルなシステム構成フレームワークalnair
シンプルなシステム構成フレームワークalnair
 
kyotovim#1
kyotovim#1kyotovim#1
kyotovim#1
 
dvcs-kyoto
dvcs-kyotodvcs-kyoto
dvcs-kyoto
 
rucs_vim LT
rucs_vim LTrucs_vim LT
rucs_vim LT
 
Python Kyoto study LT
Python Kyoto study LTPython Kyoto study LT
Python Kyoto study LT
 
Python Kyoto study
Python Kyoto studyPython Kyoto study
Python Kyoto study
 

HTML5-pronama-study