[React] Realtime으로 데이터 주고받기

React를 통해 실시간으로 데이터를 확인하려면 WebSockets 또는 Server-Sent Events(SSE)와 같은 실시간 데이터 솔루션을 사용해야 한다.

 

이러한 기술을 사용하면 업데이트를 위해 수동으로 서버를 폴링하지 않고도 서버에서 업데이트를 사용할 수 있는 즉시 받을 수 있다.

 

해당 예제는 jira ticket을 이용한 예제이며 서버는 2초마다 업데이트를 보내고 React 클라이언트는 새 업데이트를 받을 때마다 티켓 상태를 업데이트한다.

 

 

Server-Sent Event(SSE)

 

Server-side (Node.js + Express):

const express = require("express");
const app = express();
 
app.get("/sse", (req, res) => {
  res.writeHead(200, {
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
    Connection: "keep-alive",
  });
 
  // Simulate a real-time data source
  setInterval(() => {
    const data = {
      key: "TICKET-123",
      fields: {
        summary: "This is a sample ticket",
        status: {
          name: "Open",
        },
      },
    };
 
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 2000);
});
 
app.listen(3000, () => {
  console.log("SSE server listening on port 3000");
});

 

Client-side (React):

 

import React, { useState, useEffect } from "react";
 
const JiraTicket = () => {
  const [ticket, setTicket] = useState({});
 
  useEffect(() => {
    const eventSource = new EventSource("http://localhost:3000/sse");
    eventSource.onmessage = (event) => {
      setTicket(JSON.parse(event.data));
    };
 
    return () => {
      eventSource.close();
    };
  }, []);
 
  return (
    <div>
      <h1>{ticket.key}</h1>
      <p>{ticket.fields.summary}</p>
      <p>{ticket.fields.status.name}</p>
    </div>
  );
};
 
export default JiraTicket;

 

 

 

WebSocket

 

Server-side (Node.js + Express + WebSockets):

const express = require("express");
const http = require("http");
const WebSocket = require("ws");
 
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
 
wss.on("connection", (ws) => {
  console.log("Client connected");
 
  // Simulate a real-time data source
  setInterval(() => {
    const data = {
      key: "TICKET-123",
      fields: {
        summary: "This is a sample ticket",
        status: {
          name: "Open",
        },
      },
    };
 
    ws.send(JSON.stringify(data));
  }, 2000);
 
  ws.on("close", () => {
    console.log("Client disconnected");
  });
});
 
server.listen(3000, () => {
  console.log("WebSockets server listening on port 3000");
});

 

 

Client-side (React):

import React, { useState, useEffect } from "react";
 
const JiraTicket = () => {
  const [ticket, setTicket] = useState({});
 
  useEffect(() => {
    const ws = new WebSocket("ws://localhost:3000");
    ws.onmessage = (event) => {
      setTicket(JSON.parse(event.data));
    };
 
    return () => {
      ws.close();
    };
  }, []);
 
  return (
    <div>
      <h1>{ticket.key}</h1>
      <p>{ticket.fields.summary}</p>
      <p>{ticket.fields.status.name}</p>
    </div>
  );
};
 
export default JiraTicket;