libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

WebSocketによるクライアント＝サーバー通信 (7/7)

作成:2010-12-17 15:44
更新:2010-12-17 15:45

■超ミニミニ・チャットシステムを作る

応用その２として、大勢の人がアクセスして会話する「チャットシステム」を作ってみましょう。下にサーバースクリプトとHTMLのソースコードを掲載しておきます。今回は、「chat_wsh.py」というファイル名でスクリプトを作ってください。

HTMLページにアクセスし、メッセージを送ると、それが下に追加されていきます。同時に複数のブラウザからアクセスすると、それらすべてにメッセージが送信されます。

ここでは、web_socket_do_extra_handshake関数で、接続されたrequestを配列に追加しています。そしてweb_socket_transfer_dataでは、繰り返しを使い、配列のすべての接続に対してsend_messageを実行しています。ただし、接続が切れることも考え、エラーが起きたら配列からrequestを取り除いています。

こんなに短いスクリプトで、一応動くチャットシステムが作れてしまうのですから、WebSocketの力はなかなか強力であることがわかるでしょう。接続すれば、いつでも好きなときに送信したり受け取ったりできる双方向通信を一度使うと、Ajaxには戻れなくなってしまいますよきっと。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※サーバースクリプト（char_wsh.py）


from mod_pywebsocket import msgutil

arr = []

def web_socket_do_extra_handshake(request):
    arr.append(request)
    pass

def web_socket_transfer_data(request):
    while True:
        s = msgutil.receive_message(request)
        for connect in arr:
            try:
                msgutil.send_message(connect, s)
            except:
                arr.remove(connect)


※HTMLファイル

<!DOCTYPE html>
	<head>
		<meta charset="utf-8" />
		<title>Sample Page</title>
		<script type="text/javascript">
		<!--
		var socket;
		
		function init(){
			socket = new WebSocket("ws://localhost:8800/chat");
			socket.onmessage = function(e){
				var p = document.getElementById("msg");
				var s = p.innerHTML
				p.innerHTML = e.data + "<br>" + s;
			}
		}
		
		function action(){
			var str = document.getElementById("text1").value;
			socket.send(str);
		}
		
		init();
		//-->
		</script>
	</head>
	<body>
		<h1>サンプル</h1>
		<input type="text" id="text1">
		<input type="button" onclick="action();" value="send">
		<hr>
		<p id="msg">message...</p>
	</body>
</html>
※関連コンテンツ

「JavaScriptによるHTML5プログラミング入門」に戻る