웹소켓 기본 코드

WebSocketController

 

@RequiredArgsConstructor
@RestController
public class WebSocketController  {
    private final WebSocketService webSocketService;

    @GetMapping("/websocket/count") // 접속자 수 띄우기
    public int userCount() {
        return webSocketService.userCount();
    }


}

 

---

 

 

 

WebSocketService

 

@RequiredArgsConstructor
@Service
@ServerEndpoint("/websocket")
//websocket 핸들러를 구현하기 위해서 기본적으로 TextWebSocketHandler를 상속
public class WebSocketService extends TextWebSocketHandler {
    private static final Logger logger = LoggerFactory.getLogger(com.dalcho.adme.controller.WebSocketController.class);
    private static List<Session> sessionUsers = Collections.synchronizedList(new ArrayList<>());

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


    public int userCount() {
        return sessionUsers.size();
    }


    @OnOpen // 사용자가 페이지에 접속할 때 실행되는 @OnOpen메서드에서 세션 리스트에 담아준다.
    public void open(Session newUser) {
        System.out.println("connected");
        session.add(newUser);
        sessionUsers.add(newUser);
        System.out.println(newUser.getId());
        System.out.println("현재 접속자 수 : " + sessionUsers.size());
        userCount();
    }     // 사용자가 증가할 때마다 세션의 getId()는 1씩 증가하며 문자열 형태로 지정된다.


    @OnMessage // 사용자로부터 메시지를 받았을 때, 실행된다.
    public void getMsg(String msg) {
        for (int i = 0; i < session.size(); i++) {
            try {
                session.get(i).getBasicRemote().sendText(msg);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }


    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }


    @OnClose
    public void onClose(Session session, CloseReason closeReason) {
        sessionUsers.remove(session);
        System.out.println("remove : " + session);
        System.out.println("sessionUsers.size() = " + sessionUsers.size());
        logger.info(String.format("Session %s closed because of %s", session.getId(), closeReason));
    }

    //에러 발생시
    @OnError
    public void onError(Session session, Throwable e) {
        logger.info("문제 세션 : " + session);
        System.out.println(e.toString());
    }

    @Override//웹소켓 클라이언트가 언결을 직접 끊거나 서버에서 타임아웃이 발생해서 연결을 끊을때 호출된다.
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {

    }
}

 

---

 

 

 

 

chat.js

 

let username = sessionStorage.getItem("nickname");
let socket = new WebSocket("ws://localhost:8080/websocket");

socket.onopen = function (e) {
    console.log('open server!')
    let str = username + " 님이 입장하셨습니다.";
    socket.send(str);
    count_user()
};

socket.onclose = function (e) { // 채팅방에서 나갔을 때
    let str = username + " 님이 방을 나가셨습니다.";
    socket.send(str);
    $("#join-count").load(window.location.href + " #join-span")

}


// 접속자 수 띄우기
$(document).ready(count_user)

function count_user() {
    $.ajax({
        type: "GET",
        url: `/websocket/count`,
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            if (response == 0) {
                response = 1
            }
            $("#num").text(response)
        }
    })
}


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.className = "chat-msg";
    newMsg.innerText = e.data;
    msgArea.append(newMsg);
}

function sendMsg() {
    let content = document.querySelector('.content').value;
    socket.send(username + " : " + content); // 닉네임 : message 형태
    $(".content").val('')
    count_user();
}

function endChat() {
    let str = username + " 님이 방을 나가셨습니다.";
    socket.send(str);
    $("#join-count").load(window.location.href + " #join-span")
    count_user()
    location.href = "/";
}

 

---

 

 

* 초반 작성 코드 

2022.03.30 - [Project] - 웹 소켓 코드 정리