Project/Blog

Blog - Web Chatting

고마우미 2022. 7. 20. 15:59

 

[결과물]

web socket 을 이용한 멀티 채팅을 구현한다.

[pom.xml]

<!-- ... -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-websocket</artifactId>
		</dependency>
<!-- ... -->

 

[SocketHandler.java]

package com.jinseong.blog.handler;

@Component
public class SocketHandler extends TextWebSocketHandler {

	HashMap<String, WebSocketSession> sessionMap = new HashMap<>();
	
	//socket Connected
	@Override
	public void afterConnectionEstablished(WebSocketSession session) throws Exception {
		super.afterConnectionEstablished(session);
		sessionMap.put(session.getId(), session);
	}

	//socket Closed
	@Override
	public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
		sessionMap.remove(session.getId());
		super.afterConnectionClosed(session, status);
	}
	
	//massageSend
	@Override
	protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
		String msg = message.getPayload();
		for(String key : sessionMap.keySet()) {
			WebSocketSession wss = sessionMap.get(key);
			try {
				wss.sendMessage(new TextMessage(msg));
			}catch(Exception e){
				e.printStackTrace();
			}
		}
		
		super.handleTextMessage(session, message);
	}
}

[WebSocketConfig.java]

package com.jinseong.blog.config;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
	@Autowired
	SocketHandler socketHandler;

	@Override
	public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
		registry.addHandler(socketHandler, "/toy/chatting");
	}
	
}

 

[ToyController]

package com.jinseong.blog.controller.common;

@Controller
public class ToyController {

    /* ... */

	@Autowired
	private WebSocketChattingService webSocketChattingService;
	
    /* ... */
    
	@GetMapping("toy/webSocketChatting")
	public String webSocketChatting(Model model) {
		String chatName = webSocketChattingService.getChatName();
		model.addAttribute("chatName",chatName);
		return "toy/webSocketChatting/main";
	}

}

 

[webSocketChatting.js]

let index = {
	init: function() {
		wsOpen();
	}
}

var ws;

function wsOpen() {
	ws = new WebSocket("ws://" + location.host + "/toy/chatting")
	wsEvt();
}

function wsEvt() {
	ws.onopen = function(data) {
		//socket init 초기화
	}

	ws.onmessage = function(data) {
		var msg = data.data;
		if (msg != null && msg.trim() != '') {
			$("#chattingSpace").append("<p>" + msg + "</p>");
		}
	}

	document.addEventListener("keypress", function(e) {
		if (e.keyCode == 13) {	//enter press
			sendChat();
		}
	})

}

function sendChat() {
	var chatName = $("#chatName").val();
	var msg = $("#chatMsg").val();
	ws.send("[" + chatName + "] " + msg);
	$('#chatMsg').val("");
	$("#chattingSpace").scrollTop($("#chattingSpace")[0].scrollHeight);
	
}


index.init();

 

[main.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@include file="../../layout/header.jsp"%>


<body class="">
	<div class="d-flex" id="wrapper">
		<%@include file="../../layout/toySideBar.jsp"%>
		<div id="page-content-wrapper">
			<%@include file="../../layout/nav.jsp"%>

			<div id="content" class="container-fluid ">
				<br />
				<div class="clearfix container-fluid">
					<div class="float-left">
						<button class="btn btn-primary" id="sidebarToggle"><></button>

					</div>
				</div>
				<br />
				<div class="ml-5 mr-5 mb-3">
					<h2>WebSocket 채팅</h2>
					웹소켓을 이용하여 간단한 채팅방을 구현하였습니다. <br />메세지 내용은 별도로 저장되지 않습니다. <br />개발 일지 - <a href="https://gomawoomi.tistory.com/56">https://gomawoomi.tistory.com/56</a>
				</div>
				<div class="ml-5 mr-5 mb-5">
					<div id="chattingSpace" class="chattingSpace p-3">
						${chatName}님 환영합니다.
						<hr />
					</div>

					<input id="chatName" name="chatName" class="form-control form-control-lg form-control-borderless" type="hidden" value="${chatName}">

					<div id="chatMsgDiv" class="card-body row no-gutters align-items-center">
						<div class="col">
							<input id="chatMsg" name="chatMsg" class="form-control form-control-lg form-control-borderless" type="search" placeholder="대화를 입력하세요." />
						</div>
						<div class="col-auto">
							<button id="sendChatBtn" class="btn btn-lg btn-primary" onclick="sendChat()">&nbsp전송&nbsp</button>
						</div>
					</div>

				</div>
			</div>
			<%@include file="../../layout/footer.jsp"%>
		</div>
		<script src="/js/toy/webSocketChatting.js"></script>
	</div>

</body>
</html>
저작자표시