spring Endpoint 사용한 실시간 채팅, 상대의 메세지를 못받아옵니다.
본문
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();
}
}
콘솔창에는 두 유저가 이렇게 대화가 가능한데
뷰페이지에서는 위에서 보신것과 같이 상대방의 메세지가 뜨지 않습니다. ㅠ
관리자 도구의 메세지에도 아예 뜨지 않습니다
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과정이 필요합니다.
해당 블로그 참조해보세요.
감사합니다 구현완료했습니다 ㅎㅎ
