spring Endpoint 사용한 실시간 채팅, 상대의 메세지를 못받아옵니다.

spring Endpoint 사용한 실시간 채팅, 상대의 메세지를 못받아옵니다.

QA

spring Endpoint 사용한 실시간 채팅, 상대의 메세지를 못받아옵니다.

본문

237643918_1614856378.6959.png

 

View (jsp)페이지


        <div id="con_ri">
                    <!--/ 커뮤니티 전용 사이드 배너 -->
                    <div id="sub_menu">
                        <div id="consubmit2"></div>
                    </div>
                    <div class="sub-menu">
                        <div class="section tag-fav">
                            <div class="title">실시간 채팅</div>
                            <div id="board_favorite_tags" class="list board_fav_tags empty">
                                <div class="fav-empty">
                                    상대방과 실시간 채팅으로 대화해보세요.<br>
                                
                                <input type="hidden" id="sender" size="10" value="${ sessionScope.loginUser.nickname }">
                                <c:if test="${ qplist.pro_writer eq sessionScope.loginUser.nickname }">
                                <input type="hidden" id="receiver" size="10" value="${ qplist.pro_answerer }">
                                </c:if>
                                <c:if test="${ qplist.pro_writer ne sessionScope.loginUser.nickname }">
                                <input type="hidden" id="receiver" size="10" value="${ qplist.pro_writer }">
                                </c:if>
                                <br>
                                <button id="start" style="float:right;"><img src="/hhw/resources/images/icon/ico_chat.jpg" width="30px">
                                채팅방 입장</button><br>
                                
                                </div>
                            </div>
                            
                            <!-- 채팅방 화면  -->
                            <div style="width: 300px; display: none;" id="chatbox">
                                <fieldset>
                                    <div id="messageWindow"></div>
                                    <br>    <input id="inputMessage" onkeyup="enterKey();">
                                     <input type="button" value="보내기" onclick="send();"> <input
                                        type="button" value="나가기" id="endBtn">
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- } 콘텐츠 끝 -->
        
        
        <script type="text/javascript">
            
            //상대방과 연결할 웹소켓 객체 준비
            var webSocket = null;
            //채팅창 앨리먼트 변수
            var $textarea = $('#messageWindow');
            //상대방에게 전송할 메세지 입력 앨리먼트 변수
            var $inputMessage = $('#inputMessage');
            
            /*
                웹소켓 생성 후 사용될 메소드들
                1. open() : 웹소켓 객체 생성시 실행됨.
                        서버와 연결해 주는 메소드임
                2. send() : 서버에 메세지 전송하는 메소드임
                3. message() : 서버에서 데이터를 받는 메소드임
                4. error() : 서버에 데이터 전송 중 에러 발생시
                        자동 실행되는 메소드임
                5. close() : 서버와 연결 끊을 때 사용하는 메소드임.
            */
            
            function connection(){
                /*
                웹소켓 객체는 생성자를 통해 생성됨
                객체 생성시에 서버와 자동 연결됨.
                사용되는 프로토콜은 ws:// 임.
                */    
                webSocket = new WebSocket("ws://localhost:8888/${pageContext.request.contextPath}/ws/websocketendpoint");
                
                //웹소켓을 통해서 연결이 될 때 동작할 이벤트핸들러 작성
                webSocket.onopen = function(event){
                    $textarea.html("<p class='chat_content'>"
                            + $('#sender').val() + 
                            "님이 입장하셨습니다.</p><br>");
                    //웹소켓을 통해 채팅서버에 메세지 전송함
                    webSocket.send($('#sender').val() + 
                            "|님이 입장함.");
                };
                
                //서버로 부터 메세지를 받을 때 동작할 이벤트핸들러 작성
                webSocket.onmessage = function(event){
                    onMessage(event);
                };
                
                //서버로 메세지 보낼 때 에러 발생 처리용 이벤트핸들러 작성
                webSocket.onerror = function(event){
                    onError(event)
                };
                
                //서버와 연결을 닫을 때의 이벤트핸들러 작성
                webSocket.onclose = function(event){
                    onClose(event);
                };
            }
                
            //보내기 버튼 클릭시 실행되는 send() 함수 작성
            function send(){
                //메세지를 입력하지 않고 버튼 누른 경우
                if($inputMessage.val() == "") {
                    alert("전송할 메세지를 입력하세요.");
                }else{  //메세지가 입력된 경우
                    $textarea.html($textarea.html() + 
                        "<p class='chat_content'>나 : "
                        + $inputMessage.val() + "</p><br>");
                    webSocket.send($('#sender').val() + "|"
                        + $inputMessage.val());
                    $inputMessage.val('');  //기록된 메세지 삭제함
                }
                
                //화면이 위로 스크롤되게 처리함
                $textarea.scrollTop($textarea.height());
            }  //send()
            
            
            //웹소켓 이벤트핸들러에 의해 실행되는 함수 작성
            function onMessage(event){
                //서버로 부터 데이터를 받았을 때 작동되는 함수임
                var message = event.data.split("|");
                
                //보낸사람 아이디
                var receiverID = message[0];
                
                //전송온 메세지
                var content = message[1];
                
                //전송온 메세지가 비었거나, 보낸사람이 내가 연결한
                //사람이 아닐 경우 아무 내용도 실행하지 않는다.
                if(content == "" || 
                        !receiverID.match($('#receiver').val())){
                    //비워 놓음
                 }else{
                    $textarea.html($textarea.html() +
                            "<p class='chat_content other-side'>"
                            + receiverID + " : " + content 
                            + "</p><br>");
                    //화면이 위로 스크롤되게 처리함
                    $textarea.scrollTop($textarea.height());
                }
                
            } //onMessage()
            
            function onError(event){
                alert(event.data);
            }
            
            function onClose(event){
                alert($('#sender').val() + "님이 퇴장하셨습니다.");
            }
            
            //'채팅하기' 버튼 클릭시, 서버와 연결되고 
            //채팅창이 나타나게 함
            $('#start').on('click', function(){
                //채팅창 영역 보이게 함
                $('#chatbox').css("display", "block");
                //클릭한 버튼은 안 보이게 함
                $(this).css("display", "none");
                //서버와 연결함
                connection();
            });
            
            //'나가기' 버튼 클릭시 소켓닫기
            //채팅창  안 보이게 함
            $('#endBtn').on('click', function(){
                //채팅창 안 보이게 함
                $('#chatbox').css("display", "none");
                //채팅하기 버튼은 다시 보이게 함
                $('#start').css("display", "inline");
                //서버로 종료 메세지 전송함
                webSocket.send($('#sender').val() 
                        + "님이 퇴장하였습니다.");
                //소켓닫기
                webSocket.close();
            });
            
            //전송할 메세지 입력하면서, 키보드 키에서 손뗄때마다
            //실행되는 이벤트핸들러 함수
            function enterKey(){
                //누른 키가 엔터키(Enter) 이면 메세지 전송함
                if(window.event.keyCode == 13){
                    send();
                }
            }
        </script>

 

 

 

