ASP.NET Core에서 SignalR 기술을 사용하는 방법에 대한 자세한 설명-C#.Net 튜토리얼-php.cn

ASP.NET Core에서 SignalR 기술을 사용하는 방법에 대한 자세한 설명

高洛峰

풀어 주다： 2017-02-10 17:35:44

원래의

2194명이 탐색했습니다.

이 글은 ASP.NET Core에서 SignalR 기술을 사용하는 방법을 주로 소개합니다. 편집자는 꽤 좋다고 생각하므로 이제 공유하고 참고용으로 제공하겠습니다. 편집기를 따라 살펴보겠습니다

1. 서문

저번에 ASP.NET Core 사용법에 대해 이야기했습니다. 에서 WebSocket을 사용하세요. 이번 주인공은 WebSocket의 운영을 단순화하는 프레임워크를 제공하는 SignalR입니다.

ASP .NET SignalR은 ASP.NET 웹 프로젝트에서 실시간 통신을 구현할 수 있는 ASP.NET 클래스 라이브러리입니다. 웹에서의 실시간 커뮤니케이션이란 무엇입니까? 클라이언트(웹페이지)와 서버가 서로 메시지와 호출 방식을 알려주는 기능은 물론 실시간으로 동작합니다. WebSockets는 웹 페이지와 서버 간에 소켓 연결을 설정할 수 있는 HTML5에서 제공하는 새로운 API입니다. WebSocket을 사용할 수 있는 경우(즉, 브라우저가 Html5를 지원하는 경우) SignalR은 WebSocket을 사용합니다. 동일한 효과를 보장하는 다른 기술.

물론 SignalR은 매우 간단하고 사용하기 쉬운 고급 API도 제공하므로 서버가 클라이언트의 JavaScript 함수를 개별적으로 또는 일괄적으로 호출할 수 있으며 연결 관리가 매우 편리합니다. , 서버에 연결하는 클라이언트, 연결 끊기, 클라이언트 그룹화, 클라이언트 인증 등은 모두 SignalR을 사용하여 매우 쉽게 구현할 수 있습니다.

2. SignalR 현황

ASP.NET Core 1.0.x 버전에는 SignalR이 포함되어 있지 않지만 SignalR 기술이 포함되어 있는 것으로 알고 있습니다. 계획 ASP.NET Core 버전 1.2에 통합되었으며 개발팀은 TypeScript를 사용하여 자바스크립트 클라이언트를 다시 작성할 예정입니다. 예를 들어, 서버 측도 ASP.NET Core의 개발 방법에 가깝습니다. ASP.NET Core 종속성 주입 프레임워크에 추가됩니다.

현재 상황은 SignalR 기술이 1.0에서 사용될 수 없다는 것입니다. 이 글에서 구현된 데모는 모두 1.1에서 진행됩니다.

3. SignalR 통합

물론 ASP.NET Core 1.2는 공식 출시되려면 아직 시간이 좀 걸리며, 현재는 SignalR 솔루션을 통합할 준비가 되지 않았으므로 SignalR을 수동으로 통합해야 합니다.

ASP.NET Core에서 SignalR을 사용하려면 먼저 Microsoft.AspNetCore.SignalR.Server 및 Microsoft.AspNetCore.WebSockets의 NuGet 패키지를 참조해야 합니다.

물론 위에서 언급한 것처럼 현재 SignalR을 통합하지 않는 ASP.NET Core가 없으므로 NUGET에서 SignalR 패키지를 찾을 수 없습니다. MyGet에서 찾으세요.

1. NuGet 소스 추가

다음 내용이 포함된 NuGet.Config라는 새 파일을 만듭니다.

<?xml version="0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <clear/>
      <add key="aspnetcidev" value="https://dotnetmygetorg/F/aspnetcore-ci-dev/api/v3/indexjson"/>
      <add key="apinugetorg" value="https://apinugetorg/v3/indexjson"/>
  </packageSources>
</configuration>

로그인 후 복사

물론 Visual Studio에서 NuGet 패키지 소스를 설정하여 이 어셈블리를 참조할 수도 있습니다.

