흐름 처리는 신호기 및 C# 가 있는 브라우저로 출력됩니다.

나는 올해 많은 사람들The Third Annual C# Advent과 great articles과 함께 podcasts에 참가할 것이라고 기쁘게 발표했다.만약 당신이 C에 관심이 있다면, 당신은 소셜 미디어에서 모든 작가를 주목해야 합니다!
됐어, 이런 세부 사항은 말하지 마!봐라, 휴가 기간이라고 하면 나는 그레이스 월드가 아니라 그린치 같다. 그래서 나는 너희들에게 C언어로 어떻게 일을 하는지 보여줄 것이다. 이것은 매우 멋지고 강력하다. 그리고...매우 위험하다!웹 사이트에서 명령 셸의 프로세스를 호출하고 신호기를 통해 결과를 브라우저로 되돌리는 방법을 보여 드리겠습니다.
우리가 진일보한 토론을 하기 전에 내가 지적하고자 하는 것은 이 블로그 글이 SignalRdocumentation already exists에 대한 좋은 소개가 아니라는 것이다.본고는 C#web 개발 경험을 가진 개발자를 대상으로 신호기와 웹 플러그인의 개념에 대해 적어도 익숙하다.
마지막으로...
경고웹 사이트를 방문하는 모든 사용자나 프로세스가 임의의 명령을 실행할 수 있도록 원격 코드를 만들 것입니다.그러나 때로는 비슷한 일을 하고 싶을 수도 있다. 아주 조심스럽고 제한된 방식으로.브라우저에서 셸과 상호작용할 수 있는 웹 응용 프로그램의 예시를 보려면 Azure Cloud Shell 및 Coder.com 을 보십시오.

그래, 그럼 우리는 도대체 무엇을 하고 있는 거야?

ASP를 생성합니다.NET 웹 응용 프로그램은 사용자가 임의의 명령을 실행할 수 있도록 합니다.웹 서버 케이스의 exe 명령

신호기

를 통해 stdOUT 및 stdERROR 흐름을 브라우저로 내보내기

이 프로젝트를 어떻게 진정하고 멋있는 것으로 발전시킬 것인가에 대한 생각

참고: 입력을 원하지 않으면 Github에서 전체 소스 코드를 얻을 수 있습니다.https://github.com/codingblocks/streaming-stdout-with-signalr
이것이 바로 우리가 끝내야 할 웹 브라우저에서 서버 측 명령을 실행하는 간단하고 위험한 방법이다.경탄했어

코드를 작성합시다!

나는 가능한 한 일을 간단하게 하려고 한다. 그러면 너는 정보의 실질에 전념할 수 있다.불리한 점은 이미 정해진 길을 벗어나면 용을 만날 수 있다는 것이다.어차피 길을 잃었어!질문이나 의견이 있으면 언제든지 의견을 발표해 주십시오.

1단계: 새 ASP를 생성합니다.NET 핵심 웹 응용 프로그램(v3.0.101 테스트 사용)

만약 dotnet installed 이 있다면, 다음 명령은 "streaming"이라는 새 디렉터리에 기본적인 razor 페이지 사이트를 설정합니다.

dotnet new webapp -o streaming
cd streaming

2단계: SiginalR에 종속성 추가

SignalR는 마이크로소프트 프로젝트로 pub/sub interactions 각종 서로 다른 클라이언트와 서버 기술에 대해 간단하게 한다.이 예에서, 우리는signer를 사용하여 프로세스의 출력을 유동적으로 처리할 것이며, 또한 전방의signer JavaScript 라이브러리를 사용하여 이 출력을 구독하여 사이트에 표시할 것이다.이 예에서 우리는 시그널이 제공하는 일부분의 내용만 사용하지만, 그것이 당신의 식욕을 자극하기에 충분하기를 바랍니다.
이 명령은 서버 쪽bits를 설치합니다. 우리가 그곳에 도착했을 때, 클라이언트 js 파일을 전방에 추가합니다.

dotnet add package Microsoft.AspNetCore.SignalR.Client

3단계: 서버 측 변경 사항

지금 우리는 코드를 좀 작성할 준비가 되어 있다.프로세스를 관리하는 클래스 ProcessHub를 만듭니다.반테러 정예병.관련 통신 채널에 액세스할 수 있도록 신호기 "Hub"클래스에서 상속합니다.나는 이 글에서 소음을 낮추려고 시도했기 때문에 재미있는 부분만 주목했지만 full file is on Github,

