[IoT] 라즈베리파이와 리액트 소켓 통신하기

bbolddagu·2023년 4월 28일
0

IoT

목록 보기
1/7

라즈베리파이와 리액트 소켓 통신하기

라즈베리파이 설정

1. VNC Viewer 설치

1-1. IP 주소 입력


2. 터미널 열기

3. Node.js 설치

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

4. 프로젝트를 위한 폴더 생성

mkdir my_project
cd my_project

5. 소켓 서버 생성

nano server.js

6. 에디터가 열리면 다음과 같이 코드 입력

const io = require("socket.io")(3001, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"],
  },
});

io.on("connection", (socket) => {
  console.log("A user connected");

  // Handle barcode data
  socket.on("barcode", (data) => {
    console.log(`Received barcode: ${data}`);
    // Do something with the barcode data here
  });

  socket.on("disconnect", () => {
    console.log("A user disconnected");
  });
});
  • 이 코드는 포트 3001에서 소켓 서버를 시작하고, http://localhost:3000에서 요청을 수락하는 CORS 설정을 적용합니다.
  • io.on("connection", ...)은 클라이언트가 서버에 연결할 때마다 호출됩니다. 클라이언트가 서버에 연결하면 "A user connected"를 로그로 출력합니다.
  • socket.on("barcode", ...)은 클라이언트가 "barcode" 이벤트를 보낼 때마다 호출됩니다. 클라이언트에서는 socket.emit("barcode", data)를 호출하여 이벤트를 보낼 수 있습니다.
  • socket.on("disconnect", ...)는 클라이언트가 연결을 끊을 때마다 호출됩니다. 연결이 끊길 때 "A user disconnected"를 로그로 출력합니다.

리액트 설정

1. socket.io-client 라이브러리 설치

npm install socket.io-client

2. /src/socket.js 파일 생성 및 코드 작성

import io from 'socket.io-client';

const socket = io('{http://}'); // 라즈베리파이 IP 주소에 맞게 수정

export default socket;

3. App.tsx에 다음과 같이 코드 작성

import React, { useEffect, useState } from 'react';
import './App.css';;
import io from 'socket.io-client';
import socket from './socket';


function App() {
  const [data, setData] = useState(null);

  useEffect(() => {

    socket.on('connect', () => {
      console.log('connected to server');
    });

    socket.on('disconnect', () => {
      console.log('disconnected from server');
    });
    
    
    // 소켓 이벤트 리스너 등록
    socket.on('barcode', (barcodeData) => {
      setData(barcodeData);
    });

    // 컴포넌트 unmount 시, 소켓 이벤트 리스너 제거
    return () => {
      socket.off('barcode');
    };
  }, []);

  return (
    <div>
      {data ? (
        <div>
          <h1>Barcode Data</h1>
          <p>{data}</p>
        </div>
      ) : (
        <p>No data yet.</p>
      )}
    </div>
  );
}



export default App;

실행

1. 소켓 서버 실행

node server.js

2. 리액트 서버 실행

npm start

3. 소켓 서버 콘솔창에 다음과 같이 뜬다면 성공

0개의 댓글