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

WebSocket Chat Client

//判读浏览器是否支持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.οnlοad=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;

});

});

style="width: 200px;">

value="Connect">

value="Disconnect" disabled="disabled">

style="font-family: monospace; color: red;">