💡스프링부트 웹 소켓 실시간 채팅하기 (JSP)💡

gdhi·2024년 2월 22일

⭐Spring Boot(Thymeleaf, JPA) 웹 쇼핑몰 만들기⭐

목록 보기

18/22

💡프로젝트에 JSP 추가해서 모달로 띄우던지 챗봇을 만들던지 어떻게 하면 될 듯 하다💡

📖초기 환경설정

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>

👉 프로젝트 구조

📌application.properties

server.port=80

spring.mvc.view.prefix=/WEB-INF/view/
spring.mvc.view.suffix=.jsp

📌WebSocketConfig

package com.ChattingTest.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;

@EnableWebSocketMessageBroker
@Configuration
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");

    }
}

📌MainController

package com.ChattingTest.controller;

import com.ChattingTest.dto.ChattingRoom;
import com.ChattingTest.dto.Message;
import jakarta.servlet.http.Cookie;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.messaging.handler.annotation.DestinationVariable;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PatchMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

import java.util.*;

@Controller
public class MainController {

    // 채팅방 목록
    public static LinkedList<ChattingRoom> chattingRoomList = new LinkedList<>();


    //	----------------------------------------------------
    // 유틸 메서드

    // 방 번호로 방 찾기
    public ChattingRoom findRoom(String roomNumber) {
        ChattingRoom room = ChattingRoom.builder().roomNumber(roomNumber).build();
        int index = chattingRoomList.indexOf(room);

        if(chattingRoomList.contains(room)) {
            return chattingRoomList.get(index);
        }
        return null;
    }


    // 쿠키에 추가
    public void addCookie(String cookieName, String cookieValue) {
        ServletRequestAttributes attr = (ServletRequestAttributes) RequestContextHolder.currentRequestAttributes();
        HttpServletResponse response = attr.getResponse();

        Cookie cookie = new Cookie(cookieName, cookieValue);

        int maxage = 60 * 60 * 24 * 7;
        cookie.setMaxAge(maxage);
        response.addCookie(cookie);
    }



    // 방 번호, 닉네임 쿠키 삭제
    public void deleteCookie( ) {
        ServletRequestAttributes attr = (ServletRequestAttributes)RequestContextHolder.currentRequestAttributes();
        HttpServletResponse response = attr.getResponse();

        Cookie roomCookie = new Cookie("roomNumber", null);
        Cookie nicknameCookie = new Cookie("nickname",null);

        roomCookie.setMaxAge(0);
        nicknameCookie.setMaxAge(0);

        response.addCookie(nicknameCookie);
        response.addCookie(roomCookie);
    }



    // 쿠키에서 방번호, 닉네임 찾기
    public Map<String, String> findCookie() {
        ServletRequestAttributes attr = (ServletRequestAttributes)RequestContextHolder.currentRequestAttributes();
        HttpServletRequest request = attr.getRequest();

        Cookie[] cookies = request.getCookies();
        String roomNumber = "";
        String nickname= "";

        if(cookies == null) {
            return null;
        }

        if(cookies != null) {
            for(int i=0;i<cookies.length;i++) {
                if("roomNumber".equals(cookies[i].getName())) {
                    roomNumber = cookies[i].getValue();
                }
                if("nickname".equals(cookies[i].getName())) {
                    nickname = cookies[i].getValue();
                }
            }

            if(!"".equals(roomNumber) && !"".equals(nickname)) {
                Map<String, String> map = new HashMap<>();
                map.put("nickname", nickname);
                map.put("roomNumber", roomNumber);

                return map;
            }
        }

        return null;
    }

    // 닉네임 생성
    public void createNickname(String nickname) {
        addCookie("nickname", nickname);
    }

    // 방 입장하기
    public boolean enterChattingRoom(ChattingRoom chattingRoom, String nickname) {
        createNickname(nickname);

        if(chattingRoom == null) {
            deleteCookie();
            return false;
        } else {
            LinkedList<String> users = chattingRoom.getUsers();
            users.add(nickname);

            addCookie("roomNumber", chattingRoom.getRoomNumber());
            return true;
        }
    }


    //	----------------------------------------------------

    // 컨트롤러

    // 메인화면
    @GetMapping("/")
    public String main() {
        return "main";
    }


