<%@ 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>