spring Endpoint 사용한 실시간 채팅, 상대의 메세지를 못받아옵니다. 채택완료
View (jsp)페이지
</p>
<p> <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">
상대방과 실시간 채팅으로 대화해보세요.
<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>
<button id="start" style="float:right;"><img src="/hhw/resources/images/icon/ico_chat.jpg" width="30px">
채팅방 입장</button>
</div>
</div>
<!-- 채팅방 화면 -->
<div style="width: 300px; display: none;" id="chatbox">
<fieldset>
<div id="messageWindow"></div>
<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>
");
//웹소켓을 통해 채팅서버에 메세지 전송함
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>
");
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>
");
//화면이 위로 스크롤되게 처리함
$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></p>
<p>
WebsocketServer.java
</p>
<p>package com.ict.hhw.progress.controller;</p>
<p>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;</p>
<p>import org.springframework.ui.Model;</p>
<p>@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();
}</p>
<p>}</p>
<p>
콘솔창에는 두 유저가 이렇게 대화가 가능한데
뷰페이지에서는 위에서 보신것과 같이 상대방의 메세지가 뜨지 않습니다. ㅠ
관리자 도구의 메세지에도 아예 뜨지 않습니다
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과정이 필요합니다.
해당 블로그 참조해보세요.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인