[JAVA] 웹소캣으로 채팅 구현하기

안녕하세요 오늘은 웹소캣으로 채팅을 구현해 보도록 하겠습니다

😎 소켓의 정의
소켓은 네트워크 상에서 돌아가는 두 개의 프로그램 간 양방향 통신의 하나의 엔드 포인트입니다. 소켓은 포트 번호에 바인딩되어 TCP 레이어에서 데이터가 전달되야하는 애플리케이션을 식별할 수 있게 합니다

😎 엔드 포인트란?
엔드 포인트란 아이피 주소와 포트 번호의 조합을 의미합니다. 모든 TCP 연결은 2개의 앤드 포인트로 유일하게 식별되어질 수 있습니다. 따라서 클라이언트와 서버 간 여러 개의 연결이 맺어질 수 있습니다.

😎 Socket 클래스
자바 플랫폼에서 java.net 패키지는 네트워크 상에서 두개의 프로그램 간 양방향 통신에서 한쪽 지점을 구현하는 Socket 클래스를 제공합니다. Socket 클래스는 특정 시스템의 세부사항은 감추면서 플랫폼 독립적인 구현의 최상단에 위치합니다. 네이트브 코드에 의존하는 대신에 java.net.Socket 클래스를 이용해서 플랫폼 독립적인 방식으로 네트워크 상에서 통신을 할 수 있습니다.

먼저, dependency를 추가해야합니다

implementation 'org.springframework.boot:spring-boot-starter-websocket'

프로젝트를 하기 사진과 같이 셋팅합니다

webSocketConfig.java

package com.example.chatting.Config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

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

}

ChatController.java

package com.example.chatting.Controller;

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

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.net.Socket;
import java.sql.Array;
import java.util.ArrayList;
import java.util.List;

@Controller
@ServerEndpoint("/chat/{userId}")
public class ChatController extends Socket {
    private static final List<Session> session = new ArrayList<Session>();

    @GetMapping("/chatroom")
    public String index(Model model){
        return "chatroom";
    }

    @OnOpen
    public void open(Session newUser, @PathParam(value="userId") String userId){
        System.out.println("connected");
        session.add(newUser);
        System.out.println(newUser.getId());
        System.out.println(userId);
        for(int i = 0; i< session.size(); i++){
            try{
                session.get(i).getBasicRemote().sendText(userId + "님이 입장하였습니다");
            }catch(IOException e){
                e.printStackTrace();
            }
        }
    }

    @OnMessage
    public void getMsg(Session recieveSession, String msg, @PathParam(value="userId") String userId){
        for(int i = 0; i< session.size(); i++){
            if(!recieveSession.getId().equals(session.get(i).getId())){
                try{
                    session.get(i).getBasicRemote().sendText(userId +" : "+msg);
                }catch (IOException e){
                    e.printStackTrace();
                }
            }else{
                try{
                    session.get(i).getBasicRemote().sendText(userId +" : "+msg);
                }catch(IOException e){
                    e.printStackTrace();
                }
            }
        }
    }

    @OnClose
    public void onClose(Session recieveSession , @PathParam(value="userId") String userId){
        session.remove(recieveSession);

        for(int i = 0; i< session.size(); i++){
            try{
                session.get(i).getBasicRemote().sendText(userId + "님이 채팅방을 나갔습니다");
            }catch(IOException e){
                e.printStackTrace();
            }
        }
    }

}

JS

<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script>
    let userId = prompt("닉네임을 입력하세요");

    let socket = new WebSocket("ws://localhost:8080/chat/" + userId);

    socket.onopen = function (e){
        console.log("open server!")
    }

    socket.onerror = function(e){
        console.log(e);
    }

    socket.onmessage = function(e){
        console.log(e.data);
        let msgArea = document.querySelector(".msgArea");
        let newMsg = document.createElement("div");
        newMsg.innerText=e.data;
        msgArea.append(newMsg);
    }

    function sendMsg(){
        let content=document.querySelector('.content').value;
        socket.send(content);
    }

</script>

해당 파일을 적용후 서버를 기동해줍니다 url입력 후 정상동작하는지 확인합니다

테스트 결과 잘 동작하는것 같습니다 다음번엔 더 재미있는 소재로 찾아뵙겠습니다