웹소켓을 활용한 가장 기초가 되는 채팅 예제 소스 입니다.
스프링, 메이븐 환경으로 구성 되었습니다.
무료채팅 사이트를 만들었는데, 이 사이트의 기초가 되는 내용들입니다.
1. 웹소켓 라이브러리 추가 (pom.xml)
웹소켓과 잭슨 라이브러리가 필요 합니다.
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
<version>4.3.22.RELEASE</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.6</version>
</dependency>
2. 웹소켓 핸들러 설정 추가 (websocket-config.xml)
URL에서 /chat 라는 요청이 오면 com.chat.handler.HandlerChat에서 처리 하겠다라는 의미 입니다.
참고로 웹소켓이 처음 연결시 클라이언트로부터 http://localhost/chat_test/chat/info?t=1590294216548 의 형태로 요청이 오고 이후 웹소켓 연결이 됩니다.
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:websocket="http://www.springframework.org/schema/websocket"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/websocket http://www.springframework.org/schema/websocket/spring-websocket-4.3.xsd">
<websocket:handlers allowed-origins="*" >
<websocket:mapping handler="handlerChat" path="/chat" />
<websocket:sockjs websocket-enabled="true" />
</websocket:handlers>
<bean id="handlerChat" class="com.chat.handler.HandlerChat" />
</beans>
3. 웹소켓 핸들러 (HandlerChat.java)
채팅에 접속한 사용자 세션을 관리하고, 모든 사용자에게 채팅 메세지를 전달합니다.
package com.chat.handler;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
@Component
public class HandlerChat extends TextWebSocketHandler {
private List<WebSocketSession> sessionList = new ArrayList<WebSocketSession>();
// 클라이언트가 서버로 연결 처리
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
// 채팅방에 접속한 사용자 세션을 리스트에 저장
sessionList.add(session);
// 모든 세션에 채팅 전달
for (int i = 0; i < sessionList.size(); i++) {
WebSocketSession s = sessionList.get(i);
s.sendMessage(new TextMessage(session.getId() + "님이 입장 했습니다."));
}
}
// 클라이언트가 서버로 메세지 전송 처리
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
// 모든 세션에 채팅 전달
for (int i = 0; i < sessionList.size(); i++) {
WebSocketSession s = sessionList.get(i);
s.sendMessage(new TextMessage(session.getId() + " : " + message.getPayload()));
}
}
// 클라이언트가 연결을 끊음 처리
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
// 채팅방에서 퇴장한 사용자 세션을 리스트에서 제거
sessionList.remove(session);
// 모든 세션에 채팅 전달
for (int i = 0; i < sessionList.size(); i++) {
WebSocketSession s = sessionList.get(i);
s.sendMessage(new TextMessage(session.getId() + "님이 퇴장 했습니다."));
}
}
}
4. 스프링 컨트롤러 (ControllerView.java)
package com.chat.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class ControllerView {
// 채팅방 입장
@RequestMapping(value = "/chat.do", method = RequestMethod.GET)
public String view_chat(HttpServletRequest request, HttpServletResponse response, Model model) throws Exception {
return "view_chat";
}
}
5. 클라이언트 (view_chat.jsp)
SockJS 웹소켓으로 서버에 연결하고, 메세지를 전송하고, 메세지를 수신합니다.
<%@ 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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>웹소켓 채팅</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.4.0/sockjs.js"></script>
<script type="text/javascript">
var webSocket = {
init: function(param) {
this._url = param.url;
this._initSocket();
},
sendChat: function() {
this._sendMessage($('#message').val());
$('#message').val('');
},
receiveMessage: function(str) {
$('#divChatData').append('<div>' + str + '</div>');
},
closeMessage: function(str) {
$('#divChatData').append('<div>' + '연결 끊김 : ' + str + '</div>');
},
disconnect: function() {
this._socket.close();
},
_initSocket: function() {
this._socket = new SockJS(this._url);
this._socket.onmessage = function(evt) {
webSocket.receiveMessage(evt.data);
};
this._socket.onclose = function(evt) {
webSocket.closeMessage(evt.data);
}
},
_sendMessage: function(str) {
this._socket.send(str);
}
};
</script>
<script type="text/javascript">
$(document).ready(function() {
webSocket.init({ url: '<c:url value="/chat" />' });
});
</script>
</head>
<body>
<div style="width: 800px; height: 700px; padding: 10px; border: solid 1px #e1e3e9;">
<div id="divChatData"></div>
</div>
<div style="width: 100%; height: 10%; padding: 10px;">
<input type="text" id="message" size="110" onkeypress="if(event.keyCode==13){webSocket.sendChat();}" />
<input type="button" id="btnSend" value="채팅 전송" onclick="webSocket.sendChat()" />
</div>
</body>
</html>
결과
'개발 - 웹소켓 채팅 강좌' 카테고리의 다른 글
스프링+웹소켓 채팅 예제 : 여러 채팅방 만들기 (1) | 2020.05.24 |
---|