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实现文件发送与接收处理的更多相关文章
- js进阶 14-3 如何接收load函数从后台接收到的返回数据
js进阶 14-3 如何接收load函数从后台接收到的返回数据 一.总结 一句话总结:load方法的回调函数的参数即可接收从后台的返回数据. 1.load方法的回调函数的参数是什么? 语法:load( ...
- js插件---WebUploader 如何接收服务端返回的数据
js插件---WebUploader 如何接收服务端返回的数据 一.总结 一句话总结: uploadSuccess有两个参数,一个是file(上传的文件信息),一个是response(服务器返回的信息 ...
- $.ajax传输js数组，spring接收异常
今天测试,出现一个奇怪的问题 $.ajax传输js数组,spring接收这个数组,出现奇怪的现象,如果数组只有一个元素,且这个元素字符串最后一个字符是以逗号,结尾的话, spring会自动把这个逗号去 ...
- websocket直接绕过JS加密的方式
目录 websocket--hook 服务端--WebSocketServer.js 客户端注入JS代码 python开端口 get_data.py 文件方式 get_user_id.py 文件方式 ...
- js传参java接收乱码解决方案
js传参处理 encodeURI(encodeURI(name)); java接收处理 URLDecoder.decode(request.getParameter("name") ...
- 解决Postman发送post数据但是Node.js中req.body接收不到数据的问题[已解决]
之前编写后台接口,测试数据都是使用的Postman,相当的方便,之前也一直使用get方法,编写Node.js一直没有问题,但是由于要编写一个注册/登陆的功能,所以发送的post数据,后台的逻辑已经编写 ...
- node.js EventEmitter发送和接收事件
EventEmitter是nodejs核心的一部分.很多nodejs对象继承自EventEmitter,用来处理事件,及回调.api文档地址: http://nodejs.org/api/events ...
- 使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...
- （转）使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...
随机推荐
- CentOS7 中文man（cman）配置方法
1. 下载中文man包 http://pkgs.fedoraproject.org/repo/pkgs/man-pages-zh-CN/manpages-zh-1.5.1.tar.gz/13275fd ...
- DT：DT实现根据乳腺肿瘤特征向量高精度预测肿瘤的是恶性还是良性—Jason niu
%DT:DT实现根据乳腺肿瘤特征向量高精度预测肿瘤的是恶性还是良性 load data.mat a = randperm(569); Train = data(a(1:500),:); Test = ...
- Codeforces 992C Nastya and a Wardrobe (思维)
<题目链接> 题目大意: 你开始有X个裙子 你有K+1次增长机会 前K次会100%的增长一倍 但是增长后有50%的机会会减少一个 给你X,K(0<=X,K<=1e18), 问你 ...
- HDU 2389 Rain on your Parade 最大匹配(模板题)【HK算法】
<题目链接> 题目大意:有m个宾客,n把雨伞,预计时间t后将会下大雨,告诉你每个宾客的位置和速度,每把雨伞的位置,问你最多几个宾客能够拿到伞. 解题分析: 本题就是要我们求人与伞之间的最大 ...
- Django之setting文件
Django之setting文件 转载:https://www.jb51.net/article/128678.htm 目录 设置语言.时区 app路径 数据库配置 静态文件配置 中间件 sessio ...
- Linux学习笔记9
管道 pipe 如 : ls |less -MN 含义把ls 结果输出到less ls=|=more ls 命令 ls -a 展示隐藏的文件 隐藏文件一般以.开始 ls -t 以时间戳排序 ls - ...
- Redis自学笔记:3.3入门-散列类型
3.3散列类型 3.3.1介绍 散列类型不能嵌套其他数据类型,一个散列类型可以包含至多232-1个字段 散列类型适合存储对象:使用对象类别和ID构成键名,使用字段表示对象的数据, 而字段值则存储属性值 ...
- Codeforces.24D.Broken robot(期望DP 高斯消元)
题目链接 可能这儿的会更易懂一些(表示不想再多写了). 令\(f[i][j]\)表示从\((i,j)\)到达最后一行的期望步数.那么有\(f[n][j]=0\). 若\(m=1\),答案是\(2(n- ...
- 纯js上传文件 很好用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- C Windows控制台字符版本俄罗斯方块
//一个可以工作在Windows控制台字符界面下的俄罗斯方块 //工作在非图形模式,无需其他库依赖,单个C文件代码即可运行 //支持最高纪录,并且对于纪录进行了加密 //By wrule 2015年1 ...