JSP 웹소켓 채팅 / 웹 페이지 접속자들끼리 채팅, 귓속말
웹 소켓(Web Socket)을 이용하여 웹 페이지에 접속한 사용자들끼리 채팅에 참여할 수 있도록 하겠습니다.
Websocket은 Client와 Server가 양방향 통신을 할 수 있도록 합니다.
웹소켓은 서버에서 클라이언트를 호출 할 수 있고 클라이언트가 서버에서 데이터를 가져갈 수 있게 합니다.
서버에 소켓이 연결되면 3웨이 핸드쉐이크 과정을 통해 tcp세션이 생성됩니다.
서버는 세션관리를 하면서 클라이언트 ip와 포트정보를 알 수 있고 이를 통해 클라이언트로 데이터를 전송할 수 있게 됩니다.
서버와 클라이언트는 양측 다 포트를 열어두고 통신 준비를 합니다.
서버는 항상 고정된 포트를 사용하면서 클라이언트 포트를 랜덤하게 할당해 줍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | import java.io.IOException; import java.util.Collections; import java.util.HashSet; import java.util.Set; import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; @ServerEndpoint("/broadcasting") public class BroadSocket { private static Set<Session> clients = Collections.synchronizedSet(new HashSet<Session>()); @OnMessage public void onMessage(String message, Session session) throws IOException { System.out.println(message); synchronized(clients) { for(Session client : clients) { if(!client.equals(session)) { client.getBasicRemote().sendText(message); } } } } @OnOpen public void onOpen(Session session) { System.out.println(session); clients.add(session); } @OnClose public void onClose(Session session) { clients.remove(session); } } | cs |
Broadsocket.java
서버단 자바소스입니다.
@ServerEndpoint는 클라이언트에서 서버로 접속 할 주소로 지정합니다.
@OnMessage에서는 클라이언트로 부터 메시지가 도착했을때 처리입니다.
@OnOpen은 클라이언트에서 서버로 접속할 때의 처리입니다.
@OnClose는 접속이 끊겼을때 처리입니다.
웹페이지 화면
오른쪽 아래 말풍선 아이콘을 만들어 말풍선을 클릭했을 때 채팅창이 노출되도록 하고 다시 클릭할 경우 채팅창을 숨기도록 했습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | <%@ page contentType="text/html; charset=utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> <%@ page session="true"%> <body> <!-- 로그인한 상태일 경우와 비로그인 상태일 경우의 chat_id설정 --> <c:if test="${(login.id ne '') and !(empty login.id)}"> <input type="hidden" value='${login.id }' id='chat_id' /> </c:if> <c:if test="${(login.id eq '') or (empty login.id)}"> <input type="hidden" value='<%=session.getId().substring(0, 6)%>' id='chat_id' /> </c:if> <!-- 채팅창 --> <div id="_chatbox" style="display: none"> <fieldset> <div id="messageWindow"></div> <br /> <input id="inputMessage" type="text" onkeyup="enterkey()" /> <input type="submit" value="send" onclick="send()" /> </fieldset> </div> <img class="chat" src="./img/chat.png" /> </body> <!-- 말풍선아이콘 클릭시 채팅창 열고 닫기 --> <script> $(".chat").on({ "click" : function() { if ($(this).attr("src") == "./img/chat.png") { $(".chat").attr("src", "./img/chathide.png"); $("#_chatbox").css("display", "block"); } else if ($(this).attr("src") == "./img/chathide.png") { $(".chat").attr("src", "./img/chat.png"); $("#_chatbox").css("display", "none"); } } }); </script> <script type="text/javascript"> var textarea = document.getElementById("messageWindow"); var webSocket = new WebSocket('ws://localhost:8090/project0509Final/broadcasting'); var inputMessage = document.getElementById('inputMessage'); webSocket.onerror = function(event) { onError(event) }; webSocket.onopen = function(event) { onOpen(event) }; webSocket.onmessage = function(event) { onMessage(event) }; function onMessage(event) { var message = event.data.split("|"); var sender = message[0]; var content = message[1]; if (content == "") { } else { if (content.match("/")) { if (content.match(("/" + $("#chat_id").val()))) { var temp = content.replace("/" + $("#chat_id").val(), "(귓속말) :").split(":"); if (temp[1].trim() == "") { } else { $("#messageWindow").html($("#messageWindow").html() + "<p class='whisper'>" + sender + content.replace("/" + $("#chat_id").val(), "(귓속말) :") + "</p>"); } } else { } } else { if (content.match("!")) { $("#messageWindow").html($("#messageWindow").html() + "<p class='chat_content'><b class='impress'>" + sender + " : " + content + "</b></p>"); } else { $("#messageWindow").html($("#messageWindow").html() + "<p class='chat_content'>" + sender + " : " + content + "</p>"); } } } } function onOpen(event) { $("#messageWindow").html("<p class='chat_content'>채팅에 참여하였습니다.</p>"); } function onError(event) { alert(event.data); } function send() { if (inputMessage.value == "") { } else { $("#messageWindow").html($("#messageWindow").html() + "<p class='chat_content'>나 : " + inputMessage.value + "</p>"); } webSocket.send($("#chat_id").val() + "|" + inputMessage.value); inputMessage.value = ""; } // 엔터키를 통해 send함 function enterkey() { if (window.event.keyCode == 13) { send(); } } // 채팅이 많아져 스크롤바가 넘어가더라도 자동적으로 스크롤바가 내려가게함 window.setInterval(function() { var elem = document.getElementById('messageWindow'); elem.scrollTop = elem.scrollHeight; }, 0); </script> | cs |
chat_addon.jsp
클라이언트단 HTML, JAVASCRIPT소스입니다.
ws://localhost:8090/project0509Final/broadcasting의 경로는 ws://localhost:포트/이클립스프로젝트이름/broadcasting으로 지정해줍니다.
제 경우에는 8090포트를 사용하고 있고 project0509Final이라는 프로젝트 명으로 작성했습니다.
아까 서버단에서 만든 클라이언트 접속 주소를 통해 접속할 수 있습니다.
제가 작성한 웹페이지에는 로그인 기능도 구현해놓은 상태이기 때문에 로그인한 사용자와 비로그인 사용자를 위한 chatId를 설정했습니다.
비로그인 사용자의 경우에는 sessionId를 얻어와서 그중 일부를 잘라 비로그인자 전용 아이디를 만들어 냅니다.
아무 메시지도 입력하지 않은 채 전송할 수 없도록 막습니다.
/아이디 내용을 통해 채팅 참여자들 중 한 명에게 귓속말을 전송할 수 있습니다.
귓속말은 파란색으로 출력되도록 했습니다.
내용 입력 후 일일히 send 버튼을 눌러야 전송되는데 input박스에 onkeyup="enterkey()"로 연결하고
enterkey() 메소드를 만들어 input박스에 메시지 입력 후 엔터를 눌러도 전송이 되도록 합니다.
채팅 내용이 많아져 스크롤바를 벗어날 경우 항상 최신 내용을 볼 수 있도록 스크롤바를 항상 아래로 위치하게 합니다.
웨일 엣지 파이어폭스
네이버 웨일, 마이크로소프트 엣지, 모질라 파이어폭스 3개의 브라우저에서 테스트했습니다.
연결에 성공할 경우 "채팅에 참여하였습니다."라는 메시지를 볼 수 있습니다.
웨일에서 파이어폭스의 아이디로 귓속말을 보냈고 귓속말은 당연하게도 웨일과 파이어폭스만 확인할 수 있습니다. 엣지에서는 볼 수 없는 메시지죠.
위에서 onkeyup="enterkey()"을 통해 엔터키로 메시지를 전송하게 한다고 했는데
웨일과 엣지에서는 정상작동 하지만 파이어폭스에서는 작동되지 않았습니다.
구글링 해보니 파이어폭스에서는 다른 방식을 써야 한다고 합니다. 이 내용은 다음에 수정해서 업로드 하겠습니다.