モバイルガジェットの環境だけで、WebSocketのチャットができるようにしてみた。
モバイルルータで、iPhone2台とAndroid(IS01)を同一の無線LAN配下とし、これらの端末をWebSocketで結んだ。
WebSocket ServerにはAndroidにインストールしたWSBroadcaster for Android(以下、WSBroadcaster)を、WebSocket ClientにはiPhone上のSafariを使っている。
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」にアクセスするとチャットが開く。
このディレクトリに下に記載する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>
<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;
}
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);
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);
以上。
