[Spring] WebSocket으로 실시간 채팅 구현하기

Spring

[Spring] WebSocket으로 실시간 채팅 구현하기

developer of the night sky 2023. 12. 5. 20:34

ChatTestProject🔎

앞서 정리한 WebSocket으로 실시간 채팅을 구현하는 프로젝트이다.

닉네임을 설정하여 들어간 후 n명과 대화를 한다.

https://steady-record.tistory.com/entry/WebSocket

[Spring] WebSocket 기초 예제

Socket? WebSocket?🔎 - Socket Socket는 네트워크 통신을 위한 도구로, 무전기나 전화기와 같이 프로그램 간에 데이터를 주고받을 수 있게 해준다. 이는 특정한 인스턴스가 아닌 통신 규격을 나타낸다.

steady-record.tistory.com

파일구성🔎

상위 패키지(폴더)	하위 패키지(폴더)	파일명	역할
src/main/java	com.test.controller	ChatController.java	서버와 클라이언트 물질적 연결
	com.test.server	ChatServer.java	서버
	com.test.domain	Message.java	메시지를 담는 DTO
webapp/WEB-INF/views		index.jsp	채팅 입장 전 페이지
		chat.jsp	채팅 페이지

환경설정🔎

이 프로젝트에서는 DB작업을 하지 않기에 버전 변경 및 의존성 추가만 설정하겠다.

1. 버전 설정 - pom.xml

아래 글을 참고하여 자바와 스프링 버전을 변경한다.

https://steady-record.tistory.com/entry/Spring-Spring-Framework란#스프링%20버전%20및%20JDK%20버전%20설정★-1

2. 의존성 추가 - pom.xml

gson : 구글에서 만든 josn 파싱 라이브러리

		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.10.1</version>
		</dependency>

3. 컴포넌트 스캔 - servlet-context.xml

직접 생성한 패지리를 스프링이 스캔할 수 있도록 등록한다.

	<context:component-scan base-package="com.test.socket" />
	<context:component-scan base-package="com.test.controller" />
	<context:component-scan base-package="com.test.server" />

구현 소스

- ChatController.java

package com.test.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ChatController {

	@GetMapping(value = "/index.do")
	public String index(Model model) {
		return "index";
	}
	
	@GetMapping(value = "/chat.do")
	public String chat(Model model) {
		return "chat";
	}
}

DB 작업없이 서버와 클라이언트가 소통할 때는 컨트롤러가 할 일이 없다.

- Message.java

클라이언트와 서버 사이에서 주고받을 데이터를 DTO로 포장한다. Lombok를 설치하지않아 getter, setter를 작성해주었다.

package com.test.domain;

//클라이언트, 서버 간의 데이터
public class Message {
	
	private String code;		//상태코드
	private String sender;		//보내는 사람
	private String receiver;	//받는 사람
	private String content;		//대화 내용
	private String regdate;		//날짜
    
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	public String getSender() {
		return sender;
	}
	public void setSender(String sender) {
		this.sender = sender;
	}
	public String getReceiver() {
		return receiver;
	}
	public void setReceiver(String receiver) {
		this.receiver = receiver;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	public String getRegdate() {
		return regdate;
	}
	public void setRegdate(String regdate) {
		this.regdate = regdate;
	}

	@Override
	public String toString() {
		return "Message [code=" + code + ", sender=" + sender + ", receiver=" + receiver + ", content=" + content
				+ ", regdate=" + regdate + "]";
	}
}

- 채팅방 입장하기

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocketTest- chat</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
</head>
<body>
	<!-- index.jsp -->
	<h1>WebSocket <small>chat</small></h1>
	
	<div>
		<div class="group">
			<label>닉네임</label>
			<input type="text" name="name" id="name" class="short">
		</div>
	</div>
	
	<div>
		<button type="button" class="in">들어가기</button>
	</div>
	
	<script src="https://code.jquery.com/jquery-1.12.4.js" ></script>
	
	<script>
	
