<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebSocket demo</title>
<style>
body {padding: 40px;}
#outputPanel {margin: 10px;padding:10px;background: #eee;border: 1px solid #000;min-height: 300px;}
</style>
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.js"></script>
<link href="../css/jquery-ui.css" rel="stylesheet">
</head>
<body>
<input id='file' type='file'/>
<input id='send' type='button' value='send'/>
<input id='text' type='text' value=''/>
<input id='connect' type='button' value='connect'/>
<input id='sendtext' type='button' value='sendText'/>
<input id='disconnect' type='button' value='disconnect'/>
<div id='disp'></div>
<a id='downloadFile' style='display:none;'></a>
</body>
<script>
$(document).ready(function (){
var console = {log : function(text) {$("#disp").append(text).append("</br>")}};
var demo = {
socket : null, // WebSocket连接对象
host : '', // WebSocket连接 url
connect : function() { // 连接服务器
window.WebSocket = window.WebSocket || window.MozWebSocket;
if (!window.WebSocket) { // 检测浏览器支持
console.log('Error: WebSocket is not supported .');
return;
}
this.socket = new WebSocket(this.host); // 创建连接并注册响应函数
this.socket.onopen = function(){console.log("websocket is opened .");};
this.socket.onmessage = function(message) {
if(typeof message.data === 'string'){
console.log(message.data);
}else{
//, {type:"application/msword"}
var blob = new Blob([message.data]);
$("#downloadFile")[0].download = "downloadFile";
$("#downloadFile")[0].href = URL.createObjectURL(blob);
$("#downloadFile")[0].click();
}
};
this.socket.onclose = function(){
console.log("websocket is closed .");
demo.socket = null; // 清理
};
},
send : function(message) { // 发送消息方法
if (this.socket) {
this.socket.send(message);
return true;
}
console.log('please connect to the server first !!!');
return false;
}
};
demo.host=(window.location.protocol == 'http:') ? 'ws://' : 'wss://' ;
demo.host += window.location.host + '/websocket/HelloWebSocketServlet';
$("#connect").on('click',function (){
if (!demo.socket) demo.connect();
else console.log('websocket already exists .');
});
$("#disconnect").on('click',function (){
if (demo.socket) demo.socket.close();
else console.log('websocket is not found .');
});
$("#sendtext").on('click',function (){
var message = $("#text").val();
if (!message) return;
if (!demo.send(message)) return;
$("#text").val("");
});
$("#send").on('click',function (){
var f = $("#file")[0].files[0];
var reader = new FileReader();
reader.readAsArrayBuffer(f)
//reader.readAsBinaryString(f);
reader.onload = function(){
//var fs = new FileSlicer(reader.result);
//demo.send(f.name);
//for(var i = 0; i < fs.slices; ++i) {
// demo.send(fs.getNextSlice()); // see below
//}
var byteArray = new Uint8Array(reader.result);
demo.send(byteArray.buffer);
console.log( f.name + "[" + f.size + "byte]" + "アップロード完了");
};
});
function FileSlicer(file) {
// randomly picked 1MB slices,
// I don't think this size is important for this experiment
this.sliceSize = 1024*1024;
this.slices = Math.ceil(file.byteLength / this.sliceSize);
this.currentSlice = 0;
this.getNextSlice = function() {
var start = this.currentSlice * this.sliceSize;
var end = Math.min((this.currentSlice+1) * this.sliceSize, file.byteLength);
++this.currentSlice;
return file.slice(start, end);
}
}
});
</script>
</html>
