ASP.NET MVC 에서 Signal R 의 간단 한 응용

프로필
ASP.NET SignalR 은 ASP.NET 개발 자 에 게 제공 하 는 라 이브 러 리 로 개발 자가 실시 간 웹 기능 을 애플 리 케 이 션 에 추가 하 는 과정 을 간소화 할 수 있다.실시 간 웹 기능 은 이러한 기능 을 말한다.연 결 된 클 라 이언 트 가 사용 가능 해 질 때 서버 코드 는 서버 가 클 라 이언 트 가 새로운 데 이 터 를 요청 하 기 를 기다 리 게 하 는 것 이 아니 라 바로 콘 텐 츠 를 전송 할 수 있다.바 이 두 백과
우선 ASP.NET SignalR 은 ASP.NET 의 웹 프로젝트 에서 실시 간 통신 이 가능 한 ASP.NET 하의 라 이브 러 리 입 니 다.클 라 이언 트(웹 페이지)와 서버 측 이 서로 소식 과 호출 방법 을 알 릴 수 있 도록 합 니 다.
Signal R 은 연결 관 리 를 자동 으로 처리 하여 서버 가 모든 연 결 된 클 라 이언 트 에 게 메 시 지 를 동시에 방송 할 수 있 습 니 다.예 를 들 어 채 팅 방 등 입 니 다.특정 클 라 이언 트 에 게 도 메 시 지 를 보 낼 수 있 습 니 다.클 라 이언 트 와 서버 간 의 연결 은 지속 적 이 고 전통 적 인 HTTP 연결 과 달리 모든 통신 을 위해 재 구축 되 었 습 니 다.
Signal R 은'서버 푸 시'기능 을 지원 합 니 다.그 중에서 서버 코드 는 오늘 인터넷 에서 흔히 볼 수 있 는 요청 응답 모델 이 아 닌 원 격 프로 세 스 호출(RPC)을 사용 하여 브 라 우 저의 클 라 이언 트 코드 를 호출 할 수 있 습 니 다.
한 마디 로 하면 SignalR 은.NET 플랫폼 에서 실행 되 는 html websocket 프레임 워 크 로 서버 의 주동 적 인 푸 시(Push)메 시 지 를 클 라 이언 트 페이지 로 전송 하 는 것 이 주요 목적 이다.
메모:웹 소켓 은 서버 에 Windows Server 2012 또는 Windows 8 과.NET Framework 4.5 를 사용 하도록 요구 합 니 다.이러한 요구 에 부합 되 지 않 으 면 Signal R 은 다른 전송 으로 연결 하려 고 시도 합 니 다.
설치
관리 NuGet 패 키 지 를 열 고 Signal R 을 검색 하여 아래 패 키 지 를 설치 합 니 다.

설치 가 완료 되면 프로그램 에서 인용 이 더 나 옵 니 다.


3.코드 작성
Signal R2 를 사용 하기 때문에 새로운 Startup.cs 클래스 가 필요 합 니 다.클 러 스 터 를 설정 하고 다음 과 같이 작성 해 야 합 니 다.

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRStartup.Startup))]
namespace SignalRStartup
{
  public class Startup
  {
    public void Configuration(IAppBuilder app)
    {
      //       
      app.MapSignalR();
    }
  }
}

이어서 서버 의 hub 클래스 를 작성 합 니 다

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace signalR
{
  public class ServerHub : Hub
  {
    public void SendMsg(string message)
    {
      //        sendMessage  (sendMessage 2   ) 
      Clients.All.sendMessage(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), message);
    }
  }
}

HomoController 및 그 Action 함수 Index 만 들 기

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace signalR.Controllers
{
  public class HomeController : Controller
  {
    public ActionResult Index()
    {
      return View();
    }
  }
}

Index 전단 코드

@{ 
  ViewBag.title = "SignaIR    "; 
} 
<div class="container"> 
  <input type="text" id="message" /> 
  <input type="button" id="sendmessage" value="biubiu" /> 
  <ul id="messageBox"></ul> 
</div> 
@section scripts 
{ 
  <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script> 
  <script src="~/signalr/hubs"></script> 
  <script> 
    $(function () { 
      //             
      var chat = $.connection.serverHub; 
      //           sendMessage       
      chat.client.sendMessage = function (name, message) 
      { 
        //        
        $("#messageBox").append('<li><strong style="color:green">'+name+'</strong>:'+message+'</li>'); 
      } 
      //         
      $('#message').focus(); 
      //        
      $.connection.hub.start().done(function () { 
        $('#sendmessage').click(function () { 
          //          Send   
          chat.server.sendMsg($('#message').val()); 
          //             
          $("#message").val('').focus(); 
        }) 
      }) 
    }); 
  </script> 
} 

실행 효 과 는 모든 창 에서 메 시 지 를 보 내 고 다른 모든 클 라 이언 트 가 이 메 시 지 를 받 을 수 있 습 니 다.

프로그램 을 실행 할 때 웹 페이지 는 Signal R 서비스 와 연결 되 었 습 니 다.구체 적 으로 연결 을 만 드 는 코드 는$.connection.hub.start()입 니 다.이 코드 의 역할 은 signalR 서비스 와 연결 하 는 것 입 니 다.뒤의 done 함 수 는 연결 이 성공 한 후에 버튼 에 click 이 벤트 를 등록 한 것 을 나타 냅 니 다.허브 대상 chat.connextion.start()도 사용 할 수 있 습 니 다.
이 말 기억 나 세 요?

F12 가 본 결과

위의 demo 에 있 는 Client.All.sendmessage 는 모든 클 라 이언 트 를 호출 하 는 sendmessage 함수 로 그룹 발송 에 속 합 니 다.
다음은 클 라 이언 트 그룹 demo 입 니 다.
서버 코드

 public void AddToRoom(string groupName, string userName)
    {
      //          （Groups HubBase      ）
      Groups.Add(Context.ConnectionId, groupName);
      //              ,     addUserIn  
      Clients.Group(groupName, new string[0]).addUserIn(groupName, userName);
    }
    public void Send(string groupName, string detail, string userName)
    {
      //Clients.All.addSomeMessage(detail);//     
      //          addSomeMessage
      Clients.Group(groupName, new string[0]).addSomeMessage(groupName, detail, userName);
    }

클 라 이언 트 코드

 chat.client.addSomeMessage = function(groupId, detail, userName) {
        console.info("    ：" + detail);
        $("#contentMsg").append("<li>" + userName + ": " + detail + "</li>");
      };

     chat.client.addUserIn = function(groupId, userName) {
        $("#contentMsg").append("<li>" + userName + "  "+groupId+"    ！</li>");
      };
      $.connection.hub.logging = true; //  signalr    
      $.connection.hub.start().done(function() {
        //      
        $("#joinRoom").click(function() {
          var groupId = $("#groupId").val();
          var userName = $("#userName").val();
          chat.server.addToRoom(groupId, userName);
        });
        //    
        $("#send").click(function() {
          var detail = $("#message").val();
          var groupId = $("#groupId").val();
          var userName = $("#userName").val();
          chat.server.send(groupId, detail, userName);
        });
      });

실행 효과


위의 두 장의 그림 을 통 해 알 수 있 듯 이 클 라 이언 트 는 그룹 을 나 누 었 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.