Kafka와 Socket이 있는 실시간 시간 시퀀스 그림입니다.io

ThoughtWorks의 E4R(연구공정)에서 유행병학 시뮬레이션을 위한 개원Epirust 솔루션을 연구해 왔습니다.이번 대유행 기간에 유행병학자들은 코로나의 전파를 통제하는 데 도움을 주기 위해 신속하고 효과적인 결정을 내려야 한다.Epirust는 인구를 매개체로 하는 인도를 모의하고 백신, 봉쇄와 병원 수 증가 등 관여 조치가 매개체의 일상생활에 미치는 영향을 가시화하는 시도이다.이 프로젝트의 배후 동기를 이해하려면 agent-based modeling 를 방문하십시오.
E4R팀의 일원으로서 나는 이 프로젝트를 위해 가시화 작업을 진행할 기회가 있다.이 글은 Epirust의 구조를 이해하고 Kafka와 웹 플러그인을 사용하여 다음과 같은 실시간 시간 시퀀스 시각화 배후의 사고 과정을 구축하도록 안내합니다.
Epirust wiki 시뮬레이션된 실시간 시퀀스 그래프
시각화에 표시되는 데이터는 백엔드 엔진(Rust로 작성)에서 가져옵니다.이 엔진은 시간당 감각, 감염, 입원, 회복, 사망 대리수를 생성하는 핵심 논리를 봉인했다.이러한 계수는 코로나의 인구 규모, 전파 비율, 작업 인구 비율과 질병 동태 등 특정한 입력 설정을 바탕으로 한다.
우리는 이 문제를 다음과 같은 세 부분으로 나누자.

백엔드에서 스트림 데이터

프런트엔드 스트림 API 사용

이 데이터를 시각화하는 도표 라이브러리

백엔드에서 데이터 스트리밍

녹균 엔진은 매시간 감염된 병원체를 대량으로 발생시킨다.우리는 가시화 시뮬레이션 과정에서 매 시간의 변화 곡선을 희망한다.다음은 엔진에서 받은 JSON입니다.

{
  hour: 1,
  infected_std: 1,
  susceptible_std: 100,
  hospitalized_std: 10,
  recovered_std: 2,
  deceased_std: 0,
}

우리는 전방에서 도형에 시간당 곡선을 그려서 반응할 수 있도록 시간당 업데이트 계수를 실시간으로 전송할 수 있는 플랫폼이 필요하다.만약 우리가 사건의 측면에서 고려한다면, 모형이 생성한 모든 계수는 하나의 사건이다.일단 이 행사가 발표되면 관심 있는 측은 이 행사를 구독하고 자신의 방식으로 가시화할 수 있다.이것은 게시/구독 모델의 전형적인 용례이다.
는 유행하는 이벤트 미디어 플랫폼이다.그것은 분포식 플랫폼이기 때문에 높은 확장성과 가용성을 가지고 있다.시뮬레이션은 입력 설정을 바탕으로 운행하기 때문에 우리는 일부 용례가 있다. 우리는 시뮬레이션이 도시 기후, 인구, 교통 비율 등의 설정을 받아들일 수 있고 모델을 국가급 운행으로 확대할 수 있기 때문에 카프카는 이 요구에 완전히 부합되기를 바란다.
Kafka 카프카 구성 요소
우리는 《 녹 》 에서 카프카 프로듀서를 써서 시간당 계수를 새로운 주제로 미루었다.counts\u 업데이트 테마는 서버의 Kafka 소비자들이 추가로 구독합니다.우리의 생각은 Rust 엔진과 전방 사이에 서버 구성 요소가 있어서 특정한 입력으로 생성된 아날로그 데이터를 지속시킬 수 있다는 것이다.우리는 3000개의 에이전트가 있는 시뮬레이션 결과를 1000시간 동안 지속하고 1000개의 에이전트가 있는 2000시간과 비교할 수 있다.

프런트엔드 데이터 API 사용

우리는 전방에서 실시간으로 시간 정보를 수신해야 한다.업데이트된 카운트를 수신하기 위해 프런트엔드에서 HTTP 요청을 보내면 변경 사항을 폴링해야 하므로 프런트엔드에서 폴링 메시지의 빈도를 알기 어렵습니다.그 밖에 이것은 실시간이 아니므로 반드시 약간의 지연을 고려해야 한다.이러한 상황에서 HTTP가 작동하지 않는다는 것을 알기 때문에 클라이언트에게 메시지를 전송하여 업데이트하는 다른 방법을 연구하기 시작했습니다.
웹 소켓은 웹 브라우저와 서버 사이의 연결을 허용합니다.이 연결을 사용하면 서버에서 메시지를 클라이언트에 실시간으로 중계할 수 있습니다.이를 위해 우리는 도서관 을 사용했다.
콘센트io에는 다음과 같은 두 가지 구성 요소가 있습니다.

