Node.js에서 Python Flask로부터 나오는 데이터를 받는방법

필자는 Socket.io 를 사용 했습니다.

const express = require('express');

const path = require('path');

const app = express();

const port = 3001;

// const cors = require('cors');

// app.use(cors());

// HTML 파일 제공을 위한 정적 파일 경로 설정

app.use(express.static(path.join(__dirname, 'public')));

app.use('/js', express.static(path.join(__dirname, 'js'))); // js 폴더 설정

//관례상 public이나 assets 로 많이 사용한다고함

//HTML경로

app.get('/', (req, res) => {

  res.sendFile(path.join(__dirname, 'public', 'modbusPage.html'));

});

//3001번 포트에서 실행

app.listen(port, () => {

  console.log(`Server is running on http://localhost:${port}`);

});

 

우선적으로 페이지 서버를 만들어 줍시다.

더이상 LiveServer (localhost:5500) 에서는 구현이 불가능함

 

const express = require('express');

const http = require('http');

const socketIo = require('socket.io');

const EventSource = require('eventsource');

const app = express();

const server = http.createServer(app);

const io = socketIo(server, {

  cors: {

    origin: 'http://localhost:3001',  

    methods: ['GET', 'POST']      

  }  

});

localhost:3001에서 페이지를 구현하고 해당 페이지에 Python Flask의 데이터를 받아올것이기 때문에

Cors설정을 해주어야합니다, Cors정책 위반으로 코드실행이 안될수도 있습니다.

EventSource패키지를 사용하여 Flask에서 보내는 데이터를 가져올수 있습니다.

const es = new EventSource(PythonAddress);

저장해둔 주소로 EventSource를 만듭니다.

 

es.onmessage = function(event) {

 

  const data = JSON.parse(event.data);

  console.log('From Python: ', data);

 

  // Socket.io를 통해 클라이언트로 데이터 전송

  io.emit('liveTemp', data);

};

io.on('connection', (socket) => {

  console.log('Connected');

  socket.on('disconnect', () => {

    console.log('User disconnected from channel');

  });

});

// 서버 시작

server.listen(3000, () => {

  console.log('Server running on http://localhost:3000');

});

Flask에서 메세지가 도착할 경우에 socket.io 패키지를 사용하여 실시간으로 3001번 포트에서 사용하기 위해서 보냅니다.

3001번 포트의 HTML 화면에서

<script>

   

// socket.io-client 불러오기

// 서버에 연결

const socket = io('http://localhost:3000'); // 서버 주소 (예: http://localhost:3000)

// 연결 성공 시 이벤트

socket.on('connect', () => {

    console.log('Connected to server');

   

   

});

// 서버에서 보내는 메시지 수신

socket.on('liveTemp', (data) => {

    // console.log('Received from server:', data);

    //   console.log("온도: "+data.Temperature);

    //   console.log("습도: "+data.Humidity);

    const changedTemp = data.Temperature;

    const changedHumid = data.Humidity;

    document.getElementById('scTemp').innerText=data.Temperature;

    document.getElementById('scHum').innerText=data.Humidity;

    drawReal(changedTemp,changedHumid);

   

});

// 서버 연결 끊어졌을 때

socket.on('disconnect', () => {

    console.log('Disconnected from server');

});

window.onload=function(){

   

    const clockArea=document.getElementById('kstClock');

    function clock(){

           

            clockArea.innerHTML=realTime();

            setTimeout(clock,1000);

        }

    clock();

}

</script>

데이터를 받아서 drawReal이라는 차트함수에 대입하여 차트를 1초마다 갱신합니다.

clock은 재귀를 통하여 매 1초마다 갱신되도록 하였습니다.