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()"À» ÅëÇØ ¿£ÅÍÅ°·Î ¸Þ½ÃÁö¸¦ Àü¼ÛÇÏ°Ô ÇÑ´Ù°í Çߴµ¥
¿þÀÏ°ú ¿§Áö¿¡¼´Â Á¤»óÀÛµ¿ ÇÏÁö¸¸ ÆÄÀ̾îÆø½º¿¡¼´Â ÀÛµ¿µÇÁö ¾Ê¾Ò½À´Ï´Ù.
±¸±Û¸µ Çغ¸´Ï ÆÄÀ̾îÆø½º¿¡¼´Â ´Ù¸¥ ¹æ½ÄÀ» ½á¾ß ÇÑ´Ù°í ÇÕ´Ï´Ù. ÀÌ ³»¿ëÀº ´ÙÀ½¿¡ ¼öÁ¤Çؼ ¾÷·Îµå ÇÏ°Ú½À´Ï´Ù.