[Spring] WebSocket을 이용한 1:1 채팅 / 실시간 알림 - [1]

1. pom.xml에 dependecy를 추가해준다.

첫번째 spring-websocket은 WebSocket 라이브러리이며,

org.springframework.web.socket.handler.TextWebSocketHandler 를 사용 할 수 있게 해준다.

* spring 버전과 동일하게 설정하였다. ${org.springframework-version}

 

두번째 jackson-databind는 웹소켓 채팅의 Json 타입을 Java형태로 바꿔주는 역할을 한다. 

com.fasterxml.jackson.databind.ObjectMapper 를 사용 할 수 있게 해준다.

        <!-- 채팅 위한 socket -->
        <dependency> 
            <groupId>org.springframework</groupId> 
            <artifactId>spring-websocket</artifactId> 
            <version>${org.springframework-version}</version> 
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.6</version>
        </dependency>
        <!-- // 채팅 위한 socket -->

3. sevlet-context.xml에 bean등록 및 handler설정

WebSocket은 일반적인 servlet-mapping과 다르게 동작하기 때문에 servlet-context에 따로 등록을 해주어야 한다.

 

path에는 자신이 원하는 url-mapping 주소를 입력하면 된다.

handler에는 밑의 beans:bean의 id와 동일한 값을 입력하자.

beans:bean의 class는 자신이 등록한 웹소켓 클래스의 풀 패키지명을 작성해주면 된다.

 

필자의 패키지명이 package com.fp.neezit.chat.controller; 이므로, 

풀 패키지명은 클래스명까지 포함하여 com.fp.neezit.chat.controller.WebSocketHandler가 된다.

 

( 상속받은 WebSocketTextHandler와 이름이 비슷하지만 상속받은 클래스명을 작성하면 안된다!! )

    <!-- 웹 소켓 핸들러 -->
    <websocket:handlers>
        <websocket:mapping path="/websocket/echo.do" handler="myHandler"/>
    </websocket:handlers>
 
    <beans:bean id="myHandler" class="com.fp.neezit.chat.controller.WebSocketHandler"/>

4. jsp의 JavaScript로 WebSocket연결시키기

        // 웹소켓
         let websocket;
     
         //입장 버튼을 눌렀을 때 호출되는 함수
         function connect() {
             // 웹소켓 주소
             var wsUri = "ws://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/websocket/echo.do";
             // 소켓 객체 생성
             websocket = new WebSocket(wsUri);
             //웹 소켓에 이벤트가 발생했을 때 호출될 함수 등록
             websocket.onopen = onOpen;
             websocket.onmessage = onMessage;
         }
         
         //웹 소켓에 연결되었을 때 호출될 함수
         function onOpen() {
         }
         
        // * 1 메시지 전송
        function sendMessage(message){
        }
        
         // * 2 메세지 수신
         function onMessage(evt) {
        }

4-1. websocket 변수를 전역변수로 설정한다. ( 다른 함수에서 이용 할 수 있도록 )

4-2. connect() 함수를 만들어 WebSocket 연결 함수를 만들어 준다.

 

※ connect()함수 설명 ※

wsUri : 

ws:// = http와 다른 웹소켓 전용 프로토콜. 보안이 더 강화된 wss://도 존재한다.

${pageContext.request.serverName}: = localhost:

자신의 아이피, localhost를 의미한다.

 

${pageContext.request.serverPort} = 8086

el태그로 작성했기 때문에 포트번호가 바뀌어도 적용가능하다.

 

${pageContext.request.contextPath} = /neezit

앞에 / 가 자동으로 붙으며 프로젝트의 Context root이다.

 

/websocket/echo.do

Servlet-context.xml에 등록한 path를 입력해준다.

 

4-3. connect() 함수를 만들어 WebSocket 연결 함수를 만들어 준다.

전역변수로 설정한 websocket에

new WebSocket(wsUri); 로 소켓 객체 생성

 

4-4. WebSocket 객체에서 사용하고 싶은 메소드를 오버라이딩 한다.

console.log(websocket)를 해보면,

크롬 F12 개발자도구에 객체가 나오게 된다.

 

필자는

onmessage와 onopen만 오버라이딩 했기 때문에 함수가 존재하며,

onclose와 onerror는 null로 표기가 되고 있다.

 

onclose : 웹소켓 연결 끊길 시

onerror : 웹소켓 에러 시

onmessage : 메세지 수신 시

onopen : 웹소켓 연결 성공 시

WebSocket 객체의 메소드및 변수 확인 가능

4-5. 웹소켓 메세지 전송시에는 __proto__에 있는

send 메소드를 이용한다.

__proto__를 눌러보게 되면 send를 확인 할 수 있다.

__proto__안의 최하단에 send 확인 가능

여기까지가 기본 백엔드 및 프론트엔드 웹소켓 채팅 설정단계입니다.