zoukankan      html  css  js  c++  java
  • 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+"
    ");
        }
        
        //全局的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 + "'
    ");
                 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("
    开始发送文件");
                    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=" 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=" 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>
  • 相关阅读:
    Nacos深入浅出(四)
    Nacos深入浅出(三)
    Nacos深入浅出(二)
    Nacos深入浅出(一)
    Mycat(1)
    redis事务
    git常用的方式
    redis主从复制
    redis持久化RDB和AOF
    Quartz
  • 原文地址:https://www.cnblogs.com/ProDoctor/p/6438623.html
Copyright © 2011-2022 走看看