		$('.in').click(function() {
			let name = $('#name').val();
			
			if ($(event.target).data('name') != null && $(event.target).data('name') != '') {
				name = $(event.target).data('name');
			}
			
			let child = window.open('/socket/chat.do', 'chat', 'width=405', 'height=510');
			
			child.addEventListener('load', function() {
				//자식창 다 뜨고 나면 발생
				child.connect(name);
			});
			
			//비활성화
			$('.in').css('opacity', .5).prop('disabled', true);
			$('#name').prop('readOnly', true);
		});
	
	</script>
</body>
</html>

닉네임을 설정하여 들어가기 버튼으로 채팅방에 입장할 수 있도록한다.

채팅방 페이지를 window.open으로 열고 child로 저장한다.

child가 load 되면 채팅방페이지를 연결하고 들어가기 버튼은 비활성화한다.

- 채팅방 디자인

chat.jsp - 스타일 정의

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocketTest- chat</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>
html, body {
		padding: 0 !important;
		margin: 0 !important;
		background-color: #FFF !important; 
		display: block;
		overflow: hidden;
	}
	
	body > div {
		margin: 0; 
		padding: 0; 
	}

	#main {
		width: 400px;
		height: 510px;
		margin: 3px;
		display: grid;
		grid-template-rows: repeat(12, 1fr);
	}
	#header > h2 {		
		margin: 0px;
		margin-bottom: 10px;
		padding: 5px;
	}

	#list {
		border: 1px solid var(--border-color);
		box-sizing: content-box;
		padding: .5rem;
		grid-row-start: 2;
		grid-row-end: 12;
		font-size: 14px;
		overflow: auto;
	}
	
	#msg {
		margin-top: 3px;
	}
	
	#list .item {
		font-size: 14px;
		margin: 15px 0;
	}
	
	#list .item > div:first-child {
		display: flex;
	}
	
	#list .item.me > div:first-child {
		justify-content: flex-end;
	}
	
	#list .item.other > div:first-child {
		justify-content: flex-end;
		flex-direction: row-reverse;
	}
	
	#list .item > div:first-child > div:first-child {
		font-size: 10px;
		color: #777;
		margin: 3px 5px;
	}
	
	#list .item > div:first-child > div:nth-child(2) {
		border: 1px solid var(--border-color);
		display: inline-block;
		min-width: 100px;
		max-width: 250px;
		text-align: left;
		padding: 3px 7px;
	}
	
	#list .state.item > div:first-child > div:nth-child(2) {
		background-color: #EEE;
	}
	
	#list .item > div:last-child {
		font-size: 10px;
		color: #777;
		margin-top: 5px;
	}
	
	#list .me {
		text-align: right;
	}
	
	#list .other {
		text-align: left;
	}
	
	#list .msg.me.item > div:first-child > div:nth-child(2) {
		background-color: rgba(255, 99, 71, .2);
	}
	
	#list .msg.other.item > div:first-child > div:nth-child(2) {
		background-color: rgba(100, 149, 237, .2);
	}
	
	#list .msg img {
		width: 150px;
	}
</style>
</head>
<body>
	<!-- chat.jsp  -->
	
	<div id="main">
		<div id="header"><h2>WebSocket <small>닉네임</small></h2></div>
		<div id="list">
			
		</div>
		<input type="text" id="msg" placeholder = "대화 내용을 입력하세요.">
	</div>
	
	<script src="https://code.jquery.com/jquery-1.12.4.js" ></script>
</body>
</html>

- 입장 메시지 띄우기

1. (클라이언트)서버 연결 및 서버로 사용자 정보 보내기

chat.jsp

	<script>
		let name;
		let ws;
		const url = 'ws://localhost:8090/socket/chatserver.do';
		
		function connect(name) {
			
			window.name = name;
			$('#header small').text(name);
			
			//서버와 연결하기 > 소켓 생성
			ws = new WebSocket(url);
			
			ws.onopen = function(evt) {
				log('서버 연결 성공');
				
				let message = {
						code: '1',
						sender: window.name,
						receiver: '',
						content: '',
						regdate: new Date().toLocaleString()
				};
				
				//jOSN 문자열로 변환 후 전송
				ws.send(JSON.stringify(message));
				print('', '대화방에 참여했습니다.' , 'me', 'state', message.regdate);
				
				$('#msg').focus();
			};
		}//connect

