- 浏览: 1447065 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (691)
- linux (207)
- shell (33)
- java (42)
- 其他 (22)
- javascript (33)
- cloud (16)
- python (33)
- c (48)
- sql (12)
- 工具 (6)
- 缓存 (16)
- ubuntu (7)
- perl (3)
- lua (2)
- 超级有用 (2)
- 服务器 (2)
- mac (22)
- nginx (34)
- php (2)
- 内核 (2)
- gdb (13)
- ICTCLAS (2)
- mac android (0)
- unix (1)
- android (1)
- vim (1)
- epoll (1)
- ios (21)
- mysql (3)
- systemtap (1)
- 算法 (2)
- 汇编 (2)
- arm (3)
- 我的数据结构 (8)
- websocket (12)
- hadoop (5)
- thrift (2)
- hbase (1)
- graphviz (1)
- redis (1)
- raspberry (2)
- qemu (31)
- opencv (4)
- socket (1)
- opengl (1)
- ibeacons (1)
- emacs (6)
- openstack (24)
- docker (1)
- webrtc (11)
- angularjs (2)
- neutron (23)
- jslinux (18)
- 网络 (13)
- tap (9)
- tensorflow (8)
- nlu (4)
- asm.js (5)
- sip (3)
- xl2tp (5)
- conda (1)
- emscripten (6)
- ffmpeg (10)
- srt (1)
- wasm (5)
- bert (3)
- kaldi (4)
- 知识图谱 (1)
最新评论
-
wahahachuang8:
我喜欢代码简洁易读,服务稳定的推送服务,前段时间研究了一下go ...
websocket的helloworld -
q114687576:
http://www.blue-zero.com/WebSoc ...
websocket的helloworld -
zhaoyanzimm:
感谢您的分享,给我提供了很大的帮助,在使用过程中发现了一个问题 ...
nginx的helloworld模块的helloworld -
haoningabc:
leebyte 写道太NB了,期待早日用上Killinux!么 ...
qemu+emacs+gdb调试内核 -
leebyte:
太NB了,期待早日用上Killinux!
qemu+emacs+gdb调试内核
nginx的上传
查看http://haoningabc.iteye.com/blog/2344484
效果如图
这几天有个需求
上传大文件,需要带进度条,
nginx这个版本有7,8年了,担心有bug,不如用websocket重新写一个
原理
使用websocket.jar
前端需要分片,把一定字节的用websocket传过去
后端用流顺序写到文件里面
(理论上,如果用session把当前存的字节数就可以断点续传)
html代码如下:
java的服务端代码如下
只需要一个jar
websocket.jar
http://dl.iteye.com/topics/download/decd7d91-9d2a-381f-bcea-fb0e202f6e3c
查看http://haoningabc.iteye.com/blog/2344484
效果如图
这几天有个需求
上传大文件,需要带进度条,
nginx这个版本有7,8年了,担心有bug,不如用websocket重新写一个
原理
使用websocket.jar
前端需要分片,把一定字节的用websocket传过去
后端用流顺序写到文件里面
(理论上,如果用session把当前存的字节数就可以断点续传)
html代码如下:
<!DOCTYPE html> <html> <head> <title>WebSocket Chat Client</title> <meta charset="utf-8" /> <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.json-2.3.js"></script> <script type="text/javascript"> $().ready( function() { if (window.File && window.FileReader && window.FileList && window.Blob) { } else { alert('The File APIs are not fully supported in this browser.'); } }); //在消息框中打印内容 function log(text) { $("#log").append(text+"\n"); } //全局的websocket变量 var ws; var paragraph = 10485760; //var paragraph = 1024; var fileList ; var file; var startSize,endSize = 0; var i = 0; j = 0; //连接服务器 $(function() { $("#connect").click(function() { ws = new WebSocket($("#uri").val()); //连接成功建立后响应 ws.onopen = function() { log("成功连接到" + $("#uri").val()); } //收到服务器消息后响应 ws.onmessage = function(e) { console.log("iiiiiiiiii:"+i); log("服务器说" + e.data + " "+(e.data=="ok")); if((e.data+"") == "ok"){ if(endSize < file.size){ console.log("file.size:"+file.size); startSize = endSize; endSize += paragraph ; console.log("startSize:"+startSize); console.log("endSize:"+endSize); console.log("file---haha----:"+file); document.getElementById('progress').innerHTML=Math.round(startSize / file.size * 10000) / 100.00 + "%"; if (file.webkitSlice) { console.log("webkitSlice--->"); var blob = file.webkitSlice(startSize, endSize); } else if (file.mozSlice) { console.log("mozSlice--->"); var blob = file.mozSlice(startSize, endSize); }else { console.log("Slice--->"); var blob = file.slice(startSize, endSize); } var reader = new FileReader(); reader.readAsArrayBuffer(blob); reader.onload = function loaded(evt) { var ArrayBuffer = evt.target.result; log("发送文件第" + (i++) + "部分"); ws.send(ArrayBuffer); } }else{ console.log("endSize >= file.size-->"+e.data+"<---"); console.log("endSize >= file.size-->endSize:"+endSize); console.log("endSize >= file.size-->file.size:"+file.size); startSize = endSize = 0; i = 0; log("发送" + file.name +"完毕"); log("发送文件完毕"); } } //连接关闭后响应 ws.onclose = function() { log("关闭连接"); ws = null; } return false; } }); }); $(function() { $("#sendFileForm").click(function() { fileList = document.getElementById("file").files; file = fileList[0]; ws.send(file.name); }) }); $(function() { $("#reset").click(function() { $("#log").empty(); return false; }); }); </script> </head> <body> <span>上传的百分比</span> <span id="progress">0</span><br> <input type="text" id="uri" value="ws://localhost:8887" style="width: 200px;"> <input type="button" id="connect" value="Connect"><input type="button" id="disconnect" value="Disconnect" disabled="disabled"><!--ws://192.168.137.178:8081/websocketchat/hao/binupload?r=haha--> <form > <input id="file" type="file" multiple /> <input type="button" id="sendFileForm" value="测试" /> <input type="button" id="reset" value="清空消息框" /> </form> <form> <textarea id="log" rows="30" cols="100" style="font-family: monospace; color: red;"></textarea> </form> </body> </html>
java的服务端代码如下
package testupload; import java.io.BufferedReader; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStreamReader; import java.net.InetAddress; import java.net.InetSocketAddress; import java.net.UnknownHostException; import java.nio.channels.NotYetConnectedException; import java.util.Set; import org.java_websocket.WebSocket; import org.java_websocket.WebSocketServer; import org.java_websocket.handshake.ClientHandshake; public class UploadServer extends WebSocketServer { public UploadServer(int port) throws UnknownHostException { super(new InetSocketAddress(InetAddress.getByName("192.168.137.178"), port)); } public UploadServer(InetSocketAddress address) { super(address); } @Override public void onOpen(WebSocket conn, ClientHandshake handshake) { try { this.sendToAll("new"); } catch (InterruptedException ex) { ex.printStackTrace(); } System.out.println(conn + " entered the room!"); } @Override public void onClose(WebSocket conn, int code, String reason, boolean remote) { try { this.sendToAll(conn + " has left the room!"); } catch (InterruptedException ex) { ex.printStackTrace(); } System.out.println(conn + " has left the room!"); } public String fileName; public String getFileName() { return fileName; } public void setFileName(String fileName) { this.fileName = fileName; } @Override public void onMessage(WebSocket conn, String message) { // try { // this.sendToAll( message ); // } catch ( InterruptedException ex ) { // ex.printStackTrace(); // } // System.out.println( conn + ": " + message ); System.out.println("文件名" + message); // 将文件名写入连接对象中,(需要手动修改webSocket类) this.setFileName(message); try { conn.send("ok"); } catch (NotYetConnectedException e) { e.printStackTrace(); } catch (IllegalArgumentException e) { e.printStackTrace(); } catch (InterruptedException e) { e.printStackTrace(); } } public void onMessage(WebSocket conn, byte[] message) { System.out.println("收到二进制流:"); // 将二进制流保存为文件, 文件名从连接对象中取出 saveFileFromBytes(message, "D:/c/apache-tomcat-7.0.62/webapps/websocketchat/src/" + this.getFileName()); // 告诉前台可以继续发送了. try { conn.send("ok"); } catch (NotYetConnectedException e) { e.printStackTrace(); } catch (IllegalArgumentException e) { e.printStackTrace(); } catch (InterruptedException e) { e.printStackTrace(); } } public static boolean saveFileFromBytes(byte[] b, String outputFile) { FileOutputStream fstream = null; File file = null; try { file = new File(outputFile); fstream = new FileOutputStream(file, true); fstream.write(b); } catch (Exception e) { e.printStackTrace(); return false; } finally { if (fstream != null) { try { fstream.close(); } catch (IOException e1) { e1.printStackTrace(); } } } return true; } @Override public void onError(WebSocket conn, Exception ex) { ex.printStackTrace(); } public void sendToAll(String text) throws InterruptedException { Set<WebSocket> con = connections(); synchronized (con) { for (WebSocket c : con) { c.send(text); } } } public static void main(String[] args) throws InterruptedException, IOException { WebSocket.DEBUG = true; int port = 8887; try { port = Integer.parseInt(args[0]); } catch (Exception ex) { } UploadServer s = new UploadServer(port); s.start(); System.out.println("UploadServer started on port: " + s.getPort()); // 服务端 发送消息处理部份 BufferedReader sysin = new BufferedReader(new InputStreamReader(System.in)); while (true) { String in = sysin.readLine(); s.sendToAll(in); } } }
只需要一个jar
websocket.jar
http://dl.iteye.com/topics/download/decd7d91-9d2a-381f-bcea-fb0e202f6e3c
发表评论
-
indexedDB存图片减少请求
2020-05-21 19:23 516getImageFile()获取网络图片 showImage ... -
vizceral-example的例子
2020-03-19 18:53 321自定义图和加载结构 代码在 https://github.c ... -
jsonpath的helloworld
2020-03-17 14:58 377基本语法:https://www.cnblogs.com/jp ... -
流动图神器vizceral
2019-10-12 19:04 441把c的代码生成json:https://github.com/ ... -
emscripten asm.js的helloworld
2018-03-01 20:15 1070mac下安装: brew install SDL2 SDL2_ ... -
webpack的helloworld
2016-11-02 10:42 881参考 http://www.jianshu.com/p/42e ... -
iphone6等移动端的css自适应
2016-10-17 01:18 1171参考 http://jingyan.baidu.com/art ... -
javascript自定义事件
2016-06-01 21:49 525一言不合上代码 <input value=" ... -
html5的fiesystem api 浏览器本地存储
2016-06-01 15:59 888html5的fiesystem api可以存取本地文件 一言不 ... -
websocket传传图片
2015-12-25 17:51 7211参考[url]http://www.adobe.com/dev ... -
angularjs使用include后双向绑定失败的解决
2015-12-20 19:41 1838原理参考 http://segmentfault.com/q/ ... -
html5 陀螺仪
2014-11-26 21:05 5823<html> <head> ... -
webgl的贝塞尔曲线
2014-11-12 00:56 2492BezierCurve webgl的贝塞尔曲线 webgl ... -
chrome app的helloworld
2014-11-11 13:56 673参考 http://blog.csdn.net/rydiy/a ... -
shader and Program编程基本概念 - 转
2014-11-04 11:50 1468原地址:http://blog.csdn.net/myarro ... -
javascript对象转json
2014-10-17 14:09 964<html> <head>& ... -
jquery 的svg中国地图
2012-12-16 14:37 28034三种吧 1.d3.js很强大 2.jquery的 jvecto ... -
纯css的树型结构
2012-10-03 18:29 1233<html><head> ... -
D3 的3d图
2012-09-16 17:05 1425LCF http://mathworld.wolfram. ... -
jquery table拖拽排序
2012-07-14 21:45 7093参考http://dragsort.codeplex.com/ ...
相关推荐
C# WinForm 通过WebSocket 实现文件传输示例,包含了客户端和服务端。
php结合websocket是心啊文件的片段上传,并且附带进度条功能,欢迎下载
解决Android中基于Socket方式的文件上传中出现的问题. 图片上传到服务器中. 在浏览器中测试可以通过。 证明服务器端没有问题. 但在android端上传时不行.
本篇文章主要介绍了HTML5-WebSocket实现多文件同时上传的实例,HTML5结合Websocket进行文件的传输就变得更加方便和灵活,有兴趣的可以了解一下。
初步实现QT客户端和服务器端传输文字和图片,并解决客户端关闭导致服务器端崩溃和异常关闭`,
springboot整合websocket
通过netty获取文件进度,上传文件的时时数据大小,剩余时间.websocket和HTML结合,并不javascript的轮询获取上传进度,而是通过NIO的推送.
php+html5实现无刷新上传,大文件分片上传,断点续传具体案例完整代码 详情:https://blog.csdn.net/qq43599939/article/details/79762042
应读者要求 写个了一个简单地springboot+websocket实现进度条的demo。
案例使用html5+websocket实现文件断点续传功能,支持实时显示文件上传进度,支持同时上传多个文件,更多内容请关注github:https://github.com/songyou91/FileUploadCase.git,持续更新中。详细内容请关注微信公众号...
SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 SWFUpload的主要特点 * 可以同时上传多个...
WebSocket传视频方法总结
在iis下上传大文件,本demo能够通过cs客户端可跟踪进度的上传大文件。
1. 文件无任何依赖可以编译成linux,window,arm平台都能使用 2. 单文件根据执行参数可以既可以当服务端用也可以当客户端用 3. 支持上传模式和下载...11. 基于websocket协议非常容易用nginx反向代理容易实现7层负载均衡
本大文件分块上传断点续传处理器基于Netty和WebSocket实现,包含41个文件,包括Java源代码、XML配置文件、LICENSE文件、Markdown文档、Properties配置文件和HTML页面。系统界面友好,功能完善,适合用于大文件的上传...
WebSocket客户端(javascript前端)及服务端(java后台)相关代码实现 使用请按需修改
php与websocket握手并读取pcm发送到websocket,在此程序包中有写好的websocket程序包及调用方法,可以与websoket握手成功,把pcm转换成二进制并上传到websoket服务器仅供参考
使用base64进行文件上传的具体流程是:前台使用js将文件转换为base64格式,后台通过高级编程语言,将base64格式的文件,转换为原文件。下面就来演示一下,C#语言配合js,如何实现图片的base64格式上传与解析保存。...
使用表单的方式上传比较大的文件,可能遇到瓶颈问题,把文件切割了上传就可以解决这种问题。