Asp.net使用SignalR實(shí)現(xiàn)發(fā)送圖片

public class ChatHub : Hub
  {
    /// summary>
    /// 供客戶端調(diào)用的服務(wù)器端代碼
    /// /summary>
    /// param name="name">/param>
    /// param name="message">/param>
    public void Send(string name,string message)
    {
      // 調(diào)用所有客戶端的sendMessage方法
      Clients.All.sendMessage(name, message);
    }

    // 發(fā)送圖片
    public void SendImage(string name,IEnumerableImageData> images)
    {
      foreach (var item in images ?? Enumerable.EmptyImageData>())
      {
        if(String.IsNullOrEmpty(item.Image)) continue;
        Clients.All.receiveImage(name, item.Image); // 調(diào)用客戶端receiveImage方法將圖片進(jìn)行顯示
      }
    }

    /// summary>
    /// 客戶端連接的時(shí)候調(diào)用
    /// /summary>
    /// returns>/returns>
    public override Task OnConnected()
    {
      Trace.WriteLine("客戶端連接成功");
      return base.OnConnected();
    }
  }

public class HomeController : Controller
  {
    private static readonly char[] Constant =
    {
      '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
      'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
      'w', 'x', 'y', 'z',
      'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
      'W', 'X', 'Y', 'Z'
    };

    // GET: Home
    public ActionResult Index()
    {
      Session["username"] = GenerateRandomName(4);
      return View();
    }

    /// summary>
    /// 產(chǎn)生隨機(jī)用戶名函數(shù)
    /// /summary>
    /// param name="length">用戶名長(zhǎng)度/param>
    /// returns>/returns>
    private static string GenerateRandomName(int length)
    {
      var newRandom = new System.Text.StringBuilder(62);
      var rd = new Random(DateTime.Now.Millisecond);
      for (var i = 0; i  length; i++)
      {
        newRandom.Append(Constant[rd.Next(62)]);
      }

      return newRandom.ToString();
    }
}

html>
head>
  meta name="viewport" content="width=device-width" />
  title>使用SignalR實(shí)現(xiàn)發(fā)送圖片/title>
  link href="/Content/bootstrap.min.css" rel="stylesheet">
  link href="/Content/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
/head>
body>
  div class="container">
    div>用戶名:p id="username">/p>/div>
    input type="text" id="message" />
    br/>
    br />
    input id="fileinput" type="file">
    br />
    input type="button" id="sendmessage" value="Send" />
    input type="hidden" id="displayname" />
    ul id="discussion">/ul>
  /div>
  script type="text/javascript" src="~/Scripts/jquery-2.2.2.min.js">/script>
  script src="~/Scripts/jquery.signalR-2.2.0.min.js">/script>
  script src="~/signalr/hubs">/script>
  script src="/Scripts/fileinput.js" type="text/javascript">/script>
  script src="/Scripts/bootstrap.min.js" type="text/javascript">/script>
  script>
    $(function () {
      var userName = '@Session["username"]';
      $('#username').html(userName);
      // 引用自動(dòng)生成的集線器代理
      var chat = $.connection.chatHub;
      // 定義服務(wù)器端調(diào)用的客戶端sendMessage來(lái)顯示新消息

      chat.client.sendMessage = function (name, message) {
        // 向頁(yè)面添加消息
        $('#discussion').append('li>strong>' + htmlEncode(name)
          + '/strong>: ' + htmlEncode(message) + '/li>');
      };

      chat.client.receiveImage = function (name, base64) {
        // 向頁(yè)面添加消息
        $('#discussion').append('image class = "file-preview-image" style="width:auto;height:100px;" src=' + base64
          + '/>');
      };

      // 設(shè)置焦點(diǎn)到輸入框
      $('#message').focus();
      // 開(kāi)始連接服務(wù)器
      $.connection.hub.start().done(function () {
        $('#sendmessage').click(function () {
          // 調(diào)用服務(wù)器端集線器的Send方法
          chat.server.send(userName, $('#message').val());
          // 清空輸入框信息并獲取焦點(diǎn)
          $('#message').val('').focus();
        });
      });

      $("#fileinput").fileinput({
        allowedFileExtensions: ["jpg", "png", "gif", "jpeg"],
        maxImageWidth: 700,
        maxImageHeight: 700,
        resizePreference: 'height',
        maxFileCount: 1,
        resizeImage: true
      });

      $("#fileinput").on('fileloaded', function (event, file, previewId, index, reader) {
        var readers = new FileReader();
        readers.onloadend = function () {
          $(".file-preview-image").attr('src', readers.result);
        };
        readers.readAsDataURL(file);
      });

      $('#sendmessage').click(function() {
        var imagesJson = $('.file-preview-image').map(function() {
          var $this = $(this);
          return {
            image: $this.attr('src'),
            filename: $this.attr('data-filename')
          };
        }).toArray();

        chat.server.sendImage(userName, imagesJson);
      });
    });

  // 為顯示的消息進(jìn)行Html編碼
  function htmlEncode(value) {
    var encodedValue = $('div />').text(value).html();
    return encodedValue;
  }
  /script>
  
/body>
/html>