[javascript] Socket.io를 사용하여 실시간 날씨 정보를 어떻게 구현할 수 있나요?

27 Nov 2023

javascript

개요

이 기술 블로그에서는 Socket.io를 사용하여 실시간으로 날씨 정보를 구현하는 방법에 대해 알아보겠습니다. Socket.io는 웹 소켓을 지원하는 실시간 통신 라이브러리로, 클라이언트와 서버 간 양방향 통신을 가능하게 합니다. 이를 활용하여 실시간으로 날씨 정보를 업데이트할 수 있습니다.

준비 사항

이 예제를 따라하기 위해서는 다음과 같은 준비사항이 필요합니다.

Node.js와 npm이 설치되어 있어야 합니다.
Socket.io를 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다.

$ npm install socket.io

날씨 정보를 제공하는 외부 API가 필요합니다. 예를 들어 OpenWeather API를 사용할 수 있습니다.

서버 구현

먼저, 서버를 구현해 보겠습니다. 서버에서는 socket.io 라이브러리를 사용하여 클라이언트와의 실시간 통신을 처리합니다.

// server.js

const express = require('express');
const http = require('http');
const socketio = require('socket.io');
const axios = require('axios');

const app = express();
const server = http.createServer(app);
const io = socketio(server);

const API_KEY = 'YOUR_API_KEY'; // OpenWeather API Key

io.on('connection', (socket) => {
  console.log('New client connected');

  // 클라이언트에서 요청이 들어오면 날씨 정보를 업데이트하고 클라이언트에게 전송합니다.
  socket.on('getWeather', async (location) => {
    try {
      const url = `https://api.openweathermap.org/data/2.5/weather?q=${location}&units=metric&appid=${API_KEY}`;
      const response = await axios.get(url);
      const weatherData = response.data;
      socket.emit('weatherUpdate', weatherData);
    } catch (error) {
      console.error('Error fetching weather data:', error);
    }
  });

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

server.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

위 코드에서는 socket.io를 사용하여 웹 소켓 서버를 생성합니다. 클라이언트의 연결이 수립되면 connection 이벤트가 발생하고, 클라이언트로부터 getWeather 이벤트가 들어오면 해당 지역의 날씨 정보를 가져와 weatherUpdate 이벤트로 클라이언트에게 전송합니다.

클라이언트 구현

이제 클라이언트를 구현해 보겠습니다. 클라이언트에서는 서버와의 실시간 통신을 위해 socket.io-client 라이브러리를 사용합니다.

// client.js

const socket = io();

// 날씨 정보를 받는 이벤트 핸들러
socket.on('weatherUpdate', (weatherData) => {
  console.log('Received weather update:', weatherData);
  // 날씨 정보를 화면에 출력하거나 필요한 작업을 수행합니다.
});

// 특정 지역의 날씨 정보를 요청하는 함수
function requestWeather(location) {
  socket.emit('getWeather', location);
}

// 예시
requestWeather('Seoul');

위 코드에서는 socket.io-client를 사용하여 서버에 연결합니다. 서버로부터 weatherUpdate 이벤트를 받으면 해당 데이터를 처리하는 로직을 추가할 수 있습니다. requestWeather 함수는 특정 지역의 날씨 정보를 요청합니다.

실행

터미널에서 다음 명령어를 사용하여 서버를 실행합니다.

$ node server.js

클라이언트를 실행하기 위해 다른 터미널 창을 열고 다음 명령어를 입력합니다.

$ node client.js

이제 서버와 클라이언트가 연결되고 특정 지역의 날씨 정보를 실시간으로 받아올 준비가 되었습니다. requestWeather 함수를 수정하여 원하는 위치의 날씨 정보를 요청하고, 서버에서 업데이트된 날씨 정보를 수신할 수 있습니다.

결론

이 글에서는 Socket.io를 사용하여 실시간 날씨 정보를 구현하는 방법에 대해 알아보았습니다. Socket.io를 활용하면 웹 소켓을 사용하여 클라이언트와 서버 간 실시간 통신이 가능해집니다. 다른 데이터나 이벤트도 실시간으로 업데이트하는데 사용할 수 있으니, 이를 응용하여 다양한 실시간 기능을 개발해보세요.