C# websocket与html js实现文件发送与接收处理

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Fleck;
using System.Threading;
using System.IO;
using System.Net.WebSockets;
using System.Net.Sockets;
using System.Net;
namespace ConsoleApplication1
{
    class Program
    {

        static void Main(string[] args)
        {
            FleckLog.Level = LogLevel.Debug;
            var allSockets = new List<IWebSocketConnection>();
            var server = new WebSocketServer("ws://192.168.31.37:7181");
            server.Start(socket =>
            {
                socket.OnOpen = () =>
                {
                    Console.WriteLine("Open!");
                    allSockets.Add(socket);
                };
                socket.OnClose = () =>
                {
                    Console.WriteLine("Close!");
                    allSockets.Remove(socket);
                };
                socket.OnMessage = message =>
                {
                    Console.WriteLine(message);
                    allSockets.ToList().ForEach(s => s.Send("Echo: " + message));
                };
                socket.OnBinary = file =>
                {
                    string path = ("D:/test.jpg");
                    //创建一个文件流
                    FileStream fs = new FileStream(path, FileMode.Create);
                    //将byte数组写入文件中
                    fs.Write(file, 0, file.Length);
                    //所有流类型都要关闭流,否则会出现内存泄露问题
                    fs.Close();
                };
            });

            //string ss = Console.ReadLine();
            var input = File.Open("D://test.jpg",FileMode.Open);
            while (true)
            {
                Thread.Sleep(2000);
                byte[] s = new byte[input.Length];
                input.Read(s, 0, s.Length);
                foreach (var socket in allSockets.ToList())
                {
                    socket.Send(s);
                }
                input.Close();
              input = File.Open("D://test.jpg", FileMode.Open);
            }
        }
    }
}
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat Client</title>
<meta charset="utf-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript" >
    //判读浏览器是否支持websocket
    $().ready(function() {
        if ( !window.WebSocket ) {
             alert("童鞋, 你的浏览器不支持该功能啊");
        }

    });

    //在消息框中打印内容
function log(text) {
        $("#log").append(text+"\n");
    }

    //全局的websocket变量
var ws;

    //创建连接
    $(function() {
    $("#uriForm").submit(function() {
        log("准备连接到" + $("#uri").val());

        ws = new WebSocket($("#uri").val());
        //连接成功建立后响应
        ws.onopen = function() {
            log("成功连接到" + $("#uri").val());
        }
        //收到服务器消息后响应
        ws.onmessage = function(e) {
            //log("收到服务器消息:" + e.data + "‘\n");
             var reader = new FileReader();
             reader.onload=function(eve){
                        //判断文件是否读取完成
                         if(eve.target.readyState==FileReader.DONE)
                         {
//读取文件完成后,创建img标签来显示服务端传来的字节数//组
                            var img =document.createElement("img");
                //读取文件完成后内容放在this===当前
//fileReader对象的result属性中,将该内容赋值img标签//浏览器就可以自动解析内容格式并且渲染在浏览器中
                            img.src=this.result;
                        //将标签添加到id为show的div中否则,即便是有img也看不见
                            document.getElementById("show").appendChild(img);
                         }
                     };
                //调用FileReader的readAsDataURL的方法自动就会触发onload事件
                     reader.readAsDataURL(e.data);

        }
        //连接关闭后响应
        ws.onclose = function() {
            log("关闭连接");
            $("#disconnect").attr({"disabled":"disabled"});
            $("#uri").removeAttr("disabled");
            $("#connect").removeAttr("disabled");
            ws = null;
        }
        $("#uri").attr({"disabled":"disabled"});
        $("#connect").attr({"disabled":"disabled"});
        $("#disconnect").removeAttr("disabled");
        return false;
    });
    });

    //发送字符串消息
    $(function() {
    $("#sendForm").submit(function() {
         if (ws) {
             var textField = $("#textField");
             ws.send(textField.val());
             log("我说:" + textField.val());
             textField.val("");
             textField.focus();
         }
         return false;
    });
    });

    //发送arraybuffer(二进制文件)
    $(function() {
    $("#sendFileForm").submit(function() {
        var inputElement = document.getElementById("file");
        var fileList = inputElement.files;

        for ( var i = 0; i < fileList.length; i++) {
            console.log(fileList[i]);
            log(fileList[i].name);
            //发送文件名
            ws.send(fileList[i].name);
//            reader.readAsBinaryString(fileList[i]);
//读取文件  
       var reader = new FileReader();
            reader.readAsArrayBuffer(fileList[i]);
//            reader.readAsText(fileList[i]);
//文件读取完毕后该函数响应
            reader.onload = function loaded(evt) {
                var binaryString = evt.target.result;
                // Handle UTF-16 file dump
                log("\n开始发送文件");
                ws.send(binaryString);
            }
        }
        return false;
    });
    });

    $(function() {
    $("#disconnect").click(function() {
         if (ws) {
             $("#log").empty();
             ws.close();
             ws = null;
         }
         return false;
    });
    });

    $(function() {
    $("#reset").click(function() {
        $("#log").empty();
         return false;
    });
    });

