精华内容
下载资源
问答
  • websocket实现文件传输 nodejs

    千次阅读 2019-03-17 00:45:36
      学校的作业,要用套接字写一个有文件传输功能的系统,js用的最多,于是首先想到了用nodejs来实现,所以用html5的websocket来写了一个最小实现网盘 有基本的上传 新建 下载文件的功能。 实现思路   里面的...

      学校的大作业,要用套接字写一个有文件传输功能的系统,js用的最多,于是首先想到了用nodejs来实现,所以用html5的websocket来写了一个最小实现网盘 有基本的上传 新建 下载文件的功能。

    实现思路

      里面的所有操作都是在websocket连接上的,比如文件列表是nodesj先遍历当前文件夹,返回包含了文件属性的json格式,前端根据这个文件对象列表进行渲染。
      然后每个显示文件夹的div框绑定了双击事件,双击后会把该文件夹的名称传递给服务端nodejs,服务端收到了消息后会遍历传回来的文件夹下的文件列表 像之前一样组装成json数据返回给前端。
      文件传输格式是Blob 和 ArrayBuffer。
      github地址:https://github.com/pbgf/websocketNodejsFileTransfer
    预览

    展开全文
  • websocket 大文件传输问题解决办法 环境为spring boot 2+ 网上找了很多博客写法 其中一位写的比较详细的 使用websocket进行断点续传文件 但是其中的写法使用 好像并没有用 /** * 当websocket连接成功的时候...

    websocket 大文件传输问题解决办法

    环境为spring boot 2+

    网上找了很多博客写法 其中一位写的比较详细的

    使用websocket进行断点续传文件

    但是其中的写法使用 好像并没有用

      /**
         * 当websocket连接成功的时候就是准备上传文件的时候
         * @param session
         */
        @OnOpen
        public void onOpen(Session session) {
            //扩大一次性上传的最大数值
            session.setMaxBinaryMessageBufferSize(BreakpointUploadConfig.blobSize+8);
        }
    
    

    不过这种思路确实可以:把大文件切分为小文件传输,因为websocket 是长连接因此多次传输对效率确实也没有很大的影响,不过还是觉得不官方
    因此,查看官方介绍:spring boot 官方文档 websocket 配置

    可以通过配置 ServletServerContainerFactoryBean

     @Bean
        public ServletServerContainerFactoryBean createWebSocketContainer() {
            ServletServerContainerFactoryBean container = new ServletServerContainerFactoryBean();
            // 可以自由设定大小
            container.setMaxTextMessageBufferSize(81920);
            container.setMaxBinaryMessageBufferSize(1024*1024*20);
            return container;
        }
    
    

    这样即达到了自由设定传输大小,如http 一般

    展开全文
  • SRC包含其使用场景,例如大文件传输websocket客户端和服务器,高性能消息队列,RPC,redis驱动程序,httpserver,mqtt,MVC,DNS,消息服务器等 SAEA.Socket是一个IOCP高端套接字网络框架,基于dotnet standard ...
  • websocket 传输文件及图片的…

    万次阅读 2017-10-13 16:38:20
    一直以来,网络在很程度上都是围绕着所谓 HTTP 的请求/响应模式而构建的。客户端加载一个网页,然后直到用户点击下一页之前,什么都不会发生。在 2005 年左右,AJAX 开始让网络变得更加动态了。但所有 HTTP 通信...

    问题:低延迟的客户端-服务器和服务器-客户端连接

    https://www.html5rocks.com/zh/tutorials/websockets/basics/

    一直以来,网络在很大程度上都是围绕着所谓 HTTP 的请求/响应模式而构建的。客户端加载一个网页,然后直到用户点击下一页之前,什么都不会发生。在 2005 年左右,AJAX 开始让网络变得更加动态了。但所有 HTTP 通信仍然是由客户端控制的,这就需要用户互动或定期轮询,以便从服务器加载新数据。

    长期以来存在着各种技术,可让服务器得知有新数据可用时,立即将数据发送到客户端。这些技术名目繁多,例如“推送”或 Comet。最普遍的一种黑客手段是对服务器发起的链接创建假象,这称为长轮询。利用长轮询,客户端可打开指向服务器的 HTTP 连接,而服务器会一直保持连接打开,直到发送响应。服务器只要实际拥有新数据,就会发送响应(其他技术包括 FlashXHR multipart 请求和所谓的 htmlfiles)。长轮询和其他技术非常好用,您在 Gmail 聊天等应用中经常使用它们。

    但是,这些解决方案都存在一个共同的问题:它们带有 HTTP 的开销,导致它们不适用于低延迟应用。可以想象一下浏览器中的多人第一人称射击游戏,或者其他任何带有即时要素的在线游戏。

    WebSocket 简介:将套接字引入网络

    WebSocket 规范定义了一种 API,可在网络浏览器和服务器之间建立“套接字”连接。简单地说:客户端和服务器之间存在持久的连接,而且双方都可以随时开始发送数据。

    使用入门

    只需调用 WebSocket 构造函数即可打开 WebSocket 连接:

    var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']);
    

    请注意 ws:。这是 WebSocket 连接的新网址架构。对于安全 WebSocket 连接还有 wss:,就像 https: 用于安全 HTTP 连接一样。

    立即向连接附加一些事件处理程序可让您知道连接打开、收到传入讯息或出现错误的时间。

    第二个参数可接受可选子协议,它既可以是字符串,也可以是字符串数组。每个字符串都应代表一个子协议名称,而服务器只能接受数组中通过的一个子协议。访问 WebSocket 对象的 protocol 属性可确定接受的子协议。

    子协议名称必须是 IANA 注册表中的某个注册子协议名称。截止 2012 年 2 月,只有一个注册子协议名称 (soap)。


    与服务器通信

    与服务器建立连接后(启动 open 事件时),我们可以开始对连接对象使用 send('your message') 方法,向服务器发送数据。该方法以前只支持字符串,但根据最新的规范,现在也可以发送二进制讯息了。要发送二进制数据,您可以使用 Blob 或 ArrayBuffer 对象。

    // Sending String 
    
    connection.send('your message'); 
    
    // Sending canvas ImageData as ArrayBuffer 
    
    var img = canvas_context.getImageData(0, 0, 400, 320);
    var binary = new Uint8Array(img.data.length);
    for (var i = 0; i <</span> img.data.length; i++) {
      binary[i] = img.data[i];
    }
    connection.send(binary.buffer); 
    
    // Sending file as Blob 
    
    var file = document.querySelector('input[type="file"]').files[0];
    connection.send(file);
    

    同样,服务器也可能随时向我们发送讯息。只要发生这种情况,就会启动 onmessage 回调。该回调接收的是事件对象,而实际的讯息可通过 data 属性进行访问。

    在最新规范中,WebSocket 也可以接收二进制讯息。接收的二进制帧可以是 Blob或 ArrayBuffer 格式。要指定收到的二进制数据的格式,可将 WebSocket 对象的 binaryType 属性设为“blob”或“arraybuffer”。默认格式为“blob”(您不必在发送时校正 binaryType 参数)。

    // Setting binaryType to accept received binary as either 'blob' or 'arraybuffer' 
    
    connection.binaryType = 'arraybuffer';
    connection.onmessage = function(e) {
      console.log(e.data.byteLength); 
    
    // ArrayBuffer object if binary
    };
    

    WebSocket 的另一个新增功能是扩展。利用扩展,可以发送压缩帧、多路复用帧等。您可以检查 open 事件后的 WebSocket 对象的 extensions 属性,查找服务器所接受的扩展。截止 2012 年 2 月,还没有官方发布的扩展规范。

     

    // Determining accepted extensions 
    
    console.log(connection.extensions);
    

    跨源通信

    作为现代协议,跨源通信已内置在 WebSocket 中。虽然您仍然应该确保只与自己信任的客户端和服务器通信,但 WebSocket 可实现任何域上多方之间的通信。服务器将决定是向所有客户端,还是只向驻留在一组指定域上的客户端提供服务。

     

    代理服务器

    每一种新技术在出现时,都会伴随着一系列问题。WebSocket 也不例外,它与大多数公司网络中用于调解 HTTP 连接的代理服务器不兼容。WebSocket 协议使用 HTTP 升级系统(通常用于 HTTP/SSL)将 HTTP 连接“升级”为 WebSocket 连接。某些代理服务器不支持这种升级,并会断开连接。因此,即使指定的客户端使用了 WebSocket 协议,可能也无法建立连接。这就使得下一部分的内容更加重要了。

    立即使用 WebSocket

    WebSocket 仍是一项新兴技术,并未在所有浏览器中全面实施。而在无法使用 WebSocket 的情况下,只要通过一些使用了上述某个回调的库,就可以立即使用 WebSocket 了。在这一方面使用非常普遍的库是 socket.io,其中自带了协议的客户端和服务器实施,并包含回调(截止 2012 年 2 月,socket.io 还不支持二进制讯息传输)。还有一些商业解决方案,例如 PusherApp,通过提供向客户端发送 WebSocket 讯息的 HTTP API,可轻松地集成到任何网络环境中。由于额外的 HTTP 请求,这些解决方案与纯 WebSocket 相比总是会有额外的开销。

    服务器端

    使用 WebSocket 为服务器端应用带来了全新的用法。虽然 LAMP 等传统服务器堆栈是围绕 HTTP 请求/响应循环而设计的,但是通常无法很好地处理大量打开的 WebSocket 连接。要同时维持大量连接处于打开状态,就需要能以低性能开销接收高并发数据的架构。此类架构通常是围绕线程或所谓的非阻塞 IO 而设计的。

    服务器端实施

    协议版本

    现在,WebSocket 的单线协议(客户端与服务器之间的握手和数据传输)是 RFC6455。最新版的 Chrome 浏览器和 Android 版 Chrome 浏览器与 RFC6455 完全兼容(包括二进制讯息传输)。另外,Firefox 11 和 Internet Explorer 10 也会实现兼容。您仍可以使用旧版协议,但由于它们已知存在漏洞,我们不建议使用。如果您有旧版 WebSocket 协议的服务器实施,我们建议您将其更新到最新版本。

     

    用例

    如果您需要在客户端与服务器之间建立极低延迟、近乎即时的连接,则可使用 WebSocket。请记住,这可能需要您重新考虑构建服务器端应用的方式,将新的关注点放在事件队列等技术上。以下是一些用例:

    • 多人在线游戏
    • 聊天应用
    • 体育赛况直播
    • 即时更新社交信息流
    展开全文
  • 使用Html5的WebSocket在浏览器上传文件, 支持多文件和大文件. 使用websocket上传文件的简单例子: ...如果将一个大文件直接读入内存再发送的话, 内存会吃不消, 所以我们把大文件分块传输. Htm
    
    

    使用websocket上传文件的简单例子: 使用Html5的WebSocket在浏览器上传文件

    上篇文章没有解决的问题就是大文件的上传问题, 而且多文件上传问题也未协调. 所以这篇文章就是解决这两个问题的.

    如果将一个大文件直接读入内存再发送的话, 内存会吃不消, 所以我们把大文件分块传输.  Html5的Fileread方法提供了读取文件部分内容Blob的方法.

    为了保证后台接收到的分块数据的顺序不会乱掉, 我们需要后台确定写入分块数据后再发送下一块数据. 

    在Html端:

    复制代码
    <!DOCTYPE html>
    <html>
    <head>
    <title>WebSocket Chat Client</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="jquery.json-2.3.min.js"></script>
    <script type="text/javascript">
        $().ready(
                        function() {
                            // Check for the various File API support.
                  if (window.File && window.FileReader && window.FileList
                                    && window.Blob) {
                                // Great success! All the File APIs are supported.
                            } 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 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) {
                log("服务器说" + e.data + (e.data=="ok"));
                if(e.data == "ok"){
                if(endSize < file.size){
                    startSize = endSize;
                    endSize += paragraph ;
                    if (file.webkitSlice) {
                              var blob = file.webkitSlice(startSize, endSize);
                    } else if (file.mozSlice) {
                              var blob = file.mozSlice(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{
                        startSize = endSize = 0;
                        i = 0;
                        log("发送" + file.name +"完毕");
                        file = fileList[j++];
                        if(file.name){
                        ws.send(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>Html5功能测试</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">
        <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>
    复制代码

    这里设置了文件大于paragraph (10M)时就会分块发送文件.


    服务器端:

    复制代码
    /**
    * 处理字符串消息
    */
    public void onMessage( WebSocket conn, String message ) {
    
            System.out.println("文件名" + message);
            //将文件名写入连接对象中,(需要手动修改webSocket类)
            conn.setFileName(message);
    
            try {
                conn.send("ok");
            } catch (NotYetConnectedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (IllegalArgumentException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    复制代码
    复制代码
    /**
    * 处理二进制消息
    */
        public void onMessage(WebSocket conn, byte[] message) {
            System.out.println("收到二进制流:");
            //将二进制流保存为文件, 文件名从连接对象中取出
            saveFileFromBytes(message, "src/" + conn.getFileName());
            //告诉前台可以继续发送了.
            try {
                    conn.send("ok");
            } catch (NotYetConnectedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (IllegalArgumentException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    
         /**
         * 将二进制byte[]数组写入文件中
         * @param b byte[]数组
         * @param outputFile 文件位置
         * @return 成功: true 失败: false
         */
            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;  
          }  
    复制代码


    好了, 顺序发送保证了后台写入的数据也是顺序的, 文件就不会出错了! 搞定!

    展开全文
  • 公司项目有个需求,将发生的事件使用webSocket推送到前端(包括一张高清图),要求1秒之内在web上显示,且不能失真。 方案1:首先是将图片转换成base64,作为字符串推送给前端,但是推送过来的信息量太,导致接收...
  • 局域网大文件传输工具。 基于Go语言的高性能“手机电脑超大文件传输神器”,“合并共享文件服务器”。 只需一个文件(exe)双击开启。 1.主要功能 1.1功能描述 文件共享服务器 简单的单一质量文件 共享文件界面...
  • 我想通过定时或者触发的方式让websocket客户端向服务端发起请求,服务端接受到请求的时候将数据返给客户端,通讯已经建立好了,可以通讯,现在比较头疼的问题就是数据格式要怎么来操作,因为每一台本地服务器所请求...
  • 前端传输大量数据到后端并将其存入数据库(websocket即时通讯发送图片)1.当POST请求提交的数据量过时,就会产生错误。解决方法如下“2.数据库报错 2006 -Mysql server has gone away3.websocket设置可以传输大量...
  • )也可同步(服务端最好要有回应事件),异步的话需要注意文件段的顺序,最好的话同步异步都用自己定义个格式帧去传输,方便校验。这里是简单版的,直接发送,没有校验! 还有,分段下载也是一样的操作~ 前端 前端用...
  • 目录关于websocket利用nodejs-websocket搭建websocket服务器在线聊天功能实现文件共享功能实现总结和一点问题(?) 关于websocket 相对于http的单项传输(只能由客户端发起请求),websocket的特点是实现了双向传输,...
  • 文件上传的场景经常碰到,如果我们上传的文件是一个很文件,那么上传的时间应该会比较久,再加上网络不稳定各种因素的影响,很容易导致传输中断,用户除了重新上传文件外没有其他的办法,但是我们可以使用分片上...
  • WebSocket发送图片或文件的思路(2)

    千次阅读 2017-12-19 14:08:42
    前段时间,写了一篇关于WebSocket发送图片或文件的思路的文章,主要是记录我在开发过程中的思想和一些问题考虑,这次我是关于一些大文件或者大图不压缩的情况下,如何传输的思路。  1、首先大图或者大的文件肯定是...
  • 本项目的前端项目和客户端项目并不是单独部署到一台服务器的,是在本机启动,因为使用前端页面与服务端实现大文件传输协议对于我来说有点困难...而且对编写java桌面客户端没有实战过。所以前端项目和客户端项目在本...
  • 本程序实现了WebSocket服务的托盘程序,并提供了HTML的测试页面,示例包含图像文件这类长数据的双向的传输和几十字节的短数据指令的通信,通信数据格式采用json进行组织。项目包含代码工程,使用说明,html测试页面...
  • 让ie6789支持原生html5websocket    从github上的web-socket-js(socket.io好像也是用这个做...不过值得注意的是里面的flash websocket代理文件,文件实在是很,有174k 很好奇,就反编译看下, 是flex做...
  • 关于websocket的实现网上很多资料这里就不详说,这里大概讲我在websocket传输大文件的时的方法,websocket传输单个文件最大不能超过7kg,否则前段自动断掉,当我们用来语音通讯时,通常语音文件都比较大,传输单个...
  • 不过值得注意的是里面的flash websocket代理文件,文件实在是很,有174k 很好奇,就反编译看下, 是flex做的,这点很不喜欢,因为我没有flex builder也不想因为去改代码重新装一个,然后mx包下面的是...
  • WebSocket、整合springboot、一...在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。 整合springboot + 一个群发消息、群组消息的demo 引入pom文件
  • 3、其实tcp以上的通信协议也好,文件格式也好,这些东西根本没有什么区别,说白了全是先互相同意通信(也就是握手),然后传文件,所谓的打包传输数据其实就是文件格式,因为读取一方的读取格式决定他发设么格式。...
  • 1图像的存储 1.1结构 1.1.1 python 对于 图像的处理 主要用到4种结构 numpy.narray 结构 用到cv2 插件 ,图像处理工具 PIL.image 结构 用到pil插件 ,图像读写显示工具 ...blob 数据流结构 用于网络传输 ArrayBuffer
  • 项目中实现异步大文件传输的功能,在服务端使用了swoole,可以高效方便的实现,很多的项目其实也在用到swoole,突然间觉得swoole已经非常强大,对于phper来说,这是非常好的,可能大家都觉高大上了。 接下来将会以...
  • 关于文件临时文件共享,之前推荐过火狐的Firefox Send能帮你解决临时大文件传输问题。今天和各位分享一个更加简单的文件传输工具适用多种场合贼牛XBlaze跨平台文件工具Blaze 是一款开源免费的“网页版”在线文件传输...
  • 最近在使用websocket时遇到了文件对象的传输问题:对于前端页面传来的文件流、字符串需要转为文件对象再传输给api接口。那么首先想到的是将文件流或字符串存入文件再从直接读取以获取文件文件对象,这种方式固然可行...
  • 在浏览器上传输的语音文件总是只能接收很小的一部分,debug发现一般只能接收131072个字节的,超过部分则丢失。也已经将maxFramePayloadLength设置的足够了,但还是不行,请问该如何解决呢...

空空如也

空空如也

1 2 3 4
收藏数 66
精华内容 26
关键字:

websocket大文件传输