首页 > 代码库 > C# websocket与html js实现文件发送与接收处理
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>
C# websocket与html js实现文件发送与接收处理
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。