</script>
</head>
<body>
    <form id="uriForm">
        <input type="text" id="uri" value="ws://192.168.31.37:7181"
            style="width: 200px;"> <input type="submit" id="connect"
            value="Connect"><input type="button" id="disconnect"
            value="Disconnect" disabled="disabled">
    </form>
    <br>

    <form id="sendFileForm">
        <input id="file" type="file" multiple />
        <input type="submit" value="Send" />
        <input type="button" id="reset" value="清空消息框"/>
    </form>
    <br>
    <form id="sendForm">
        <input type="text" id="textField" value="" style="width: 200px;">
        <input type="submit" value="Send">
    </form>
    <br>
    <form>
        <textarea id="log" rows="30" cols="100"
            style="font-family: monospace; color: red;"></textarea>
    </form>
    <br>
<div id=‘show‘></div>
</body>
</html>
时间: 2024-11-05 12:08:53

C# websocket与html js实现文件发送与接收处理的相关文章

websocket与node.js完美结合

之所以写下此文,是我觉得越是简单的技术往往能发挥越重要的作用,随着各种新的技术的诞生,实时web技术已经走进我们.websocket和node.js使开发实时应用非常简单,同时性能也非常高. 关于websocket websocket是html5的重要feature,它直接在浏览器上对与socket的支持,这给了web开发无限的想象,虽然以前也有 flash socket+js的实现,不过毕竟不稳定,而且兼容性有很多问题,当然websocket的普及也依赖于支持html5标准的浏览器的更新,目前

解决Postman发送post数据但是Node.js中req.body接收不到数据的问题

之前编写后台接口,测试数据都是使用的Postman,相当的方便,之前也一直使用get方法,编写Node.js一直没有问题,但是由于要编写一个注册/登陆的功能,所以发送的post数据,后台的逻辑已经编写完成,但是当使用post传来数据时req.body中却为空,翻看半天以前的项目代码,也没有发现我哪里写错了. 最后确定是Postman需要进行设置 这个图是摘自:http://drupal.stackexchange.com/questions/50559/services-module-how-t

node.js EventEmitter发送和接收事件

EventEmitter是nodejs核心的一部分.很多nodejs对象继承自EventEmitter,用来处理事件,及回调.api文档地址: http://nodejs.org/api/events.html#events_class_events_eventemitter Event: Many objects in Node emit events: a net.Server emits an event each time a peer connects to it, a fs.read

使用Node.js+Socket.IO搭建WebSocket实时应用【转载】

原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. WebSocket简介 谈到Web实时推送,就不得不说WebSocket.在WebSocket出现之前,很多网站为了实现实时推送技术,通常采用的方案是轮询(Polling)和Comet技术,Comet又可细分为两种实现方

node.js搭建简单服务器,用于前端测试websocket链接方法和性能测试

WebSocket简介 谈到Web实时推送,就不得不说WebSocket.在WebSocket出现之前,很多网站为了实现实时推送技术,通常采用的方案是轮询 (Polling)和Comet技术,Comet又可细分为两种实现方式,一种是长轮询机制,一种称为流技术,这两种方式实际上是对轮询技术的改进,这些 方案带来很明显的缺点,需要由浏览器对服务器发出HTTP request,大量消耗服务器带宽和资源.面对这种状况,HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽并实现真正意义上的

使用Node.js+Socket.IO搭建WebSocket实时应用

Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. 作者:潘良虎链接:https://www.zhihu.com/question/20215561/answer/26419995来源:知乎原文地址:http://www.plhwin.com/2014/05/28/nodejs-socketio/ WebSocket简介 谈到Web实时推送,就不得不说

(转)使用Node.js+Socket.IO搭建WebSocket实时应用

Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. WebSocket简介 谈到Web实时推送,就不得不说WebSocket.在WebSocket出现之前,很多网站为了实现实时推送技术,通常采用的方案是轮询(Polling)和Comet技术,Comet又可细分为两种实现方式,一种是长轮询机制,一种称为流技术,这两种方式实际上是对轮询技术的改进,这些方案

WebSocket最简易理解,term.js插件的使用

介绍WebSocket WebSocket我想大家并不陌生,无论你的的工作中是否用到了它,都或多或少听说过,它是h5中新增的,在某些方面可以很好的替代我们一直沿用的ajax技术,甚至更加的出色.但是它究竟和http有什么区别呢.举个最简单的例子吧,我现在需要根据用户不同的输入来获取后端不同的数据,http请求的方式就是每次用户输入我就发送一个http请求.然而websocket的解决是一次连接成功后,每次用户输入都会发送给后台,但是这个发送的数据却是一直处在已经连接的状态,并不是每次想http每

使用Node.js实现数据推送

业务场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的方式处理Ajax请求并返回数据,在学校的时候实验室的项目一直都采用轮询,因为它最保险也最容易实现.但轮询带来的通信资源的浪费是无法忽视的,无论数据是否改变,都照常发送请求并响应,而且每次HTTP请求都带有很长的头部信息. 2. Comet的概念是长连接,客户端发送请求后,后端将连接保持下来,直到连接