[프로젝트/mnm] Vue - Spring 채팅 구현

<목차>

Spring

🍑 Web Socket Dependency 추가

해당 패키지에 stom도 내장되어있다.

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-websocket'
}

 

🍑 Web Socket Config 설정

✔️ 허용하는 origin에 vue adress를 추가해준다.

package com.project.mnm.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/send");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/").setAllowedOrigins("http://localhost:8080").withSockJS();
    }
}

 

 

🍑 Chatting Model

package com.project.mnm.domain;

import lombok.*;

import javax.persistence.*;
import java.sql.Timestamp;

@Builder
@Getter
@Setter
@ToString
@AllArgsConstructor
@NoArgsConstructor
@Entity
@Table(name = "chattings")
public class Chatting {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;
    @OneToOne
    @JoinColumn(name = "uid")
    private User user;
    @Column(name = "message")
    private String message;
    @Column(name = "send_at")
    private Timestamp sendAt;
    @Column(name = "is_request")
    private Boolean isRequest;
}

 

🍑 Chatting Service

데이터베이스에 채팅 내용을 저장한다.

package com.project.mnm.service;

import com.project.mnm.domain.Chatting;
import com.project.mnm.domain.User;
import com.project.mnm.repository.ChattingRepository;
import com.project.mnm.repository.UserRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

@RequiredArgsConstructor
@Service
public class ChattingService {
    private final UserRepository userRepository;
    private final ChattingRepository chattingRepository;

    public Chatting chattingHandler(Chatting chatting) {
        User user = userRepository.findById(chatting.getUser().getId())
                .orElseThrow(() -> new IllegalArgumentException("가입되지 않은 사용자입니다."));

        chatting.setUser(user);

        return chattingRepository.save(chatting);
    }
}

 

🍑 Chatting Controller

✔️ /receive로 채팅 내용을 받는다.

✔️ /send로 채팅 내용을 보낸다.

package com.project.mnm.controller;

import com.project.mnm.domain.Chatting;
import com.project.mnm.service.ChattingService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class ChattingController {
    @Autowired
    private ChattingService chattingService;

    @MessageMapping("/receive")
    @SendTo("/send")
    public Chatting chattingHandler(Chatting chatting) {
        return chattingService.chattingHandler(chatting);
    }
}

 

Vue

🍑 Web Socket, Stomp 설치

✔️ sockjs-client는 웹소켓 객체를 생성하기 위해 설치한다. 

✔️ webstomp-client는 stomp을 사용하기 위해 설치한다.

(test_front) D:\mnm\project-mnm-test-front>npm i webstomp-client sockjs-client

 

🍑 ChattingView.vue

<template>
    <v-container>
        <v-expansion-panel>
        <v-expansion-panel-header><h1>채팅</h1></v-expansion-panel-header>
        <v-expansion-panel-content>
        <v-card class="mt-2">
            <v-card-title><h2>채팅 테스트</h2></v-card-title>
            <v-card-text>
                      <v-alert
                        dense
                        type="info"
                        color="teal lighten-3"
                    >두개 이상의 브라우저를 띄워 간단한 채팅을 확인해 볼 수 있다.</v-alert>
                    <v-container>
                        uid : 
                        <input
                            v-model="uid"
                            type="text"
                        >
                        message : 
                        <input
                            v-model="message"
                            type="text"
                            @keyup="sendMessage"
                        >
                        <div
                            class="mt-2"
                            v-for="(item, idx) in recvList"
                            :key="idx"
                        >
                            <v-card
                                class="mt-2 mb-2"
                                color="teal lighten-3"
                                dark
                                max-width="400"
                            >
                                <v-card-text>
                                    <div>uid : {{ item.user.id }}</div>
                                    <div>{{ item.message }}</div>
                                    <div>{{ item.sendAt }}</div>
                                </v-card-text>
                            </v-card>
                        </div>
                    </v-container>
            </v-card-text>
        </v-card>
        </v-expansion-panel-content>
    </v-expansion-panel>
    </v-container>
</template>

<script lang="js">
import Stomp from 'webstomp-client'
import SockJS from 'sockjs-client'

export default {
    data() {
        return {
            uid: '',
            message: '',
            recvList: []
            }
    },
    created() {
        this.connect() // ChattingView.vue 생성 시 소켓 연결 시도
    },
    methods: {
        sendMessage(e) {
            if(e.keyCode === 13 && this.uid !== '' && this.message !== '') {
                this.send();
                this.message = '';
            }
        },
        send() {
            console.log("Send message:" + this.message);
            if (this.stompClient && this.stompClient.connected) {
                const msg = { 
                user: {
                    id: this.uid
                },
                message: this.message,
                sendAt: Date.now(),
                isRequest: false,
                };
                this.stompClient.send("/receive", JSON.stringify(msg), {});
            }
        }, 
        connect() {
            const serverURL = "http://localhost:5050"
            let socket = new SockJS(serverURL);
            this.stompClient = Stomp.over(socket);
            console.log(`소켓 연결을 시도합니다. 서버 주소: ${serverURL}`)
            this.stompClient.connect(
                {},
                frame => {
                this.connected = true;
                console.log('소켓 연결 성공', frame);
                this.stompClient.subscribe("/send", res => {
                    console.log('구독으로 받은 메시지 입니다.', res.body);
                    this.recvList.push(JSON.parse(res.body))
                });
                },
                error => {
                console.log('소켓 연결 실패', error);
                this.connected = false;
                } 
            );               
        }
    }
}
</script>

 

🍑 채팅 테스트

창을 여러개 띄워서 채팅을 테스트해볼 수 있다. 

데이터베이스에도 채팅 내용이 잘 저장되는 모습을 확인 할 수 있다.

 

---

Ref.

vue spring boot 웹소켓 채팅 만들기 (velog.io)