{
  // I'm keeping a static copy of the process around, so that we don't end up spawning a new one every time the user asks for one. This also makes the app single threaded, which is most appropriate for many use cases anyway!
  TerminateProcessIfExists();

  var process = new Process()
  {
    // Note: You can swap this for the particular shell you want to run, but I'm keeping this simple so sticking to windows with "cmd.exe"
    StartInfo = new ProcessStartInfo("cmd.exe")
    {
      // The process does not allow for redirection by default, so we need to instruct the process to explicitly allow it
      RedirectStandardOutput = true,
      RedirectStandardInput = true,
      RedirectStandardError = true,
      // This is also required for redirecting output, "Shell" here refers to an actual graphical shell - which isn't going to work for us here
      UseShellExecute = false,
    }
  };

  // These events will trigger our custom outputHandler, which we'll see in the next code section
  process.OutputDataReceived += new DataReceivedEventHandler(
    (sendingProcess, outLine) => outputHandler(outLine.Data)
  );
  process.ErrorDataReceived += new DataReceivedEventHandler(
    (sendingProcess, outLine) => outputHandler(outLine.Data)
  );

  process.Start();
  // We have to explicitly start our redirection in addition to starting the process
  process.BeginOutputReadLine();
  process.BeginErrorReadLine();

  // Notice that we started the redirection BEFORE we executed the command
  process.StandardInput.Write(command + NEWLINE);

  // The process will return async by default, so we have to instruct the runtime to hang on to the process so we keep the redirections alive
  process.WaitForExit();
  _process = process;
}

다음 방법은 신호기가 실제로 호출하는 방법입니다. 우리가 호출할 때마다 구독 클라이언트에게 출력을 보내는 동작을 전송했습니다.

// The command argument is an arbitrary shell command that we will execute on the server:
public void Stream(string command)
{
  // This calls our private method with the command passed from the client (this is super dangerous, never do this) as well as an Action that will publish output (o) text to any clients that are subscribed to "OutputReceived". Note: this proof-of-concept only has one subscriber,
  Stream(command, o =>
  {
    Clients.All.SendAsync("OutputRecieved", o);
  });
}

우리는 Startup에 대해 두 가지 작은 변화를 해야 한다.cs는 일을 연결하기 위해: (알림: 전체 파일은 Github

// Add this line to the ConfigureServices method
services.AddSignalR();

// Add these lines to the bottom of the Configure method to set up the url for the client to call:
app.UseSignalR(routes =>
{
  routes.MapHub<CommunicationHub>("/stream");
});

4단계: 클라이언트 변경

신호기를 전방in Visual Studio에 추가하는 편리한 글이다.아니면 cdn를 사용해서 간단함을 유지할 수 있다.이곳의 사용자 인터페이스는 텍스트 입력 하나와 단추 하나만 있는 매우 간단하다.명령의 출력은 아래의 빈 div로만 흐를 수 있습니다.
아래에 표시된 JS는 주로 접착 코드이지만, 단추를 눌러 이벤트를 정탐하고, 새 연결을 만들거나 시작하는 방법을 보여 줍니다.

// Invoke the "Stream" method, with the command
document.getElementById("executeButton").addEventListener("click", () => {
  var command = document.getElementById("commandText").value;
  var connection = new   signalR.HubConnectionBuilder().withUrl("/stream").build();
  var output = document.getElementById("output");
  output.innerHTML = '';

  connection
    .start()
    .then(() => {
      connection.on("OutputRecieved", message => {
        var p = document.createElement("p");
        p.textContent = message;
        output.appendChild(p);
      });
      connection.invoke("Stream", command);
    }).catch(err => alert(`An error occurred: ${err}`));
});

실행할 좋은 예시 명령은 "ping coding blocks.net"입니다. 데이터가 흩어진 형태로 나타날 때의 모습을 보여 주기 때문입니다.다른 멋진 예는'gitstatus','dir','ssh'를 시도할 수 있다.
다음은 현재 상황의 예이다
깔끔하죠?이 점에서 이 프로젝트는 단지 장난감일 뿐이지만, 나는 네가 그것을 하기 위해 아주 멋진 것을 생각해 낼 수 있다고 내기를 걸겠다.좋아하다

그래, 이제 어떡하지?

이 프로젝트는 C#에서 프로세스를 호출하고 출력을 사이트로 흐르는 방법을 보여주는 간단한 개념 증명이다.그것 자체는 그다지 유용하지 않지만, 이 프로젝트를 진정으로 멋있게 만드는 무수한 방법이 있다!다음은 당신의 뇌를 흐르게 하는 생각들입니다.

컴퓨터의 사용자 정의 스크립트를 위한 대시보드 사이트 만들기

git용 UI 제작

Docker 로그 체크 아웃 및 실행을 위한 UI 만들기I did this!

stdIN 및 공유 세션

을 포함한 브라우저 기반 전체 터미널 제작xterm

현재 사이트에 기본 기능을 추가합니다. 예를 들어ping,grep,nmap 또는telnet

이 프로젝트의 모든 작은 오류를 복구합니다. (예를 들어 새로 고치지 않고 두 명령을 실행하면 무슨 일이 발생합니까!)

네가 이 문장에서 얻은 것이 있기를 바란다.다른 것을 확인하십시오Advent of C# posts.
이것은 간단한 Docker admin page I가 설정한 화면 캡처로 흐르는 로그를 볼 수 있으며 이 항목과 매우 유사합니다.