`
haoningabc
  • 浏览: 1477847 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

websocket上传文件

JavaScript 
阅读更多
nginx的上传
查看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

  • 大小: 13.2 KB
分享到：
| nginx带进度条的上传超大文件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5+WebSocket实现多文件同时上传的实例

    【WebSocket实现多文件上传】 WebSocket是一种在客户端与服务器之间建立长连接的协议，它可以提供双向通信，即服务器和客户端都可以随时发送数据。这使得实时交互应用如文件上传变得更为高效。结合HTML5的新特性，...

    C# WinForm 通过WebSocket 实现文件传输示例

    3. **选择文件**：通过WinForm的OpenFileDialog控件，让用户选择要上传的文件。获取到文件路径后，可以读取文件内容并准备发送。 4. **分块发送文件**：由于WebSocket允许发送二进制数据，我们可以将文件内容按一定...

    php-websocket文件分段上传demo

    php结合websocket是心啊文件的片段上传，并且附带进度条功能，欢迎下载

    android中基于socket方式的文件上传

    在Android开发中，文件上传是一项常见的任务，尤其是图片或视频等多媒体内容的分享。当涉及到通过网络进行文件传输时，Socket通信是一种基础且灵活的方法。本篇将详细讲解如何在Android应用中实现基于Socket方式的...

    WebSocket传输视频方法总结.txt

    ###### (i) 使用WebSocket进行文件传输 可以通过将视频片段分割成小文件，并利用WebSocket协议进行传输。这种方式适用于文件较小且传输量不大的场景。 - **实现步骤**: 1. 将视频文件分割成多个小文件。 2. 使用...

    springboot整合websocket

    创建一个配置文件，用于启用 WebSocket 功能。创建一个名为 `WebSocketConfig` 的 Java 类，添加以下代码： ```java package com.loncom.websocket; import org.springframework.context.annotation.Bean; import ...

    Netty 文件上传获取进度条

    客户端在开始上传文件时，不仅发送文件数据，还会发送一个包含文件元信息（如总大小）的WebSocket消息。服务器端接收这些消息，并在接收到文件数据的同时，计算已接收的数据量和上传进度，然后将这些信息通过...

    初步实现QT客户端和服务器端传输文字和图片，并解决客户端关闭导致服务器端崩溃和异常关闭`

    同时，QIODevice类及其子类（如QByteArray、QFile）用于处理数据的读写，这对于传输图片等大文件至关重要。 在实现文字传输时，可以使用QT的QTcpSocket类，该类提供了TCP/IP协议的接口。客户端可以通过打开一个...

    php+html5实现无刷新上传，大文件分片上传，断点续传

    在IT领域，尤其是在Web开发中，用户经常需要上传文件到服务器。传统的文件上传方式往往伴随着页面刷新，用户体验并不理想，特别是在处理大文件时，由于网络状况或服务器限制，可能导致上传失败。为了解决这些问题，...

    c# 在IIS下 上传大文件 demo

    - **最大请求实体大小**：默认情况下，IIS限制了上传文件的大小。需要在应用程序池的高级设置中增加`maxRequestLength`，单位通常为KB。 - **临时文件夹**：IIS会将大文件分块上传，这些分块暂时存储在临时文件夹...

    基于Netty和WebSocket的大文件分块上传断点续传处理器设计源码

    本大文件分块上传断点续传处理器基于Netty和WebSocket实现，包含41个文件，包括Java源代码、XML配置文件、LICENSE文件、Markdown文档、Properties配置文件和HTML页面。系统界面友好，功能完善，适合用于大文件的上传...

    springboot+websocket进度条实战

    在实际应用中，`ProgressService`中的`sendProgressUpdate`方法可能会被业务逻辑调用，例如在执行耗时操作（如文件上传或大数据处理）时，根据任务的进度调用此方法，将进度信息推送到前端，从而在用户界面上动态...

    基于微信小程序和C#，WPF的微信拍照+websocket传输本地+图像处理.rar

    自己写的基于微信小程序的手机端拍照并通过websocket协议上传至PC同时根据上传的图片做一个简单的工件缺陷的标注处理，写的非常简单，没有什么算法之类的，只是对自己学习图片传输及处理的一个记录，同时也是对自己...

    html5+websocket文件断点续传

    案例使用html5+websocket实现文件断点续传功能，支持实时显示文件上传进度，支持同时上传多个文件，更多内容请关注github：https://github.com/songyou91/FileUploadCase.git，持续更新中。详细内容请关注微信公众号...

    websocket从服务端获取图片

    部署应用时，将WebSocket相关的Java类打包到WAR文件中，然后将其放入Tomcat的webapps目录下即可。 7. 图片显示： 在HTML中，我们可以使用`&lt;img&gt;`标签来显示图片。当通过WebSocket接收到图片数据时，可以创建一个`...

    SWFUpload大文件文件上传c#源码(整合flash)

    SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 SWFUpload的主要特点 　* 可以同时上传多个...

    webSocket.rar

    WebSocket是一种在客户端和服务器之间建立持久连接的协议，它允许双方进行全双工通信，即数据可以在两个方向上同时传输，极大地提高了实时性。在Web应用程序中，WebSocket为需要实时交互的应用提供了强大的支持，...

    基于mangos的websocket协议跨平台文件传输工具

    1. 文件无任何依赖可以编译成linux，window，arm平台都能使用 2. 单文件根据执行参数可以既可以当服务端用也可以当客户端用 3. 支持上传模式和下载...11. 基于websocket协议非常容易用nginx反向代理容易实现7层负载均衡

    HTML5分割上传文件

    6. 当所有文件块上传完成后，服务器端需要合并这些小块，恢复原始文件。 在实际应用中，为了提高用户体验，我们还可以加入暂停、续传和取消上传的功能。这些功能需要在前端保存已上传的文件块状态，以便用户在需要...

Magicbox
Global site tag (gtag.js) - Google Analytics