« 2011年11月 | メイン | 2012年01月 »

2011年12月 アーカイブ

2011年12月19日

Androidで動かせるWebSocket Server「WSBroadcaster for Android」

「Android上で動くWebSocketサーバを作った」という話はいくつか聞いていたけど、実装例がなかなか出てこないので自分で作った。
下手に作り込んで汎用性がなくなるのも嫌なので、WebSocketのメッセージの中継に機能を絞っています。WebSocketのコアな部分はJettyにお任せ。通信キャリアが変なことをしていなければグローバルなIPアドレスでも使えるはずだけど、手元に環境がないため確認はできてない。また、所有している端末だと、80番ポートで起動できない。LInuxでは、80番ポートを開くためには権限が必要なので、多分これに起因する現象だと思う。rootedな端末ならもしかして起動できるかもしれない。

これで、出先で突然WebSocket Servserが必要になっても一安心ですね。
使い方
メイン画面は、上に起動/停止用のボタン、下にはServerのステータスと設定値が表示されている。

Port Numberはそのままの意味。

Response Typeは、受信したメッセージをどう扱うかを選択できる。「Nothing」は「何もしない」、「Echo」は「送信元に送り返す」、「Other」は「送信元を含まない全ての接続しているClientに再送信」、「All」は「送信元を含む全ての接続しているClientに再送信」、となっている。

Reriodic Messageは、全Clientに対してServerから定期的にメッセージを送るか否か。Interval of Reriodic Messageは、定期的なメッセージの間隔を秒で指定し、Text of Reriodic Messageはその内容。

設定値の変更は、オプションメニューから開ける設定画面で行う。
ToDo
ReadMeを書く。
メッセージを受け取った場合の動作をどうするのか。
仮に、ping frame送信機能を実装した場合、pong frame受信時の挙動をどうするのか。

2011年12月25日

モバイルガジェットだけでWebSocketネットワーク

モバイルガジェットの環境だけで、WebSocketのチャットができるようにしてみた。
モバイルルータで、iPhone2台とAndroid(IS01)を同一の無線LAN配下とし、これらの端末をWebSocketで結んだ。
WebSocket ServerにはAndroidにインストールしたWSBroadcaster for Android(以下、WSBroadcaster)を、WebSocket ClientにはiPhone上のSafariを使っている。
WSBroadcasterの設定は以下の通り。
HTTP Path      : html
WebSocket Path : ws
Port Number    : 40320
Response Type  : All
SDカード直下のディレクトリ「WSBroadcaster」が、HTTP Serverの公開ディレクトリとなる。
このディレクトリに下に記載するHTML,CSS,JSを保存後、WSBroadcasterを起動し更に「Start」ボタンでServerを起動する。
iPhoneのSafari等のWebSocketに対応したブラウザで「http://[Androidのアドレス]:40320/html/index.html」にアクセスするとチャットが開く。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>WebSocketChat</title>
<link type="text/css" href="common.css" rel="stylesheet">
<script src="common.js" type="text/javascript"></script>
</head>
<body>
<div><input type="text" id="message" /><input type="button" id="send" value="send" /></div>
<div id="messages"></div>
</body>
</html>
common.css
#message{
  width:80%;
  margin:1% 5%;
  font-size:24px;
}
#messages{
  width:80%;
  height:400px;
  margin:1% 5%;
  font-size:24px;
  overflow:hidden;
  border:0px none transparent;
}
#send{
  width:80%;
  height:50px;
  margin:1% 5%;
  font-size:24px;
}
common.js
var ws;

function $(id){
  return document.getElementById(id);
}

function onOpenWebSocket(){
  $("send").addEventListener("click",sendMessage,false);
  dispMessage("connected");
}

function onCloseWebSocket(){
  $("send").removeEventListener("click",sendMessage,false);
  dispMessage("disconnected");
}

function onMessageWebSocket(event){
  var msg=event.data;
  if(msg==""){return;}
  dispMessage("> "+msg);
}

function onUnload(){
  ws.close();
}

function dispMessage(msg){
  var elem=document.createElement("div");
  elem.appendChild(document.createTextNode(msg));
  if($("messages").hasChildNodes()){
    $("messages").insertBefore(elem,$("messages").firstChild);
  }else{
    $("messages").appendChild(elem);
  }
}

function sendMessage(){
  var message=$("message").value;
  if(message==""){return;}
  ws.send(message);
  $("message").value="";
}

function initial(){

  var protocol=(location.protocol=="https:")?"wss":"ws";

  var host=location.host;

  var url=protocol+"://"+host+"/ws";

  ws=new WebSocket(url);

  ws.addEventListener("open",onOpenWebSocket,false);
  ws.addEventListener("close",onCloseWebSocket,false);
  ws.addEventListener("message",onMessageWebSocket,false);

  window.addEventListener("unload",onUnload,false);

}

window.addEventListener("load",initial,false);
以上。
Google

タグ クラウド