** HTML5 의 Web Push
14.JSP 기타.key=> 전통적인 클라이언트 - 서버 시스템의 통신방식
클라이언트가 서버에게 데이터를 요청하고 서버가 요청을 받아서 처리하고 그 결과를 클라이언트에게 전송하는 방식입니다.
=>Web Push는 클라이언트가 서버에 연결을 한 상태라면 서버가 클라이언트의 요청없이 데이터를 전송하는 기술
(안드로이드를 배울 때 가장 중요한 것 중 하나)
=> Web이 아니라 Apple Server 가 IOS 에게 전송하는 것을 APNS 라고 하고 Google 서버가 Android 에게 전송하는 것을 FCM이라고 합니다.
: 안드로이드는 기기차원에서 push를 받고 웹은 브라우저 차원에서 받기 때문에 좀 다르다.
실습 : 클라이언트의 요청 없이 5초마다 랜덤한 숫자를 클라이언트에게 전송
1. EtcService 인터페이스에 푸시를 위한 메소드를 선언
public void push(HttpServletRequest request, HttpServletResponse response);
2. EtcServiceImpl 클래스에 메소드 구현
//*****푸시를 위한 메소드******// @Override public void push(HttpServletRequest request, HttpServletResponse response) { //출력을 위한 스트림 생성 PrintWriter pw = null; try { //출력형식을 text/event-stream 으로 설정 response.setContentType("text/event-stream"); //출력 인코딩 설정 response.setCharacterEncoding("utf-8"); //출력 내용을 만들고 출력하기 pw = response.getWriter(); Random r = new Random(); //data는 key이므로 공백을 넣으면 안된다. :은 키에 포함되지 않고 :앞까지가 key이다. pw.write("data:"+(r.nextInt(45)+1)+"\n\n"); //5초 대기 Thread.sleep(5000); }catch(Exception e) { System.out.println(""+e.getMessage()); e.printStackTrace(); }finally { if(pw!=null) { pw.close(); } } } //**************************************************************************// |
3. Controller 클래스에 push.go 요청이 왔을 때 처리하는 코드를 doGet 메소드에 추가
case "push.go": etcService.push(request, response); break; |
4. index.jsp 파일에 웹 푸시를 받을 수 있는 코드를 작성
1) body 태그 안에 버튼과 출력영역을 생성
<input type="button" id="push" value="push 시작" /><br/> <div id="disp"></div> |
2) script 추가
document.getElementById("push") .addEventListener("click", function(){ //웹 푸시 객체 만들기 var eventsrc = new EventSource("push.go") //메시지가 왔을 때 호출 될 함수를 등록 eventsrc.addEventListener("message", function(result){ document.getElementById("disp").innerHTML = result.data }) }) |
** 웹 소켓을 이용한 채팅 만들기
1. pom.xml 파일에 웹소켓 라이브러리를 가져오는 코드를 추가
<dependency> <groupId>javax.websocket</groupId> <artifactId>javax.websocket-api</artifactId> <version>1.1</version> </dependency> |
2. 웹소켓 클래스 생성
package service; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; //웹소켓 서버 클래스 //여기에 주소가 있어서 Controller을 따로 만들 필요가 없음. @ServerEndpoint("/websocket") public class WebSocketService { //접속한 클라이언트들의 목록을 저장할 인스턴스 static List<Session> list = new ArrayList<Session>();
//클라이언트가 연결 되었을 때 호출되는 메소드 @OnOpen public void onOpen(Session session) { list.add(session); }
//클라이언트가 연결 해제되었을 때 호출되는 메소드 @OnClose public void onClose(Session session) { list.remove(session); }
//클라이언트의 메시지가 왔을 때 호출되는 메소드 @OnMessage public void onMessage(String message, Session session) throws IOException, InterruptedException{ //throws는 호출하는 곳에서 예외를 해결? 하라는 뜻
//받은 메시지를 모든 클라이언트에게 전송 for(Session s : list) { s.getBasicRemote().sendText(message); } } } |
3. index.jsp 파일에 채팅 창을 생성하는 코드를 추가
<body> 닉네임<input type="text" id="nick" size="30" /><br/> 보낼내용<input type="text" id="message" size="50" /><br/> <input type="submit" id="send" value="보내기" /><br/> 받은내용<textarea id="print" rows="15" cols="80"></textarea></br/> </body> . . . <script> //웹소켓 객체 생성 var websocket = new WebSocket("ws://localhost:8080/mavenemail0911/websocket") //에러가 발생한 경우 websocket.onerror = function(event){ onError } //처음 연결한 경우 websocket.onopen = function(event){ onOpen(event) } //메시지가 온 경우 websocket.onmessage = function(event){ onMessage(event) } function onError(event){ alert(event.data); } function onOpen(event){ document.getElementById("print").value = "연결되었습니다." } function onMessage(event){ var print = document.getElementById("print") print.value = event.data +"\n"+print.value; } document.getElementById("send").addEventListener("click", function(){ websocket.send(document.getElementById("nick").value + ":" + document.getElementById("message").value) }) </script> |
'Front End' 카테고리의 다른 글
| 0808 선생님 메모장 보고 수정 필요 (0) | 2018.12.19 |
|---|---|
| 0813 HTML, CSS, JavaScript (0) | 2018.10.22 |
| Proxy (0) | 2018.09.11 |
| maven (0) | 2018.09.11 |
| File Upload (0) | 2018.09.10 |