NodeJS 통합 서버

브라우저에서 메시지를 로드하는 클라이언트 라이브러리

Kafka 소비자의 업데이트 계수를 사용할 때 플러그인에 있는 서버에서 업데이트 계수를 가진 이벤트 epidemicStats를 보냅니다.

socket.emit('epidemicStats', {
  infected_std: 3,
  susceptible_std: 200,
  hospitalized_std: 5,
  recovered_std: 4,
  deceased_std: 0,
});

그리고 전방 React 프로그램에서 이 이벤트를 수신하고 플러그인에서 메시지를 정탐합니다.이를 위해 우리는 socket.io 라이브러리를 사용한다.시뮬레이션이 끝나면 같은 메시지를 보냅니다.

socket.on('epidemicStats', _function_ (messageRaw) {
    _const_ message = messageRaw;

   _if_ ("simulation_ended" _in_ message) {
        simulationEndedTemp = _true_;
        socket.close();
    }
    _else_ {
        _const_ { hour,
            susceptible, susceptible_std,
            infected, infected_std,
            hospitalized, hospitalized_std,
            recovered, recovered_std,
            deceased, deceased_std } = message;

        _const_ perHourStats = [hour,
            susceptible, susceptible_std,
            infected, infected_std,
            hospitalized, hospitalized_std,
            recovered, recovered_std,
            deceased, deceased_std
        ];

        buff.push(perHourStats);

콘센트io 클라이언트 실시간 도형을 시각화하는 도표 라이브러리

시간 시퀀스는 자주 업데이트되기 때문에 사용자 인터페이스를 파괴하지 않는 상황에서 변화에 신속하게 적응할 수 있는 라이브러리가 필요합니다. ,chart.js과vega-lite의 성능을 비교한 후에 우리는 이원도의 성능이 가장 좋다는 것을 발견했다.
다음은 동적 맵을 사용하여 여러 줄 폴리라인을 생성하는 방법입니다.

_let_ options = {
    legend: 'always',
    animatedZooms: _true_,
    title: 'Time Series Graph',
    ylabel: 'Number of Agents',
    xlabel: 'Hours',
    showRoller: _true_,
    errorBars: _true_,
    rollPeriod: 24
}
_const_ visualisationDiv = document.getElementById("vis");
_const_ graphInstance = _new_ Dygraph(visualisationDiv, convertToCsv(buff), options);

동적 그래프는 곤경에 빠지지 않고 대형 데이터 집합을 처리할 수 있다.이 도표도 매우 상호작용하여 우리에게 간단한 평이와 축소 옵션을 제공하였다.그것은 굴러가는 주기를 받아들여 이를 바탕으로 곡선을 평균적으로 한다.우리가 생성한 데이터는 시간에 따라 계산되기 때문에, 우리는 그것을 평균 24시간까지 계산한다.

다이내믹 맵 결론

감염, 질병, 입원 등 에이전트 계수를 생성하는 녹균 엔진을 Kafka에 전송하고 서버의 Kafka 소비자들이 이 에이전트를 읽고 웹 플러그인에 올리는 것을 논의했다.React 프로그램은 플러그인을 감청해서 이 데이터를 수신하고 실시간으로 업데이트되는 접선도를 그립니다.
다음은 Epirust의 아키텍처입니다.나는 이것이 네가 전체 국면을 이해하는 데 도움을 줄 수 있기를 바란다.
표층 구조도
나는 이 시리즈의 두 번째 부분에서 우리가 도표 라이브러리에서 진행한 성능 비교를 소개할 것이다.이 프로젝트의 후기에 우리는 에이전트의 이동을 추적하기 위해 격자 가시화를 구축했다.
프록시 격자 이동
모든 코드 세그먼트는 소스 오픈 프로젝트에서 가져옵니다.이 프로젝트를 마음대로 탐색하고 에이전트 기반 모델링에 대한 더 많은 정보를 읽으십시오.이 시리즈의 후속 부분을 주의하십시오.
어떤 피드백을 구하든지, 그리고 당신이 우리가 더 잘할 수 있다고 생각하는 방식.당신의 편지를 받아서 매우 기쁩니다!
Epirust 항목 보기 - Epirust