Vue.js의 양방향 데이터 바인딩을 활용한 실시간 채팅 기능 구현 방법

15 Sep 2023

vuejs

Vue.js는 웹 애플리케이션의 구성 요소 기반 개발을 편리하게 해주는 JavaScript 프레임워크입니다. 그 중에서도 Vue.js의 양방향 데이터 바인딩은 데이터와 DOM 요소 사이의 동적인 연결을 쉽게 만들어줍니다. 이번 글에서는 Vue.js의 양방향 데이터 바인딩을 활용하여 실시간 채팅 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 프로젝트 세팅

먼저 Vue.js를 사용하여 채팅 애플리케이션을 개발하기 위한 프로젝트를 세팅해야 합니다. 다음 명령어를 사용하여 Vue CLI를 설치합니다.

npm install -g @vue/cli

Vue CLI를 설치한 후 다음 명령어를 사용하여 Vue 프로젝트를 생성합니다.

vue create chat-app
cd chat-app

2. 컴포넌트 구성

다음으로 채팅 애플리케이션의 컴포넌트를 구성해야 합니다. Vue 프로젝트의 src 폴더 안에 components 폴더를 생성한 후, ChatApp.vue 파일을 만듭니다.

<template>
  <div>
    <div v-for="message in messages" :key="message.id">
      {{ message.text }}
    </div>
    <input v-model="newMessage" @keydown.enter="sendMessage" placeholder="메시지를 입력하세요">
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      newMessage: ""
    };
  },
  methods: {
    sendMessage() {
      this.messages.push({
        id: Date.now(),
        text: this.newMessage
      });
      this.newMessage = "";
    }
  }
};
</script>

위 코드에서는 div 요소를 사용하여 현재까지 전달된 메시지를 표시하고, input 요소를 사용하여 새로운 메시지를 입력받습니다. 데이터 바인딩을 위해 v-model 디렉티브를 사용하였고, Enter 키를 눌렀을 때 sendMessage 메소드가 호출되도록 설정하였습니다.

3. 실시간 업데이트

채팅 애플리케이션에서는 실시간으로 새로운 메시지가 업데이트되어야 합니다. 이를 위해 socket.io 라이브러리를 사용하여 실시간 통신을 구현할 수 있습니다. 먼저 다음 명령어를 사용하여 socket.io를 설치합니다.

npm install socket.io

그리고 main.js 파일에서 다음과 같이 코드를 작성합니다.

import Vue from "vue";
import App from "./App.vue";
import io from "socket.io-client";

const socket = io("<서버 주소>");

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
  created() {
    socket.on("chat message", (message) => {
      this.$children[0].messages.push(message);
    });
  }
}).$mount("#app");

socket.io-client 라이브러리를 가져와서 웹소켓 연결을 설정하고, socket.on 메소드를 통해 서버로부터 전달된 메시지를 수신하여 messages 배열에 추가합니다.

4. 서버 측 구현

마지막으로 서버 측 코드를 작성해야 합니다. 이를 위해 Node.js와 Express.js를 사용할 수 있습니다. 다음과 같이 서버 코드를 작성합니다.

const express = require("express");
const app = express();
const http = require("http").createServer(app);
const io = require("socket.io")(http);

app.use(express.static("public"));

io.on("connection", (socket) => {
  socket.on("chat message", (message) => {
    io.emit("chat message", message);
  });
});

http.listen(3000, () => {
  console.log("서버가 http://localhost:3000 에서 시작되었습니다.");
});

위 서버 코드에서는 socket.io를 사용하여 클라이언트와 실시간으로 통신하고, io.emit 메소드를 통해 모든 클라이언트에게 메시지를 전송합니다.

5. 빌드 및 실행

이제 Vue 프로젝트를 빌드하고 실행할 차례입니다. 다음 명령어를 사용하여 빌드하고 서버를 실행합니다.

npm run build
node server.js

만약 개발 서버에서 실행하고 싶다면, 다음 명령어를 사용하여 개발 서버를 실행합니다.

npm run serve

웹 브라우저에서 “http://localhost:8080”에 접속하여 실시간 채팅 애플리케이션을 사용할 수 있습니다.

이제 Vue.js의 양방향 데이터 바인딩을 활용하여 실시간 채팅 기능을 구현하는 방법에 대해 알아보았습니다. 이를 통해 웹 애플리케이션에서 실시간 통신을 구현할 수 있는 기술을 습득할 수 있습니다.

#Vue #Vue.js #양방향데이터바인딩 #실시간채팅