[javascript] Vue.js와 Socket.io를 이용한 실시간 데이터 통신

01 Dec 2023

javascript

이 포스트에서는 Vue.js와 Socket.io를 사용하여 실시간으로 데이터를 통신하는 방법을 알아보겠습니다.

Vue.js란?

Vue.js는 사용자 인터페이스를 개발하기 위한 프로그레시브 프레임워크입니다. React나 Angular와 같은 다른 프레임워크와 경쟁하면서 많은 개발자들에게 사랑받고 있는 프레임워크입니다.

Socket.io란?

Socket.io는 웹 소켓을 사용하여 실시간 양방향 통신을 제공하는 JavaScript 라이브러리입니다. 실시간으로 데이터를 전송하고 수신하는 데 사용되며, 클라이언트와 서버 간의 신속한 통신을 가능하게 합니다.

Vue.js와 Socket.io 연결하기

먼저, Vue.js 프로젝트를 설정해야 합니다. 다음 명령어를 사용하여 Vue CLI를 설치하고 새 프로젝트를 생성합니다.

npm install -g @vue/cli
vue create my-project

Vue.js 프로젝트를 만들었다면, Socket.io를 설치해야 합니다. 아래 명령어를 사용하여 소켓 라이브러리를 설치합니다.

npm install socket.io-client

이제, Vue 컴포넌트에서 Socket.io를 사용할 수 있습니다. 예를 들어, 실시간으로 메시지를 표시하는 채팅 애플리케이션을 만들어 보겠습니다.

<template>
  <div>
    <h1>Chat</h1>
    <ul>
      <li v-for="message in messages" :key="message.id">{{ message.text }}</li>
    </ul>
    <input v-model="newMessage" @keyup.enter="sendMessage">
  </div>
</template>

<script>
import io from 'socket.io-client';

export default {
  data() {
    return {
      messages: [],
      newMessage: '',
      socket: null,
    };
  },
  mounted() {
    this.socket = io('http://localhost:3000'); // Socket.io 서버 주소
    this.socket.on('message', message => {
      this.messages.push(message);
    });
  },
  methods: {
    sendMessage() {
      this.socket.emit('message', this.newMessage);
      this.newMessage = '';
    },
  },
};
</script>

위의 코드에서는 Vue 컴포넌트가 마운팅되면 Socket.io 클라이언트를 생성하고, 메시지를 수신할 때마다 message 이벤트를 처리하여 새로운 메시지를 배열에 추가합니다. sendMessage 메소드는 사용자가 엔터 키를 눌렀을 때 실행되며, 새로운 메시지를 Socket.io 서버로 전송합니다.

위의 코드에서 Socket.io 서버 주소를 http://localhost:3000으로 설정했습니다. 실제로는 해당 주소에 Socket.io 서버가 실행 중이어야 합니다.

결론

이 글에서는 Vue.js와 Socket.io를 사용하여 실시간 데이터 통신하는 방법을 간단히 설명했습니다. Vue.js와 Socket.io는 각각 강력한 도구이며, 함께 사용하면 실시간 환경에서 유용한 기능을 구현할 수 있습니다.

더 자세한 내용은 Vue.js 공식 문서와 Socket.io 공식 문서를 참조하시기 바랍니다.

Vue.js 공식 문서: https://vuejs.org/
Socket.io 공식 문서: https://socket.io/