ネットワーク 9 (HTML5)

WebSockect

WebSockectによって、ブラウザとサーバ間で双方向・全二重の通信を行なうことができます。

ブラウザのダウンロード

WebSockectを行なうためには、対応したブラウザが必要です。

  1. 開発用のブラウザMozilla Firefox Nightly Buildsをダウンロード
  2. ダウンロードしたファイルを解凍
  3. 解凍したフォルダ内のfirefox.exeを起動

サーバのダウンロード

ターミナルで、以下のコマンドによってサーバプログラムをダウンロードします。

# svn checkout http://pywebsocket.googlecode.com/svn/trunk/ pywebsocket-read-only

サーバプログラム

適当なディレクトリに、以下のプログラムをserver_wsh.pyというファイル名で作成します。

from mod_pywebsocket import msgutil

connections = []

def web_socket_do_extra_handshake(request):
	pass

def web_socket_transfer_data(request):
	connections.append(request)
	while True:
		try:
			message = msgutil.receive_message(request)
		except:
			return
		for con in connections:
			try:
				msgutil.send_message(con, message)
			except:
				connections.remove(con)

HTML

WebSockectの例として、簡単なチャットシステムを作成してみます。
以下のHTMLをchat.htmlというファイル名で保存します。

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>simple chat</title>
</head>
<body>
<h1>
Chat
</h1>
<textarea id = "chat" readonly cols = 20 rows = 10></textarea>
<br>
<input id = "name" type = "text" size = 6 placeholder = "Name">
<input id = "message" type = "text" size = 20 placeholder = "Message">
<botton id = "submitButton" onclick = "submitMessage()" disabled>
Send
</button>
<script type = "text/javascript">
var ws = new WebSocket("ws://localhost/server");
ws.onmessage = function(event) {
	var ci = document.getElementById("chat");
	ci.textContent += event.data + "\n";
};
ws.onopen = function(event) {
	document.getElementById("submitButton").disabled = false;
};
ws.onclose = function(event) {
	document.getElementById("submitButton").disabled = true;
};
function submitMessage() {
	var name = document.getElementById("name").value;
	var message = document.getElementById("message").value;
	ws.send(name + "->" + message);
}
</script>
</body>
</html>

実行方法

  1. 一つ目のターミナルで、以下のコマンドを実行します。
    # cd ~/pywebsocket-read-only/src/mod_pywebsocket
    # export PYTHONPATH=~/pywebsocket-read-only/src:$PYTHONPATH
    # python standalone.py -d server_wsh.pyの或るディレクトリ名
    ここでは、サーバプログラムをホームディレクトリに保存してあるという前提でコマンドを実行してあります。
    他のディレクトリに保存してある場合は、~ をそのディレクトリに変更して実行します。
  2. ブラウザで、chat.htmlを読み込みます。

Prev
index | home
abetmhr@gmail.com