WebsocketServer.java


package com.ict.hhw.progress.controller;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import org.springframework.ui.Model;
@ServerEndpoint("/ws/websocketendpoint")
public class WebsocketServer {
    
    @OnOpen
    public void onOpen(Session session){
        System.out.println("Open Connection ...");
    }
     
    @OnClose
    public void onClose(){
        System.out.println("Close Connection ...");
    }
     
    @OnMessage
    public String onMessage(String message){
        System.out.println("Message from the client: " + message);
        //String echoMsg = "Echo from the server : " + message;
        return message;
    }
    
    @OnError
    public void onError(Throwable e){
        e.printStackTrace();
    }
}

 

237643918_1614856543.9422.png

콘솔창에는 두 유저가 이렇게 대화가 가능한데 

뷰페이지에서는 위에서 보신것과 같이 상대방의 메세지가 뜨지 않습니다. ㅠ

관리자 도구의 메세지에도 아예 뜨지 않습니다

 

 function onMessage(event){
                //서버로 부터 데이터를 받았을 때 작동되는 함수임
                var message = event.data.split("|");
                
                //보낸사람 아이디
                var receiverID = message[0];
                
                //전송온 메세지
                var content = message[1];
                
                //전송온 메세지가 비었거나, 보낸사람이 내가 연결한
                //사람이 아닐 경우 아무 내용도 실행하지 않는다.
                if(content == "" || 
                        !receiverID.match($('#receiver').val())){
                    //비워 놓음
                 }else{
                    $textarea.html($textarea.html() +
                            "<p class='chat_content other-side'>"
                            + receiverID + " : " + content 
                            + "</p><br>");
                    //화면이 위로 스크롤되게 처리함
                    $textarea.scrollTop($textarea.height());
                }
                
            } //onMessage()

 

에서 상대방의 메세지를 받으면 브라우저에서 출력하도록 해주었는데

서버단에서 메세지를 받아오지 못하니 아예 작동하지 않습니다.

해결하려면 어떻게 해야할까요?

 

아시는분 답변해주시면 정말정말 감사하겠습니다...ㅠㅠㅠ

 

 

이 질문에 댓글 쓰기 :

답변 1

 @OnMessage
    public String onMessage(String message){
        System.out.println("Message from the client: " + message);
        //String echoMsg = "Echo from the server : " + message;
        return message;
    }

 

해당 부분이 서버에서 메시지를 받는 부분인것으로 보이는데 메시지를 받으면 웹소켓에 접속되어있는 사용자에게 뿌려주는 과정이 필요한데 단순히 리턴만 하고 있네요.

해당 부분에서 brodcast, send과정이 필요합니다.

 

https://kouzie.github.io/spring/Spring-Boot-%EC%8A%A4%ED%94%84%EB%A7%81-%EB%B6%80%ED%8A%B8-WebSocket/#tomcat-%EC%9B%B9%EC%86%8C%EC%BA%A3-%EC%98%88%EC%A0%9C

 

해당 블로그 참조해보세요.

답변을 작성하시기 전에 로그인 해주세요.
전체 9
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT