back
WebSocketによるクライアント＝サーバー通信 (3/7)
■WebSocketを使って通信をしてみる
では、実際にWebSocketを利用するWebページを作りましょう。「example」フォルダの中にHTMLファイルを作成し、下のソースコードを記述してください。そしてpywebsocketのサーバーを起動し、
ページが表示されると同時に、画面に「open websocket!」というアラートが表示されます。これが現れたら、無事にWebSocketサーバーに接続し、通信を開始した、ということです。もし「close websocket.」とアラートが現れたら、アクセスに失敗して接続が切られています。アドレスやサーバーの起動状態などを再度確認しましょう。
無事に接続できたら、入力フィールドに適当にテキストを書いてボタンを押してください。サーバーにそれが送られ、そのまま送り返されて「message...」というところに表示されます。ちゃんとサーバーとやり取りできていることがわかりますね。
まぁ、見た限りでは、Ajaxとの違いなどもよくわからないかも知れません。が、「ページにアクセスすると接続を開始し、いつでもボタンを押せばサーバーに送信し結果をうけとれる」ということはなんとなくわかるでしょう。
http://localhost:8800/test.htmlこのようにアドレスを指定してアクセスをしましょう。ここでは8800ポートでサーバーを起動していますので、このように「http://localhost:8800」とアドレスを指定する必要があります。
ページが表示されると同時に、画面に「open websocket!」というアラートが表示されます。これが現れたら、無事にWebSocketサーバーに接続し、通信を開始した、ということです。もし「close websocket.」とアラートが現れたら、アクセスに失敗して接続が切られています。アドレスやサーバーの起動状態などを再度確認しましょう。
無事に接続できたら、入力フィールドに適当にテキストを書いてボタンを押してください。サーバーにそれが送られ、そのまま送り返されて「message...」というところに表示されます。ちゃんとサーバーとやり取りできていることがわかりますね。
まぁ、見た限りでは、Ajaxとの違いなどもよくわからないかも知れません。が、「ページにアクセスすると接続を開始し、いつでもボタンを押せばサーバーに送信し結果をうけとれる」ということはなんとなくわかるでしょう。
(by. SYODA-Tuyano.)
※リストが表示されない場合
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>
| << 前へ | 次へ >> |