    // 채팅방 목록
    @GetMapping("/chattingRoomList")
    public ResponseEntity<?> chattingRoomList() {
        return new ResponseEntity<LinkedList<ChattingRoom>>(chattingRoomList, HttpStatus.OK);
    }


    // 방 만들기
    @PostMapping("/chattingRoom")
    public ResponseEntity<?> chattingRoom(String roomName, String nickname) {

        // 방을 만들고 채팅방목록에 추가
        String roomNumber = UUID.randomUUID().toString();
        ChattingRoom chattingRoom = ChattingRoom.builder()
                .roomNumber(roomNumber)
                .users(new LinkedList<>())
                .roomName(roomName)
                .build();

        chattingRoomList.add(chattingRoom);

        // 방 입장하기
        enterChattingRoom(chattingRoom, nickname);

        return new ResponseEntity<>(chattingRoom, HttpStatus.OK);
    }


    // 방 들어가기
    @GetMapping("/chattingRoom-enter")
    public ResponseEntity<?> EnterChattingRoom(String roomNumber, String nickname){

        // 방 번호로 방 찾기
        ChattingRoom chattingRoom = findRoom(roomNumber);

        if(chattingRoom == null) {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        } else {
            // 방 들어가기
            enterChattingRoom(chattingRoom, nickname);

            return new ResponseEntity<>(chattingRoom, HttpStatus.OK);
        }
    }

    // 방 나가기
    @PatchMapping("/chattingRoom-exit")
    public ResponseEntity<?> ExitChattingRoom(){

        Map<String, String> map = findCookie();

        if(map == null) {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }


        String roomNumber = map.get("roomNumber");
        String nickname = map.get("nickname");

        // 방목록에서 방번호에 맞는 유저목록 가져오기
        ChattingRoom chattingRoom = findRoom(roomNumber);
        List<String> users = chattingRoom.getUsers();

        // 닉네임 삭제
        users.remove(nickname);

        // 쿠키에서 닉네임과 방번호 삭제
        deleteCookie();

        // 유저가 한명도 없다면 방 삭제
        if(users.size() == 0) {
            chattingRoomList.remove(chattingRoom);
        }

        return new ResponseEntity<>(chattingRoom, HttpStatus.OK);
    }


    // 참가 중이었던 대화방
    @GetMapping("/chattingRoom")
    public ResponseEntity<?> chattingRoom() {
        // 쿠키에 닉네임과 방번호가 있다면 대화중이던 방이 있던것
        Map<String, String> map = findCookie();

        if(map == null) {
            return new ResponseEntity<>(HttpStatus.OK);
        }

        String roomNumber = map.get("roomNumber");
        String nickname = map.get("nickname");

        ChattingRoom chattingRoom = findRoom(roomNumber);

        if(chattingRoom == null) {
            deleteCookie();
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        } else {
            Map<String, Object> map2 = new HashMap<>();
            map2.put("chattingRoom", chattingRoom);
            map2.put("myNickname", nickname);

            return new ResponseEntity<>(map2, HttpStatus.OK);
        }
    }



    //	----------------------------------------------------
    // 메세지 컨트롤러

    // 여기서 메세지가 오면 방목록 업데이트
    @MessageMapping("/socket/roomList")
    @SendTo("/topic/roomList")
    public String roomList() {
        return "";
    }

    // 채팅방에서 메세지 보내기
    @MessageMapping("/socket/sendMessage/{roomNumber}")
    @SendTo("/topic/message/{roomNumber}")
    public Message sendMessage(@DestinationVariable String roomNumber, Message message) {
        return message;
    }

    // 채팅방에 입장 퇴장 메세지 보내기
    @MessageMapping("/socket/notification/{roomNumber}")
    @SendTo("/topic/notification/{roomNumber}")
    public Map<String, Object> notification(@DestinationVariable String roomNumber, Map<String, Object> chattingRoom) {
        return chattingRoom;
    }


}

📌ChattingRoom

package com.ChattingTest.dto;

import lombok.Builder;
import lombok.Data;

import java.util.LinkedList;
import java.util.Objects;

@Data
@Builder
public class ChattingRoom {
    private String roomNumber; // 방 번호
    private String roomName; // 방 이름
    private LinkedList<String> users; // 유저목록


    // 채팅방 목록에서 방 번호로 방을 찾을 수 있게 equals와 hashCode를 오버라이딩
    // 생성자를 사용하지 않고 Builder패턴을 사용

    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;
        if (getClass() != obj.getClass())
            return false;
        ChattingRoom other = (ChattingRoom) obj;
        return Objects.equals(roomNumber, other.roomNumber);
    }
    @Override
    public int hashCode() {
        return Objects.hash(roomNumber);
    }
}

📌Message

package com.ChattingTest.dto;

import lombok.Data;

import java.util.Date;

@Data
public class Message {
    private String message;
    private String nickname;
    private Date date;

    Message(){
        date = new Date();
    }
}

📌main.css

@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

html {
    font-size: 62.5%;
}

.swal-footer {
	text-align: center;
}
/* 채팅방 목록 */


main {
    width: 35vw;
    min-width: 300px;
    height: 90vh;
    border: 1px solid #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

main h1 {
    font-size: 2rem;
    padding: 10px;
    height: 50px;
    box-sizing: border-box;
}

main .new_chat {
	position: absolute;
	top: 10px;
	right: 10px;
	border-radius: 3px;
	padding: 3px;
	background: #fff;
	cursor: pointer;
}

main .new_chat:hover {
	background: #eee;
}

main nav {
	 font-size: 1.6rem;
	 display: flex;
	 text-align: center;
	 margin-bottom: 5px;
	 padding: 0 7px;
}

main nav > span:first-child {
	width: 80%;
}

main nav > span:last-child {
	width: 20%;
}

main ul {
    overflow-y: auto;
    max-height: calc(100% - 50px);
}

main li {
    font-size: 1.6rem;
    width: 100%;
    height: 70px;
    padding: 7px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

main li:hover {
   background: #eee;
}

main .chat_title {
    font-weight: bold;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

main .chat_count {
    width: 20%;
    text-align: center;
}

/* 채팅방 목록 */



/* 채팅방 안 */

.chat {
    width: 50vw;
    min-width: 300px;
    height: 90vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
   	display: none;
}

.chat > div {
	height: 100%;
	display: flex;
}

.chat .chat_body {
  	background: rgb(195, 204, 221);
	height: 100%;
	width: 70%;
    order: 1;
    border: 1px solid #000;
    position: relative;
}

.chat h2 {
    font-size: 2rem;
    padding: 10px;
    height: 50px;
    box-sizing: border-box;
    text-align: center;
    background: #eee;
}

.chat .chat_back {
    font-size: 2rem;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    cursor: pointer;
}

.chat ul.chat_list {
    overflow-y: auto;
    height: calc(100% - 150px);
    box-sizing: border-box;
    padding: 5px 0;
}

.chat li {
    font-size: 1.5rem;
}

.chat li > div {
    padding: 10px;
    display: flex;
}

.chat li .notification {
	text-align: center;
}

.chat li .notification span {
	margin: 0 auto;
	border-radius: 15px;
	padding: 5px 10px;
	background: #ae9191;
	color: #fff;
}

.chat li > div .nickname {
	padding: 3px;
}

.chat li > div .message {
	display: flex;
}

.chat .chat_me {
   justify-content: end;
}

.chat .chat_other {
    justify-content: start;
}

.chat .chat_other .chat_in_time {
    order: 1;
}

.chat .chat_in_time {
    font-size: 1.3rem;
    margin: 0 5px;
    display: flex;
    align-items: flex-end;
}

.chat .chat_content {
    padding: 5px;
    border-radius: 3px;
    box-shadow: 0px 2px 3px 0px rgb(0 0 0 / 25%);
    display: inline-block;
    max-width: 250px;
    max-height: 400px;
    overflow-y: auto;
    word-break: break-all;
}

.chat .chat_me .chat_content {
    background: yellow;
}

.chat .chat_other .chat_content {
    background: #fff;
}

.chat .chat_input {
    height: 100px;
    display: flex;
    background: #fff;
}

.chat_input .chat_input_area {
    width: 87%;
}

.chat_input .chat_input_area textarea {
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
    padding: 8px;
    box-sizing: border-box;
}

.chat_input .chat_input_area textarea:focus {
    outline: none;
}

.chat_input .chat_button_area {
    width: 13%;
}

.chat_input .chat_button_area button {
    background: yellow;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 5px;
    width: 90%;
    margin-top: 10px;
    cursor: pointer;
}

.chat .chat_users {
	border: 1px solid #ddd;
	width: 30%;
	height: 300px;
/* 	position: absolute;
	right: 101%;
	top: 0; */
    margin-right: 3px;
}

/* 참가인원 */
.chat .chat_users h2 {
	font-size: 1.6rem;
}

.chat .chat_users .chat_nickname {
	font-size: 1.6rem;
	height: calc(100% - 50px);
	overflow: auto;
}

.chat .chat_users .chat_nickname li {
	padding: 5px;
}

/* 참가인원 */


/* 채팅방 안 */



@media(max-width: 1024px)  {
	html {
		font-size: 60%;
	}
	main {
		width: 99vw;
	}

	.chat {
		width: 99vw;
	}
}

📌main.js

$(document).ready(function(){


// 방 목록 그리기
const listHtml = function(roomList) {
	let listHtml = "";

		for(let i=roomList.length-1;i>=0;i--) {
			listHtml += `
				<li data-room_number=${roomList[i].roomNumber}>
                    <span class="chat_title">${roomList[i].roomName }</span>
                    <span class="chat_count">${roomList[i].users.length}명</span>
	            </li>`;
		}
		$("main ul").html(listHtml);
}


// 채팅방 목록 불러오기
const chattingRoomList = function(){
	$.ajax({
		url: "/chattingRoomList",
		type: "GET",
	})
	.then(function(result){
		listHtml(result)
	})
	.fail(function(){
		alert("에러가 발생했습니다");
	})
}



const socket = new SockJS('/websocket');
const stomp = Stomp.over(socket);
stomp.debug = null; // stomp 콘솔출력 X


// 구독을 취소하기위해 구독 시 아이디 저장
const subscribe = [];

// 모든 구독 취소하기
const subscribeCancle = function() {
	const length = subscribe.length;
	for(let i=0;i<length;i++) {
		const sid = subscribe.pop();
		stomp.unsubscribe(sid.id);
	}
}


// 메인 화면
const main = function() {
	$("main").show();

	// 기존 구독 취소
	subscribeCancle();

	// 채팅 중이었던 방이 있을때
	const room = chattingRoom();

	if(room) {
		return;
	}

	const subscribeId = stomp.subscribe("/topic/roomList", function(){
		// "/topic/roomList"에서 메세지가 왔을때 실행할 함수
		chattingRoomList();
	});

	subscribe.push(subscribeId);
	chattingRoomList();
};



stomp.connect({}, function(){
	main();
});


// ----------------- 메인화면 ---------------------------



// ----------------- 채팅방 ---------------------------


const info = (function(){
	let nickname = "";
	let roomNumber = "";

	const getNickname = function() {
		return nickname;
	}

	const setNickname = function(set){
		nickname = set;
	}

	const getRoomNumber = function() {
		return roomNumber;
	}

	const setRoomNumber = function(set) {
		roomNumber = set;
	}
	return {
		getNickname : getNickname,
		setNickname : setNickname,
		getRoomNumber : getRoomNumber,
		setRoomNumber : setRoomNumber,
	}
})();


const errorMSG = function(result){
	if(result.status == 404) {
		alert("종료되었거나 없는 방입니다");
	} else {
		alert("에러가 발생했습니다");
	}
	location.href = "/";
}


// 참가자 그리기
const userList = function(users){
	$(".chat .chat_users .user").text(users.length + "명");

	let userHtml = "";
	for(let i=0;i<users.length;i++) {
		userHtml += `
			<li>${users[i] }</li>`;
	}

	$(".chat .chat_nickname ul").html(userHtml);
}


// 메세지 그리기
const chatting = function(messageInfo){
	let nickname = messageInfo.nickname;
	let message = messageInfo.message;

	message = message.replaceAll("\n", "<br>").replaceAll(" ", "&nbsp");

	const date = messageInfo.date;
	const d = new Date(date);

	const time = String(d.getHours()).padStart(2, "0")
				+ ":"
				+ String(d.getMinutes()).padStart(2, "0");

	let sender = "";

	if(info.getNickname() == nickname) {
		sender = "chat_me";
		nickname = "";
	} else {
		sender=  "chat_other";
	}


	const chatHtml = `
        <li>
            <div class=${sender }>
            	<div>
	            	<div class="nickname">${nickname }</div>
	            	<div class="message">
		                <span class=chat_in_time>${time }</span>
		                <span class="chat_content">${message }</span>
	                <span>
                </div>
            </div>
        </li>`;

	$(".chat ul.chat_list").append(chatHtml);

	$(".chat ul").scrollTop($(".chat ul")[0].scrollHeight);
}


// 채팅방 구독
const chattingConnect = function(roomNumber){
	// 기존 구독 취소
	subscribeCancle();

	// 메세지를 받을 경로
	const id1 = stomp.subscribe("/topic/message/" + roomNumber, function(result){
		const message = JSON.parse(result.body);

		// 메세지가 왔을때 실행할 함수
		chatting(message);
	})

	// 입장,퇴장 알림을 받을 경로
	const id2 = stomp.subscribe("/topic/notification/" + roomNumber, function(result){
		const room = JSON.parse(result.body);
		const message = room.message;

		// 메세지가 왔을때 실행할 함수
		userList(room.users);

		const chatHtml = `
	        <li>
	        	<div class="notification">
            		<span>${message}</span>
            	</div>
	        </li>`;

		$(".chat ul.chat_list").append(chatHtml);

		$(".chat ul").scrollTop($(".chat ul")[0].scrollHeight);

	})

	subscribe.push(id1);
	subscribe.push(id2);
}



// 채팅방 세팅
const initRoom = function(room, nickname) {
	// 방 목록 업데이트
	stomp.send("/socket/roomList");

	$("main").hide();

	info.setNickname(nickname);
	info.setRoomNumber(room.roomNumber);

	$(".chat").show();
	$(".chat .chat_title").text(room.roomName);

	userList(room.users);
	chattingConnect(room.roomNumber);

	$(".chat_input_area textarea").focus();
}


// 메세지 보내기
const sendMessage = function(){
	const message = $(".chat_input_area textarea");

	if (message.val() == "") {
		return;
	}

	const roomNumber = info.getRoomNumber();
	const nickname = info.getNickname();

	const data = {
		message : message.val(),
		nickname : nickname,
	}

	stomp.send("/socket/sendMessage/" + roomNumber, {}, JSON.stringify(data));
	message.val("");
}




$(".chat_button_area button").click(function() {
	sendMessage();
	$(".chat_input_area textarea").focus();
})


$(".chat_input_area textarea").keypress(function(event) {
	if (event.keyCode == 13) {
		if (!event.shiftKey) {
			event.preventDefault();

			sendMessage();
		}
	}
})


// 닉네임 만들고 채팅방 들어가기
const enterChattingRoom = function(roomNumber) {

	swal({
		text: "사용하실 닉네임을 입력해주세요",
		content: "input",
		buttons: ["취소", "확인"],
		closeOnClickOutside : false
	})
	.then(function(nickname){
		if(nickname) {

			const data = {
				roomNumber : roomNumber,
				nickname : nickname
			}

			$.ajax({
				url: "/chattingRoom-enter",
				type: "GET",
				data: data,
			})
			.then(function(room){
				initRoom(room, nickname);

				// 채팅방 참가 메세지
				room.message = nickname + "님이 참가하셨습니다";
				stomp.send(
					"/socket/notification/" + roomNumber, {},
					JSON.stringify(room));

			})
			.fail(function(result){
				errorMSG(result);
			})
		}
	})
}



// 새 채팅방 만들기
const createRoom = function(roomName) {
	swal({
		text: "사용하실 닉네임을 입력해주세요",
		content: "input",
		buttons: ["취소", "확인"],
		closeOnClickOutside : false
	})
	.then(function(nickname){
		if(nickname) {

			const data = {
				roomName : roomName,
				nickname : nickname
			}

			$.ajax({
				url: "/chattingRoom",
				type: "POST",
				data: data,
			})
			.then(function(room){
				initRoom(room, nickname)
			})
			.fail(function(){
				alert("에러가 발생했습니다");
			})
		}
	})
}




$(".new_chat").click(function(){
	swal({
		text: "방 이름을 입력해주세요",
		content: "input",
		buttons: ["취소", "확인"],
		closeOnClickOutside : false
	})
	.then(function(roomName){
		if(roomName) {
			createRoom(roomName);
		}
	})
})






$(document).on("dblclick", "main li", function(){
	const roomNumber = $(this).data("room_number");
	enterChattingRoom(roomNumber);
})




// 채팅방 나가기
$(".chat_back").click(function() {
	swal({
		text: "대화방에서 나갈까요?",
		buttons: ["취소", "확인"]
	})
	.then(function(result){
		if(result) {
			$.ajax({
				url: "/chattingRoom-exit",
				type: "PATCH",
			})
			.then(function(room){
				const roomNumber = info.getRoomNumber();

				if(room.users.length != 0) {
					// 채팅방 나가기 메세지
					room.message = info.getNickname() + "님이 퇴장하셨습니다";
					stomp.send(
						"/socket/notification/" + roomNumber, {},
						JSON.stringify(room));
				}

				// 채팅방 목록 업데이트
				stomp.send("/socket/roomList");

				main();
				$(".chat").hide();
				$(".chat ul.chat_list").html("");

				info.setRoomNumber("");
				info.setNickname("");
			})
			.fail(function(){
				errorMSG();
			})
		}
	})
})



// 대화 중이던 방
const chattingRoom = function (){
	let returnRoom = null;

	$.ajax({
		url: "/chattingRoom",
		type: "GET",
		async: false,
	})
	.then(function(result){
		if(result != "") {
			const room = result.chattingRoom;
			const nickname = result.myNickname;
			initRoom(room, nickname);
			returnRoom = result;
		}
	})
	.fail(function(result){
		errorMSG(result);
	})

	return returnRoom;
};


}) // document.ready

📌main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>채팅</title>

<link rel="stylesheet" href="/css/main.css">

</head>
<body>
	<!-- 채팅방 목록 -->
	<main>
        <h1>채팅방</h1>
        <button class="new_chat">새 채팅방 만들기</button>
        <nav>
        	<span>방 제목</span>
        	<span>인원</span>
        </nav>
       	<hr>

        <ul>
            <li>
            <!--
				<span class="chat_title"></span>
				<span class="chat_count"></span>
				 -->
            </li>
        </ul>
    </main>
	<!-- 채팅방 목록 -->

	<!-- 채팅방 입장 -->
    <div class="chat">
   		<div>
   			<div class="chat_body">
		        <h2 class="chat_title">1번방</h2>
		        <button class="chat_back">◀</button>

		        <ul class="chat_list">
		            <li>
		            	<!-- <div class="notification">
		            		<span></span>
		            	</div> -->
		            </li>
		        </ul>

		        <div class="chat_input">
		            <div class="chat_input_area">
		                <textarea></textarea>
		            </div>

		            <div class="chat_button_area">
		                <button>전송</button>
		            </div>
		        </div>
	        </div>

	        <div class="chat_users">
	        	<h2>
	        		참가인원
	        		<span class="user"></span>
	        	</h2>

	        	<div class="chat_nickname">
	        		<ul>
	        			<li>
	       				</li>
	        		</ul>
	        	</div>
	        </div>
   		</div>
    </div>
    <!-- 채팅방 입장 -->

    <!-- sock js -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.2/sockjs.min.js"></script>
	<!-- STOMP -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>

    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/js/main.js"></script>
</body>
</html>

❓구현 방식

메인화면에 접속하면 웹소켓을 연결하고 /roomList를 구독

사용자가 방을 만들면 /roomList로 메세지를 보내 새로운 방이 만들어졌다는 걸 알림

메인화면에 있는 사용자들은 /roomList로 메세지를 받으면 방목록을 불러옴

방을 만들거나 다른사람이 만든 방에 들어갈 경우 /roomList의 구독을 취소하고 /message/방번호(UUID)를 구독

방 안에서 같은 방번호를 구독한 사람끼리 메세지를 주고받을 수 있음