const url = 'ws://localhost:8090/socket/chatserver.do';

서버와의 연결을 위한 주소이다. 서버에서는 @ServerEndpoint("/chatserver.do") 종단점을 설정해야한다.

ws = new WebSocket(url);

서버 연결

ws.onopen = function(evt) {

open 이벤트로 클라이언트는 서버와 연결 직후 사용자의 정보를 서버에 전달한다.

프로토콜을 이용한 메시지 보내기

사람이 들어온 상태 및 메시지도 ws.send로 전달한다.
어떤 용도의 메시지인지 서버측에서는 알기 힘들기 때문에 메시지의 규칙으로 구분지어 전송한다.

메시지의 규칙으로 숫자는 상태코드를 나타내고 그 상태코드에 따라 뒷 내용을 구분 짓는다.

프로토콜은 통신에 사용되는 메시지의 형식과 의미를 정의하는 규

칙의 집합으로, 주고 받는 메시지의 구조를 통일하여 서버와 클라이언트 간의 원활한 통신을 지원하기 위해 프로토콜을 사용한다.

여기서는 메시지의 규칙을 JSON 형식으로 정의하고, 숫자로 표현된 상태코드를 사용하여 다양한 메시지 유형을 나타낸다.

code : 상태코드
- 1 : 새로운 유저가 들어옴
- 2: 기존 유저가 나감
- 3: 메시지 전달
- 4: 이모티콘 전달
sender : 보내는 유저명
receiver : 받는 유저명
content : 대화 내용
regdate : 날짜/시간

ws.send(JSON.stringify(message));

message 객체를 JSON 형식으로 변환하고, 웹 소켓을 통해 서버로 전송한다.

2. (서버) 클라이언트 메시지 수신받기 및 전송하기

ChatServer.java

package com.test.server;

@ServerEndpoint("/chatserver.do")
public class ChatServer {

	private static List<Session> sessionList = new ArrayList<Session>();
	
	@OnOpen
	public void handleOpen(Session session) {
		sessionList.add(session);
		checkSessionList();			//접속자 확인
	}
	
	@OnMessage
	public void handleMessage(String msg, Session session) {
		System.out.println(msg);
		
		Gson gson = new Gson();
		
	 	Message message =  gson.fromJson(msg, Message.class);
		
	 	if (message.getCode().equals("1")) {
	 		for (Session s : sessionList) {
	 			if (s != session) {
	 				try {
	 					s.getBasicRemote().sendText(msg);
					} catch (Exception e) {
						e.printStackTrace();
					}
	 			}
	 		}
	 	} 
	}
	
	//접속자를 확인하는 메서드
	private void checkSessionList() {
		System.out.println();
		System.out.println("[Session List]");
		for (Session session : sessionList) {
			System.out.println(session.getId());
		}
		System.out.println();
	}
	
}

@ServerEndpoint("/chatserver.do")

웹 소켓 통신을 위한 엔드포인트 클래스로서, 클라이언트와의 연결을 관리하고 통신을 수행하는 로직을 해당 클래스에 작성한다.

private static List<Session> sessionList = new ArrayList<Session>();

서버에서는 유저1의 소켓과 유저2의 소켓을 각각 관리를 해야한다. 1명 이상이 접속하기에 arraylist로 관리하는 것이 편하다.

websocket의 session은 채팅에 접속한 클라이언트의 상태 관리를 위해 클라이언트가 접속했을 때 list에 session을 추가한다.

@OnOpen

public void handleOpen(Session session) {

WebSocket 연결이 열릴 때 자동으로 호출된다.

sessionList.add(session);

접속한 클라이언트의 세션을 저장한다.

@OnMessage
public void handleMessage(String msg, Session session) {

클라이언트로부터 메시지를 수신할 때 호출된다.

Gson gson = new Gson();

Gson : JSON 형식의 문자열을 자바클래스 객체로 변환한다.

위에서 클라이언트가 msg를 JSON을 전송을 하였으며, 자바클래스에서 해석가능하도록 다시 자바클래스 객체로 변환한다.

Message message = gson.fromJson(msg, Message.class);

SON 형식의 문자열(msg)을 Gson 라이브러리를 사용하여 Java 객체(Message 클래스의 인스턴스)로 변환한다.

if (message.getCode().equals("1")) {
	 		for (Session s : sessionList) {
	 			if (s != session) {
	 				try {
	 					s.getBasicRemote().sendText(msg);
					} catch (Exception e) {
						e.printStackTrace();
					}
	 			}
	 		}
	 	}

모든 접속자 중에서 방금 메시지를 보낸 세션을 제외하고 나머지 세션을 검색한다.
본인이외의 세션(소켓)에게 현재 접속자를 알리는 메시지를 전달한다.

getBasicRemote() : 세션과 관련된 소켓을 반환하여

sendText() : 메시지를 클라이언트로 보낸다.

3. (클라이언트) 안내 메시지 화면에 출력하기

chat.jsp

	<script>
	
		let name;
		let ws;
		const url = 'ws://localhost:8090/socket/chatserver.do';
		
		function connect(name) {
			
			window.name = name;
			$('#header small').text(name);
			
			ws = new WebSocket(url);
			
			ws.onopen = function(evt) {
				
				let message = {
						code: '1',
						sender: window.name,
						receiver: '',
						content: '',
						regdate: new Date().toLocaleString()
				};
				
				//jOSN 문자열로 변환 후 전송
				ws.send(JSON.stringify(message));
				print('', '대화방에 참여했습니다.' , 'me', 'state', message.regdate);
				
				$('#msg').focus();
			};
			
			//서버에서 클라이언트에게 전달한 메시지
			ws.onmessage = function(evt) {
				let message = JSON.parse(evt.data);
				
				if (message.code == '1') {
					print('', `[\${message.sender}]님이 들어왔습니다.`, 'other', 'state', message.regdate);
				} 
			}
			
			
		}//connect
		
		function log(msg) {
			console.log(`[\${new Date().toLocaleTimeString()}] \${msg}`);
		}
		
		//대화창 출력 메소드
		function print(name, msg, side, state, time) {
			let temp = `
				<div class="item \${state} \${side}">
					<div>
						<div>\${name}</div>
						<div>\${msg}</div>
					</div>
					<div>\${time}</div>
				</div>`;
			
			$('#list').append(temp);
			
			//새로운 내용이 추가되면 스크롤을 바닥으로 내린다.
			scrollList();
		}
		
		function scrollList() {
			$('#list').scrollTop($('#list').outerHeight() + 300);
		}
	
	</script>

onmessage 이벤트로 서버에서 전달받은 메시지를 출력한다.

출력형식을 메소드를 만들어 출력이 필요할 때 양식에 맞춰 출력한다.

- 퇴장 메시지 띄우기

대화창을 닫았을 때 퇴장했다고 가정한다.

1. (클라이언트) 퇴장한 유저 정보 서버로 전송하기

chat.jsp

	<script>
		$(window).on('beforeunload', function() {
			disconnect();
		});
		
		function disconnect() {
			//대화방에서 나가면, 다른 사람에게 안내메시지를 보낸다.
			let message = {
					code: '2',
					sender: window.name,
					receiver: '',
					content: '',
					regdate: new Date().toLocaleString()
			};
			
			//jOSN 문자열로 변환 후 전송
			ws.send(JSON.stringify(message));
		}
	</script>

beforeunload

창이 닫히기 바로 직전에 발생한다.

대화방에서 나가면, 다른 사람들에게 안내메시지를 보내기 위해 서버로 보낼 메시지를 작성한다.

대화방에서 나간다는 의미로 코드 2번으로 정한다.

배열로 작성한 메시지를 JSON 문자열로 변환 후 서버로 전송한다.

2. (서버) 클라이언트 메시지 송수신 및 세션 제거

package com.test.server;

@ServerEndpoint("/chatserver.do")
public class ChatServer {
	@OnOpen
	public void handleOpen(Session session) {
		sessionList.add(session);
		checkSessionList();			//접속자 확인
		clearSessionList();			
	}
	
	@OnMessage
	public void handleMessage(String msg, Session session) {
		System.out.println(msg);
		
		Gson gson = new Gson();
		
	 	Message message =  gson.fromJson(msg, Message.class);
		
	 	if (message.getCode().equals("1")) { //상대방 대화방 입장
	 		for (Session s : sessionList) {
	 			if (s != session) {
	 				try {
	 					s.getBasicRemote().sendText(msg);
					} catch (Exception e) {
						e.printStackTrace();
					}
	 			}
	 		}
	 	} else if (message.getCode().equals("2")) { 
	 		sessionList.remove(session);
	 		for (Session s : sessionList) {
	 			try {
	 				s.getBasicRemote().sendText(msg);
				} catch (Exception e) {
					e.printStackTrace();
				}
	 		}
	 	}
	}
	
	//접속자를 확인하는 메서드
	private void checkSessionList() {
		System.out.println();
		System.out.println("[Session List]");
		for (Session session : sessionList) {
			System.out.println(session.getId());
		}
		System.out.println();
	}
	
	//안정성을 위한 메서드 : 연결이 끊어진 세션이 있으면 세션리스트에서 제거한다.
	private void clearSessionList() {
		
		//List 계열의 컬렉션은 향상된 for문 내에서 요소 추가/삭제하는 행동을 할 수 없다.
		//가능한 방법은 1. 일반 forans, 2. Interator 방법이 있다.
		Iterator<Session> iter = sessionList.iterator();
		
		while(iter.hasNext()) {
			if(!(iter.next()).isOpen()) {
				//혹시 연결이 끊어진 세션이 있으면 리스트에서 제거한다.
				iter.remove();
			}
		}
		
	}
	
}

clearSessionList()

연결이 끊어진 세션이 있으면 세션리스트에서 제거하는 메서드이다.

상대방이 나간다는 의미인 코드 2번을 수신받았을 때, 세션을 제거하지만, 안정성을 위해 웹소켓이 열렸을 때, 다시 한번 확인한다.

코드 2번으로 메시지를 수신받았을 때,

1. session 제거

2. 나머지 모든 사람에게 유저 퇴장 메시지를 보낸다.

3. (클라이언트) 안내 메시지 화면에 출력하기

chat.jsp

	<script>
		let name;
		let ws;
		const url = 'ws://localhost:8090/socket/chatserver.do';
		
		function connect(name) {
			
			window.name = name;
			$('#header small').text(name);
			
			ws = new WebSocket(url);
			
			ws.onopen = function(evt) {
				
				let message = {
						code: '1',
						sender: window.name,
						receiver: '',
						content: '',
						regdate: new Date().toLocaleString()
				};
				
				ws.send(JSON.stringify(message));
				print('', '대화방에 참여했습니다.' , 'me', 'state', message.regdate);
				
				$('#msg').focus();
			};
			
			ws.onmessage = function(evt) {
				
				let message = JSON.parse(evt.data);
				console.log(message);
				
				if (message.code == '1') {
					print('', `[\${message.sender}]님이 들어왔습니다.`, 'other', 'state', message.regdate);
				} else if (message.code == '2') {
					print('', `[\${message.sender}]님이 나갔습니다.`, 'other', 'state', message.regdate);
				} 
			}
		}//connect
		
		function log(msg) {
			console.log(`[\${new Date().toLocaleTimeString()}] \${msg}`);
		}
		
		function print(name, msg, side, state, time) {
			let temp = `
				<div class="item \${state} \${side}">
					<div>
						<div>\${name}</div>
						<div>\${msg}</div>
					</div>
					<div>\${time}</div>
				</div>`;
			
			$('#list').append(temp);
			
			//새로운 내용이 추가되면 스크롤을 바닥으로 내린다.
			scrollList();
		}
		
		$(window).on('beforeunload', function() {
			disconnect();
		});
		
		function disconnect() {
			let message = {
					code: '2',
					sender: window.name,
					receiver: '',
					content: '',
					regdate: new Date().toLocaleString()
			};
			
			ws.send(JSON.stringify(message));
		}
		
		
		//대화 스크롤 이벤트
		function scrollList() {
			$('#list').scrollTop($('#list').outerHeight() + 300);
		}
	</script>

print 메소드로 나간 유저의 이름으로 퇴장 메시지를 출력한다.

- 채팅하기

1. (클라이언트) 서버로 메시지 전송하기

chat.jsp

	<script>
		$('#msg').keydown(function(evt) {
			//엔터를 눌렀을 때, 입력한 대화 내용을 서버로 전달하기
			if (evt.keyCode == 13) {	//엔터
				let message = {
						code: '3',
						sender: window.name,
						receiver: '',
						content: $('#msg').val(),
						regdate: new Date().toLocaleString()
				};
			
				ws.send(JSON.stringify(message));		
				
				$('#msg').val('').focus();
				
				print(window.name, message.content, 'me', 'msg', message.regdate);
			}
		});
		
	</script>

엔터의 아스키코드 값으로 엔터를 인식하여 메시지를 서버로 보낸다.

채팅 메시지 송부는 코드 3번으로 지정한다.

서버로 메시지를 보낸 뒤 msg 텍스트 박스는 다음 입력을 위해 빈칸으로 두고 포커스를 맞춘다.

보낸 메시지는 바로 본인의 화면에서 출력한다.

2. (서버) 클라이언트 메시지 송수신

ChatServer.java

package com.test.server;

@ServerEndpoint("/chatserver.do")
public class ChatServer {
	@OnOpen
	public void handleOpen(Session session) {
		sessionList.add(session);
		checkSessionList();			//접속자 확인
		clearSessionList();			
	}
	
	@OnMessage
	public void handleMessage(String msg, Session session) {
		System.out.println(msg);
		
		Gson gson = new Gson();
		
	 	Message message =  gson.fromJson(msg, Message.class);
		
	 	if (message.getCode().equals("1")) { //상대방 대화방 입장
	 		for (Session s : sessionList) {
	 			if (s != session) {
	 				try {
	 					s.getBasicRemote().sendText(msg);
					} catch (Exception e) {
						e.printStackTrace();
					}
	 			}
	 		}
	 	} else if (message.getCode().equals("2")) { 
	 		sessionList.remove(session);
	 		for (Session s : sessionList) {
	 			try {
	 				s.getBasicRemote().sendText(msg);
				} catch (Exception e) {
					e.printStackTrace();
				}
	 		}
	 	} else if (message.getCode().equals("3")) {	
	 		//보낸 사람빼고 나머지 사람에게 전달한다.
	 		for (Session s : sessionList) {
	 			if (s != session) {
	 				try {
						s.getBasicRemote().sendText(msg);
					} catch (Exception e) {
						e.printStackTrace();
					}
	 			}
	 		}
	 		
	 	} 
	}
}

3. (클라이언트) 채팅 출력하기

chat.jsp

	<script>
		function connect(name) {
			
			ws.onmessage = function(evt) {
				
				let message = JSON.parse(evt.data);
				console.log(message);
				
				if (message.code == '1') {
					print('', `[\${message.sender}]님이 들어왔습니다.`, 'other', 'state', message.regdate);
				} else if (message.code == '2') {
					print('', `[\${message.sender}]님이 나갔습니다.`, 'other', 'state', message.regdate);
				} else if (message.code == '3') {
					print(message.sender, message.content, 'other', 'msg', message.regdate);
				}
			}
		}//connect
		
	</script>

- 이모티콘(이미지) 보내기

'/'를 앞에 입력하고 파일명을 적으면 해당 이미지가 전송된다.

1. (클라이언트) 서버로 메시지 전송하기

chat.jsp

	<script>
		$('#msg').keydown(function(evt) {
			//엔터를 눌렀을 때, 입력한 대화 내용을 서버로 전달하기
			if (evt.keyCode == 13) {	//엔터
				let message = {
						code: '3',
						sender: window.name,
						receiver: '',
						content: $('#msg').val(),
						regdate: new Date().toLocaleString()
				};
			
				//전송메시지 '/'로 시작하면 이모티콘 전송으로 설정한다.
				if ($('#msg').val().startsWith('/')) {
					message.code = '4';
				}
			
				ws.send(JSON.stringify(message));		
				
				$('#msg').val('').focus();
				
				if (message.code == '3') {
					print(window.name, message.content, 'me', 'msg', message.regdate);
				} else if (message.code == '4') {
					printEmoticon(window.name, message.content, 'me', 'msg', message.regdate);
				}
			}
		});
        
        	//이모티콘 출력 메소드
		function printEmoticon(name, msg, side, state, time) {
			
			let temp = `
				<div class="item \${state} \${side}">
					<div>
						<div>\${name}</div>
						<div style = "background-color:#fff; boarder:0;"><img src="/socket/resources/emoticon/\${msg}.png"></div>
					</div>
					<div>\${time}</div>
				</div>
			`;
			
			$('#list').append(temp);
			
			//새로운 내용이 추가되면 스크롤을 바닥으로 내린다. (이미지 로딩이 시간이 소요되서 0.1초의 시간차를 둔다.)
			setTimeout(scrollList, 100);
		}
		
	</script>

2. (서버) 클라이언트 메시지 송수신

ChatServer.java

package com.test.server;

@ServerEndpoint("/chatserver.do")
public class ChatServer {
	@OnOpen
	public void handleOpen(Session session) {
		sessionList.add(session);
		checkSessionList();			//접속자 확인
		clearSessionList();			
	}
	
	@OnMessage
	public void handleMessage(String msg, Session session) {
		System.out.println(msg);
		
		Gson gson = new Gson();
		
	 	Message message =  gson.fromJson(msg, Message.class);
		
	 	if (message.getCode().equals("1")) { //상대방 대화방 입장
	 		for (Session s : sessionList) {
	 			if (s != session) {
	 				try {
	 					s.getBasicRemote().sendText(msg);
					} catch (Exception e) {
						e.printStackTrace();
					}
	 			}
	 		}
	 	} else if (message.getCode().equals("2")) { 
	 		sessionList.remove(session);
	 		for (Session s : sessionList) {
	 			try {
	 				s.getBasicRemote().sendText(msg);
				} catch (Exception e) {
					e.printStackTrace();
				}
	 		}
	 	} else if (message.getCode().equals("3")) {		//상대방 메시지 전송
	 		//보낸 사람빼고 나머지 사람에게 전달한다.
	 		for (Session s : sessionList) {
	 			if (s != session) {
	 				try {
						s.getBasicRemote().sendText(msg);
					} catch (Exception e) {
						e.printStackTrace();
					}
	 			}
	 		}
	 	} else if (message.getCode().equals("4")) {		//상대방 메시지 전송
	 		for (Session s : sessionList) {
	 			if (s != session) {
	 				try {
						s.getBasicRemote().sendText(msg);
					} catch (Exception e) {
						e.printStackTrace();
					}
	 			}
	 		}
	 	}
	}
}

3. (클라이언트) 채팅 출력하기

chat.jsp

	<script>
		function connect(name) {
			
			ws.onmessage = function(evt) {
				
				let message = JSON.parse(evt.data);
				console.log(message);
				
				if (message.code == '1') {
					print('', `[\${message.sender}]님이 들어왔습니다.`, 'other', 'state', message.regdate);
				} else if (message.code == '2') {
					print('', `[\${message.sender}]님이 나갔습니다.`, 'other', 'state', message.regdate);
				} else if (message.code == '3') {
					print(message.sender, message.content, 'other', 'msg', message.regdate);
				} else if (message.code == '4') {
					printEmoticon(message.sender, message.content, 'other', 'msg', message.regdate);
				}
			}
		}//connect
		
	</script>

저작자표시 (새창열림)