2. project.json에 참조를 추가합니다

"MicrosoftAspNetCoreSignalRServer": "0-*",
"MicrosoftAspNetCoreWebSockets": "0-*"

로그인 후 복사

SignalR 버전이 0.2인 것을 확인할 수 있습니다. .0 알파 버전이므로 후속 버전에서는 많이 변경될 수 있습니다! 다시 쓰기가 쉽다고 들었습니다.

SignalR은 현재 ASP.NET Core 1.1 이상에서만 사용할 수 있다는 점에 주목할 필요가 있습니다. 이 기사에서 사용한 .NET Core SDK 버전은 1.0.0-preview2-003131입니다. 문제가 있는 경우 CoreApp 버전을 1.1로 변경하려고 시도할 수 있으며 모든 AspNetCore 어셈블리도 버전 1.1로 변경됩니다.

3. 구성 코드 추가

Startup 클래스의 ConfigureServices 메서드에 다음 코드를 추가해야 합니다.

public void ConfigureServices(IServiceCollection services)
{
   servicesAddSignalR(options => 
   {
     optionsHubsEnableDetailedErrors = true;
   });
}

로그인 후 복사

Startup 클래스의 구성 메서드에 다음 코드를 추가합니다.

appUseWebSockets();
appUseSignalR();

로그인 후 복사

4. HUB 클래스

여기에서는 간단한 데모, 간단한 채팅방만 구현합니다. 여러 사람이 입장할 때 자신이 보낸 메시지를 볼 수 있습니다.

public class ChatHub : Hub
{
    public static List<string> ConnectedUsers;

    public void Send(string originatorUser, string message)
    {
      ClientsAllmessageReceived(originatorUser, message);
    }

    public void Connect(string newUser)
    {
      if (ConnectedUsers == null)
        ConnectedUsers = new List<string>();

      ConnectedUsersAdd(newUser);
      ClientsCallergetConnectedUsers(ConnectedUsers);
      ClientsOthersnewUserAdded(newUser);
    }
}

로그인 후 복사

5. 클라이언트는

wwwroot 디렉터리에 다음 콘텐츠로 chat.html이라는 Html 정적 파일 생성을 지원합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Awesome Chat Application</title>
  <meta charset="utf-8" />
</head>
<body>
  <style type="text/css">
    userListp{ float: right; }
  </style>
  <ul id="messages"></ul>
  <input type="text" id="messageBox" />
  <input type="button" id="sendMessage" value="Send Message!" />
  <p class="userListp">
    <ul id="userList"> </ul>
  </p>
 
  <script src="http://ajaxaspnetcdncom/ajax/jQuery/jquery-minjs"></script>
  <script src="http://ajaxaspnetcdncom/ajax/signalr/jquerysignalr-minjs"></script>
  <script src="signalr/hubs"></script>
  <script src="chatjs"></script>
</body>
</html>

로그인 후 복사

동일한 디렉토리에 chat.js를 생성하고 함수를 구현하는 스크립트를 추가합니다.

var userName = prompt("Enter your name: ");
var chat = $connectionchatHub;
chatclientmessageReceived = function (originatorUser, message) {
  $("#messages")append(&#39;<li><strong>&#39; + originatorUser + &#39;</strong>: &#39; + message);
};
chatclientgetConnectedUsers = function (userList) {
  for (var i = 0; i < userListlength; i++)
    addUser(userList[i]);
};
chatclientnewUserAdded = function (newUser) {
  addUser(newUser);
}
$("#messageBox")focus();
$("#sendMessage")click(function () {
  chatserversend(userName, $("#messageBox")val());
  $("#messageBox")val("");
  $("#messageBox")focus();
});
$("#messageBox")keyup(function (event) {
  if (eventkeyCode == 13)
    $("#sendMessage")click();
});
function addUser(user){
  $("#userList")append(&#39;<li>&#39; + user + &#39;</li>&#39;);
}
$connectionhublogging = true;
$connectionhubstart()done(function () {
  chatserverconnect(userName);
});

로그인 후 복사

마지막으로 실행해 보겠습니다. :

详解在ASP.NET Core下使用SignalR技术