Kafka, NodeJs 및 Socket.io를 사용한 데이터 스트리밍 초보자 가이드

15599 단어 nodejavascript
이 작은 가이드를 통해 누구나 몇 분 안에 Kafka 작업을 이해하고 시작할 수 있도록 하는 것이 제 의도입니다.
이 가이드를 따르고 언급된 도구를 사용한 후에는 출력을 달성하는 유일한 방법이 아니므로 작업 예제를 손에 들고 고급 개념을 사용하기 위한 이해가 있어야 합니다.



개별 모듈을 단계별로 구축하는 것으로 시작하여 결국 모든 모듈을 통합합니다. 자, 시작하겠습니다!

1. 카프카 설정



여기에서 시스템에 Kafka를 설정했습니다. 그래서 공식 Apache Kafka quick-start guide으로 향하십시오. 3단계까지 단계를 수행하고 원하는 이름으로 주제를 만듭니다. 내 예에서는 topic_stream이라는 이름을 사용했습니다.

2. Kafka 소비자 만들기



돌아와서 기뻐요! 이제 Kafka-node consumer을 사용하여 소비자가 어떻게 작동하는지 살펴보겠습니다. 소비자는 단순히 Kafka 주제에서 메시지를 읽습니다.
아래에서 topic_stream를 구독하고 생성된 데이터를 인쇄하는 소비자를 만들었습니다.
1단계에서 Kafka 클라이언트port 9092를 설정했습니다. 설정에 따라 구성을 변경해야 합니다.

const kafka = require('kafka-node');

const Consumer = kafka.Consumer,
  client = new kafka.KafkaClient('localhost:9092'),
  consumer = new Consumer(
  client, [ { topic: 'topic_stream', partition: 0 } ], { autoCommit: false });

  consumer.on('message', function (message) {
    console.log(message);
  });


아주 간단하죠?

3. 소켓 API 생성



이제 NodeJs 서비스에서 WebSocket API를 설정하여 웹 페이지로 데이터 스트리밍을 시작하겠습니다. Socket.io 과 함께 express 을 사용합니다. server_consumer.js라는 파일에서 다음을 작성하십시오.

const express = require('express');
const port = 3000;
const app = express();

const server = app.listen(port, () => {
  console.log(`Listening on port ${server.address().port}`);
});
const io = require('socket.io')(server, {
  cors: {
    origin: '*',
  }
});

io.on('connection', client => {
  console.log('Connected', client);

  client.on('event', data => { 
    console.log('Event triggered by client')
   });

  client.on('disconnect', () => { 
    console.log('Client disconnected');
   });
});


4. 컨슈머, 소켓 API 생성



이제 우리는 소비자가 무엇이며 Socket.io API를 어떻게 사용할 것인지 알고 있습니다. 이제 모두 함께 가져와 봅시다. 이제 소비자도 포함하도록 server_consumer.js를 편집합니다.

const kafka = require('kafka-node');
const express = require('express');
const port = 3000;
const app = express();

const Consumer = kafka.Consumer,
 client = new kafka.KafkaClient('localhost:9092'),
 consumer = new Consumer(
 client, [ { topic: 'topic_stream', partition: 0 } ], { autoCommit: false });

const server = app.listen(port, () => {
  console.log(`Listening on port ${server.address().port}`);
});
const io = require('socket.io')(server, {
  cors: {
    origin: '*',
  }
});

io.on('connection', client => {
  console.log('Connected', client);

consumer.on('message', function (message) {
    client.emit('request', message.value);
  });

client.on('disconnect', () => { 
    console.log('Client disconnected');
 });
});


5. Chart JS를 사용하여 프런트엔드 만들기



웹 브라우저에서 소켓 API를 호출하고 Chart JS를 사용하여 데이터를 표시하는 웹 페이지를 생성합니다. D3.js 또는 데이터를 표시하는 데 익숙한 다른 라이브러리를 사용할 수 있습니다.
간단한 index.html를 만들어 보겠습니다.

<html>
<head>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
 <script type="text/javascript" src="index.js"></script>
</head>
<body>
  <canvas id="myChart" width='300' height='100'></canvas>
</body>
</html>

index.js 에서 소켓 API를 호출하고 데이터에 대한 리스너를 시작합니다.

$(document).ready(function(){
  const count = 10;
  const data = {
    labels : [...Array(count).keys()].map(i => i.toString()),
    datasets : [
      {
        label: '# - Streamed number',
        backgroundColor: "rgba(50,220,220,0.5)",
        data : Array(count).fill(0),
      }
    ]
  }
  const updateData = function(newVal){
    const labels = data["labels"];
    const dataSetInitial = data["datasets"][0]["data"];
    count++;
    labels.push(count.toString());
    labels.shift();
    const newData = Math.floor(newVal);
    dataSetInitial.push(newData);
    dataSetInitial.shift();
  };
  const ctx = document.getElementById("myChart").getContext("2d");
  const chart = new Chart(ctx, {
    type: 'line',
    data,
    options: {animation : false}
  });

  function webSocketInvoke() {
    var socket = io('http://localhost:3000');
    socket.on('event', (value) => {
      updateData(value);
      chart.update();
    });
  }
  webSocketInvoke();
 });


이제 index.html를 열고 데이터가 스트리밍될 때까지 기다립니다.

6: 데이터 생성



설정으로 스트리밍할 수 있는 데이터를 생성하는 마지막 단계로 이동하겠습니다. 이를 위해 두 가지 옵션을 언급하겠습니다.
  • Kafka 빠른 시작 가이드의 Step 4에 제공된 지침을 따르십시오. 그게 다야.
  • kafka-node 라이브러리를 더 자세히 살펴보려면 producer.js 파일을 실험 및 생성하고 노드 환경을 사용하여 실행할 수 있습니다. 주어진 예제 파일here .



    • 그게 다야! 이제 완전한 기능을 갖춘 Apache Kafka 스트림을 손에 들고 종단 간 흐름이 작동하는 방식을 이해해야 합니다.

    프로젝트용 Github 링크: https://github.com/yuvraj2112/kafka_socket_stream
    RaspberryPi3에서 Web of Things Framework for NodeJS를 실행해보세요
    【PBCS】비즈니스・룰:가치 대입시의 주의점

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage