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

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

作成:2010-12-17 14:26
更新:2010-12-17 14:27

■WebSocketを使って通信をしてみる

では、実際にWebSocketを利用するWebページを作りましょう。「example」フォルダの中にHTMLファイルを作成し、下のソースコードを記述してください。そしてpywebsocketのサーバーを起動し、
http://localhost:8800/test.html
このようにアドレスを指定してアクセスをしましょう。ここでは8800ポートでサーバーを起動していますので、このように「http://localhost:8800」とアドレスを指定する必要があります。

ページが表示されると同時に、画面に「open websocket!」というアラートが表示されます。これが現れたら、無事にWebSocketサーバーに接続し、通信を開始した、ということです。もし「close websocket.」とアラートが現れたら、アクセスに失敗して接続が切られています。アドレスやサーバーの起動状態などを再度確認しましょう。

無事に接続できたら、入力フィールドに適当にテキストを書いてボタンを押してください。サーバーにそれが送られ、そのまま送り返されて「message...」というところに表示されます。ちゃんとサーバーとやり取りできていることがわかりますね。

まぁ、見た限りでは、Ajaxとの違いなどもよくわからないかも知れません。が、「ページにアクセスすると接続を開始し、いつでもボタンを押せばサーバーに送信し結果をうけとれる」ということはなんとなくわかるでしょう。

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

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

●プログラム・リスト●

<!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/echo");
			socket.onopen = function(e){
				alert("open websocket!");
			}
			socket.onmessage = function(e){
				var p = document.getElementById("msg");
				p.innerHTML = "送られたメッセージ：" + e.data;
			}
			socket.onerror = function(e){
				alert("error!!");
			}
			socket.onclose = function(e){
				alert("close websocket.");
			}
		}
		
		function action(){
			var str = document.getElementById("text1").value;
			socket.send(str);
		}
		
		init();
		//-->
		</script>
	</head>
	<body>
		<h1>サンプル</h1>
		<p id="msg">message...</p>
		<input type="text" id="text1">
		<input type="button" onclick="action();" value="send">
	</body>
</html>
※関連コンテンツ

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