ajax 와 websocket 의 차이 및 websocket 상용 사용 방식 소개

필 자 는 최근 에 회사 의 프로젝트 에서 비교적 고 급 스 러 운 업무 논리 처 리 를 점점 접 하 게 되 었 는데 그 중에서 비교적 재 미 있 는 부분 은 바로 전단 에서 백 스테이지 가 주 는 푸 시 문 제 를 받 는 것 이다.
일반적으로 전단 과 백 엔 드 의 상호작용 은 주로 ajax 를 사용 하여 비동기 조작 호출 상호작용 을 하 는데 비교적 재 미 있 는 것 은 이런 상호작용 방식 은 보통 단일 항목 의 상호작용 이다.
-그리고 전단 이 백 엔 드 에 요청 을 보 내 고 백 엔 드 가 요청 을 받 은 후에 작업 을 수행 합 니 다.전단 이 백 엔 드 가 주 는 반환 값 을 받 아들 일 수 있 더 라 도 백 엔 드 와 상호작용 하 는 주동 권 은 항상 전단 손 에 있 습 니 다.
그러면 두 가지 재 미 있 는 문제 가 생 길 거 예요.
1.전단 에서 호출 된 인터페이스 백 엔 드 작업 이벤트 가 너무 길 면 되 돌아 오 는 작업 응답 시간 이 너무 길 어 질 수 있 습 니 다.이때 사용자 가 다른 페이지 를 클릭 하면 되 돌아 오 는 작업 이 정상적으로 해결 되 지 않 습 니 다.
2.백 엔 드 에 중요 한 문제 가 있 으 면 전단 에 메 시 지 를 보 내야 합 니 다.이 럴 때 전단 은 받 을 수 없습니다.
이 두 가지 문제 에 직면 한 주류 해결 방법 은 첫 번 째 로 우 리 는 전체 페이지 에 불 러 오 는 애니메이션 을 만 들 고 전체 페이지 를 잠 그 며 사용자 에 게 전체 백 엔 드 반환 값 이 끝 날 때 까지 기다 리 도록 강요 하 는 것 이다.
두 번 째 점 에 대해 우 리 는 오늘 우리 가 말 한 웹 소켓 이라는 개념 을 도입 해 야 한다.
웹 소켓
웹 소켓 협 의 는 2008 년 에 탄생 하여 2011 년 에 국제 표준 이 되 었 다.모든 브 라 우 저가 지원 되 었 습 니 다.
그의 가장 큰 특징 은 서버 가 자발적으로 클 라 이언 트 에 게 정 보 를 전달 할 수 있 고 클 라 이언 트 도 자발적으로 서버 에 정 보 를 보 낼 수 있 으 며 진정한 양 방향 평등 대화 로 서버 푸 시 기술 의 하나 에 속한다.
그 는 일반적인 ajax 와 가장 큰 차이 점 은 양 방향 으로 받 아들 이 고 보 낼 수 있다 는 것 이다.
1.websocket 의 간단 한 사용
우리 전단 에 있어 서 웹 소켓 의 사용 방식 은 매우 간단 합 니 다.프로 토 콜 식별 자 는 ws(암호 화 되면 ws)이 고 서버 주 소 는 URL 입 니 다.저 희 는 뉴스 서 비 스 를 스스로 정의 하면 됩 니 다.
코드 는 다음 과 같다.

var ws = new WebSocket("URL  ");
ws.onopen = function(evt) { 
 console.log("    "); 
 ws.send("Hello WORD!");
};
ws.onmessage = function(evt) {
 console.log( "Received Message: " + evt.data);
 ws.close();
};
ws.onclose = function(evt) {
 console.log("    ");
};  

상기 코드 에서 보 듯 이 우 리 는 WS 라 는 간단 한 웹 소켓 서 비 스 를 성공 적 으로 만 들 었 고 배경 에서 정의 하고 싶 은 경로 에서 hello word 메 시 지 를 보 냈 으 며 푸 시 를 받 을 때 Received Message 를 인쇄 합 니 다.
ws 서비스 가 열 리 면 전단 에 계속 걸 려 있 는 상태 입 니 다.현재 프레임 워 크 가 횡행 하고 있 기 때문에 프레임 워 크 나 전단 프로젝트 가 node 로 컴 파일 되 거나 실 행 될 때 ws 서 비 스 를 모든 페이지 의 템 플 릿 에 쓰 면 프로젝트 가 열 린 상태 에서 계속 실 행 될 수 있 습 니 다.
이 럴 때 푸 시 메 시 지 를 받 아들 여야 합 니 다.백 엔 드 에서 메 시 지 를 보 내 는 유형 을 판단 하고 해당 하 는 조작 을 해 야 합 니 다.ajax 비동기 작업 이 반환 값 을 기다 리 거나 반환 값 을 기다 린 후에 자신 이 너무 오래 조작 하여 사용자 로 하여 금 너무 오래 기다 리 게 하 는 고민 이 전혀 필요 하지 않 습 니 다.이 기술 은 지금도 보편적으로 사용 되 고 있다.
온라인 채 팅 방과 푸 시 알림 을 받 아야 할 곳.
그러나 주의해 야 할 것 은 일반적인 상황 에서 추 송 량 이 비교적 많 으 면 회 사 는 비교적 큰 클 라 우 드 서 비 스 를 선택 할 것 이다.예 를 들 어 필자 의 회 사 는 클 라 우 드 서 비 스 를 이용 하여 하 는 것 이다.필자 가 시간 이 있 으 면 클 라 우 드 서 비 스 를 융합 시 키 는 과정 을 전문 적 으로 설명 할 것 이다.
총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 ajax 와 websocket 의 차이 점 과 websocket 이 자주 사용 하 는 방식 에 대한 소개 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다!