역방향 아 약 스 30 분 빠르게 파악
장면 2:사용자 의 핸드폰 스 캔 이 페이지 의 QR 코드 를 완성 하면 페이지 가 자동 으로 이동 합 니 다.
장면 3:채 팅 방 과 같은 환경 에서 누군가가 발언 하면 모든 로그 인 사용자 가 즉시 정 보 를 볼 수 있다.
전통 적 인 MVC 모델 요청 이 클 라 이언 트 로부터 서버 응답 을 받 아야 하 는 것 에 비해 역방향 Ajax 를 사용 하면 서버 측 이 자발적으로 클 라 이언 트 에 이 벤트 를 전송 하 는 것 을 모 의 하여 사용자 체험 을 향상 시 킬 수 있 습 니 다.본 고 는 Comet 과 WebSocket 을 포함 하여 두 부분 으로 나 누 어 Ajax 기술 에 대해 토론 할 것 이다.글 은 상기 두 가지 기술 수단 을 어떻게 실현 하 는 지 보 여 주 는 데 목적 을 둔다.Struts 2 나 SpringMVC 에서 의 응용 은 언급 되 지 않 았 다.이 밖 에 Servlet 의 설정 도 주해 방식 을 사용 하여 관련 지식 은 다른 자 료 를 참고 할 수 있 습 니 다.
1.Comet(최고의 호환성 수단)
Comet 은 본질 적 으로 이러한 개념 이다.서버 에서 클 라 이언 트 에 게 데 이 터 를 보 낼 수 있다.표준 HTTP Ajax 요청 에서 데 이 터 는 서버 측 에 보 내 고 Ajax 는 특정한 방식 으로 Ajax 요청 을 모 의 하면 서버 는 가능 한 한 빨리 클 라 이언 트 에 이 벤트 를 보 낼 수 있 습 니 다.일반적인 HTTP 요청 은 페이지 의 이동 과 수반 되 기 때문에 푸 시 이 벤트 는 브 라 우 저가 같은 페이지 나 프레임 에 머 물 러 야 하기 때문에 Comet 의 실현 은 Ajax 를 통 해서 만 이 루어 질 수 있 습 니 다.
이 를 실현 하 는 과정 은 다음 과 같 습 니 다.페이지 를 불 러 올 때 즉시 서버 에 Ajax 요청 을 보 냅 니 다.서버 에서 요청 을 받 고 스 레 드 가 안전 한 용기 에 저장 합 니 다(보통 대기 열 입 니 다).동시에 서버 측은 다른 요청 에 정상적으로 응답 할 수 있 습 니 다.푸 시 할 이벤트 가 왔 을 때 서버 가 용 기 를 옮 겨 다 니 는 요청 은 응답 을 되 돌려 삭제 합 니 다.따라서 페이지 에 머 무 는 모든 브 라 우 저 는 이 응답 을 받 고 Ajax 요청 을 다시 보 내 이 과정 을 반복 합 니 다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<base href="<%=basePath%>">
<head>
<title>WebSocket</title>
<script type="text/javascript" src="static/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
connect();
$("#btn").click(function() {
var value = $("#message").val();
$.ajax({
url : "longpolling?method=onMessage&msg=" + value,
cache : false,
dataType : "text",
success : function(data) {
}
});
});
});
function connect() {
$.ajax({
url : "longpolling?method=onOpen",
cache : false,
dataType : "text",
success : function(data) {
connect();
alert(data);
}
});
}
</script>
</head>
<body>
<h1>LongPolling</h1>
<input type="text" id="message" />
<input type="button" id="btn" value=" " />
</body>
</html>
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Queue;
import java.util.concurrent.ConcurrentLinkedQueue;
import javax.servlet.AsyncContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(value="/longpolling", asyncSupported=true)
public class Comet extends HttpServlet {
private static final Queue<AsyncContext> CONNECTIONS = new ConcurrentLinkedQueue<AsyncContext>();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String method = req.getParameter("method");
if (method.equals("onOpen")) {
onOpen(req, resp);
} else if (method.equals("onMessage")) {
onMessage(req, resp);
}
}
private void onOpen(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
AsyncContext context = req.startAsync();
context.setTimeout(0);
CONNECTIONS.offer(context);
}
private void onMessage(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String msg = req.getParameter("msg");
broadcast(msg);
}
private synchronized void broadcast(String msg) {
for (AsyncContext context : CONNECTIONS) {
HttpServletResponse response = (HttpServletResponse) context.getResponse();
try {
PrintWriter out = response.getWriter();
out.print(msg);
out.flush();
out.close();
context.complete();
CONNECTIONS.remove(context);
} catch (IOException e) {
e.printStackTrace();
}
}
}
} 2.WebSocket(HTML 5 지원)
HTTP 장 폴 링 을 사용 하 는 Comet 은 현재 모든 브 라 우 저 에서 이 방면 의 지원 을 제공 하고 있 기 때문에 신뢰 할 수 있 는 역방향 Ajax 를 실현 하 는 가장 좋 은 방법 입 니 다.
WebSockets 는 HTML 5 에 등장 하 며 Comet 보다 업 데 이 트 된 역방향 Ajax 기술 이다.웹 소켓 은 양 방향,양 방향 통신 채널 을 지원 하고 많은 브 라 우 저(Firefox,Google Chrome,Safari)도 지원 합 니 다.연결 은 HTTP 요청(WebSockets 악수 라 고도 함)과 특수 한 헤더(header)를 통 해 이 루어 집 니 다.연결 이 계속 활성 화 된 상태 입 니 다.원본 TCP 소켓 을 사용 하 는 것 처럼 자 바스 크 립 트 로 데 이 터 를 작성 하고 받 을 수 있 습 니 다.
뉴스:/또는 뉴스://(SSL 에서)웹 소켓 URL 을 입력 하여 시작 합 니 다.그림:
우선:웹 소켓 은 모든 브 라 우 저 에서 좋 은 지원 을 받 을 수 있 는 것 이 아니 라 IE 가 또 발목 을 잡 은 것 이 분명 합 니 다.따라서 이 기술 을 사용 하려 면 사용자 의 사용 환경 을 고려 해 야 합 니 다.만약 에 프로젝트 가 인터넷 이나 핸드폰 사용 자 를 대상 으로 한다 면 여러분 께 심사숙고 하 라 고 권 합 니 다.
그 다음:WebSockets 가 제공 하 는 요청 은 일반적인 HTTP 요청 과 구별 되 며,듀 플 렉 스 통신 이 며,항상 활성 상태 에 있 습 니 다(닫 지 않 으 면).이것 은 매번 응답 을 받 은 후에 다시 서버 에 요청 을 보 내지 않 아 도 대량의 자원 을 절약 할 수 있다 는 것 을 의미한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String ws = "ws://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<base href="<%=basePath%>">
<head>
<title>WebSocket</title>
<script type="text/javascript" src="static/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
var websocket = null;
if ("WebSocket" in window){
websocket = new WebSocket("<%=ws%>websocket");
} else {
alert("not support");
}
websocket.onopen = function(evt) {
}
websocket.onmessage = function(evt) {
alert(evt.data);
}
websocket.onclose = function(evt) {
}
$("#btn").click(function() {
var text = $("#message").val();
websocket.send(text);
});
});
</script>
</head>
<body>
<h1>WebSocket</h1>
<input type="text" id="message" />
<input type="button" id="btn" value=" "/>
</body>
</html>
package servlet;
import java.io.IOException;
import java.util.Queue;
import java.util.concurrent.ConcurrentLinkedQueue;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/websocket")
public class WebSocket {
private static final Queue<WebSocket> CONNECTIONS = new ConcurrentLinkedQueue<WebSocket>();
private Session session;
@OnOpen
public void onOpen(Session session) {
this.session = session;
CONNECTIONS.offer(this);
}
@OnMessage
public void onMessage(String message) {
broadcast(message);
}
@OnClose
public void onClose() {
CONNECTIONS.remove(this);
}
private synchronized void broadcast(String msg) {
for (WebSocket point : CONNECTIONS) {
try {
point.session.getBasicRemote().sendText(msg);
} catch (IOException e) {
CONNECTIONS.remove(point);
try {
point.session.close();
} catch (IOException e1) {
}
}
}
}
} 전통 적 인 통신 방안 에서 시스템 A 가 시스템 B 의 정 보 를 필요 로 하면 시스템 B 에 요청 을 보 냅 니 다.시스템 B 는 요청 을 처리 하고 시스템 A 는 응답 을 기다 릴 것 입 니 다.처리 가 완료 되면 응답 을 시스템 A 로 보 냅 니 다.동기 통신 모드 에서 자원 의 사용 효율 이 비교적 낮은 것 은 응답 을 기다 릴 때 처리 시간 을 낭비 하기 때문이다.
비동기 모드 에서 시스템 A 는 시스템 B 에서 얻 고 싶 은 정 보 를 구독 합 니 다.그 다음 에 시스템 A 는 시스템 B 에 게 알림 을 보 낼 수도 있 고 바로 정 보 를 되 돌려 줄 수도 있 으 며 시스템 A 는 다른 업 무 를 처리 할 수 있다.이 절 차 는 선택 할 수 있다.이벤트 드라이버 에 서 는 이 사건 들 이 무엇 인지 모 르 기 때문에 다른 시스템 에 이 벤트 를 보 내 달라 고 요청 할 필요 가 없습니다.시스템 B 가 응답 을 발표 한 후에 시스템 A 는 즉시 이 응답 을 받 을 것 이다.
웹 프레임 워 크 는 과거 에 전통 적 인'요청-응답'모드 에 의존 하 였 으 며,이 모드 는 페이지 를 새로 고 칠 수 있 습 니 다.Ajax,Reverse Ajax,WebSocket 의 등장 에 따라 이 제 는 이벤트 구동 구조의 개념 을 웹 에 쉽게 응용 하여 결합,신축성 과 반응 성(reactivity)등 장점 을 얻 을 수 있 습 니 다.더 좋 은 사용자 체험 도 새로운 상업 계 기 를 가 져 올 것 이다.
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 역방향 Ajax 30 분 빠 른 파악 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
AWS 역방향 신청 절차(rDNS)EC2에서 이메일을 보내고 싶다면 AWS에 신청해야 합니다. 메일 발송 제한 해제 신청 역방향 설정 신청 또한 역방향 설정 신청을 하면 동시에 메일 송신 제한 해제도 되므로 신청은 실질적으로 하나로 문제 없습니다. ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
