HTML5 웹소켓 전이중 통신 세부 학습 example_html5 튜토리얼 기술

현재 실시간 웹 애플리케이션 구현의 대부분은 폴링 및 기타 서버측 푸시 기술을 중심으로 이루어지며, 그 중 가장 유명한 것은 Comet입니다. Comet 기술을 사용하면 서버가 비동기 방식으로 데이터를 클라이언트에 적극적으로 푸시할 수 있습니다.

폴링을 사용할 때 브라우저는 주기적으로 HTTP 요청을 보내고 즉시 응답을 받습니다. 브라우저는 서버에 요청을 보내고 서버는 이를 일정 시간 동안 열어 두어 시나리오를 해결합니다. 브라우저는 전체 HTTP 요청을 보내지만 서버는 계속 업데이트되고 무기한 열려 있는 열린 응답을 보내고 유지합니다.

위의 세 가지 방법은 실시간 데이터 전송 시 HTTP 요청 및 응답 헤더가 포함되며, 추가적이고 불필요한 헤더 데이터가 다량 포함되어 전송 지연이 발생합니다.

1. HTML5 WebSocket의 해석

1. 웹소켓 핸드셰이크

WebSocket 통신을 설정하기 위해 클라이언트와 서버는 초기 핸드셰이크 중에 HTTP 프로토콜을 WebSocket 프로토콜로 업그레이드합니다. 연결이 설정되면 WebSocket 메시지는 전이중 모드로 클라이언트와 서버 간에 주고받을 수 있습니다.

참고: 네트워크에서 각 메시지는 0x00바이트로 시작하고 0xFF로 끝나며 중간 데이터는 UTF-8 인코딩 형식을 사용합니다.

2. 웹소켓 인터페이스

WebSocket 프로토콜 정의 외에도 JavaScript 애플리케이션용 WebSocket 인터페이스도 정의됩니다.

코드 복사

코드는 다음과 같습니다.

인터페이스 WebSocket{
읽기 전용 속성 DOMString URL;
//준비 상태
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly 속성 unsigned short ReadyState ;
readonly 속성 unsigned short bufferedAmount;
//Network
속성 함수 onopen;
속성 함수 onmessage;
속성 함수 onclose;
boolean send(DOMSString 데이터에서);
void close ();
};
WebSocket은 EventTarget을 구현합니다.

참고: ws:// 및 wss:// 접두사는 각각 WebSocket 연결과 보안 WebSocket 연결을 나타냅니다.

2. HTML5 웹소켓 API

이 섹션에서는 HTML5 WebSocket을 사용하는 방법을 설명합니다

1. 브라우저가 지원하는지 확인하세요

window.WebSocket을 사용하여 브라우저가 이를 지원하는지 확인하세요.

2. API의 기본 사용법

a. WebSocket 객체 생성 및 WebSocket 서버 연결

코드 복사

코드는 다음과 같습니다.

url = "ws:/ /localhost: 8080/echo";
ws = new WebSocket(url);

b. 이벤트 리스너 추가

WebSocket은 비동기 프로그래밍 모델을 따르므로 서버를 적극적으로 폴링하지 않고 이벤트가 발생할 때까지 기다리기만 하면 됩니다. 따라서 이벤트를 수신하려면 콜백 함수를 추가해야 합니다.

WebSocket 객체에는 열기, 닫기, 메시지라는 세 가지 이벤트가 있습니다. open 이벤트는 연결이 설정될 때 발생하고, message 이벤트는 메시지 수신 시 발생하며, close 이벤트는 WebSocket 연결이 종료될 때 발생합니다.

코드 복사

코드는 다음과 같습니다.

ws.onopen = function( ){
log("open");
}
ws.onmessage = function(){
log(e.data);
}
ws.onclose = function( ){
로그("닫음");
}

c. 메시지 보내기

소켓이 열려 있으면(즉, onopen 리스너를 호출한 후와 onclose 리스너를 호출하기 전) send 메서드를 사용하여 메시지를 보낼 수 있습니다.

ws.send("Hello World");

3. HTML5 웹소켓 애플리케이션 예시

이 섹션에서는 앞서 설명한 Geolocation 인터페이스를 결합하여 웹 페이지에서 직접 거리를 계산하는 애플리케이션을 만듭니다.

1. HTML 파일 작성

코드 복사

코드는 다음과 같습니다.

<머리>

HTML5 WebSocket/지리위치 추적기

위치정보:

브라우저가 HTML5 위치정보를 지원하지 않습니다

WebSocket:

브라우저가 HTML5 웹 소켓을 지원하지 않습니다

2. WebSocket 코드 추가

코드 복사

코드는 다음과 같습니다.

함수 loadDemo(){
/ /브라우저가 WebSocket을 지원하는지 확인
if(window.WebSocket){
url = "ws://localhost:8080";//broadcast WebSocket 서버 위치
ws = new WebSocket(url );
ws.onopen = function(){
updateSocketStatus("연결이 설정됨");
}
ws.onmessage = function(e){
updateSocketeStatus("위치 데이터 업데이트: " dataReturned( e.data));
}
}
}

3. 위치정보 코드 추가

코드 복사

코드는 다음과 같습니다.

var geo;
if(navigator .geolocation){
geo = navigator.geolocation;
updateGeolocationStatus("브라우저는 HTML5 Geolocation을 지원합니다.");
}

geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//20초마다 업데이트

function updateLocation(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var timestamp = position.timestamp;
updateGeolocationStatus(" 위치 업데이트 시간: " timestamp);
var toSend = JSON.stringify([myId,latitude,longitude]);
sendMyLocation(toSend);
}

4. 모든 콘텐츠 병합

코드 복사

코드는 다음과 같습니다.

HTML5 WebSocket / Geolocation 追踪器

Geolocation:

你的浏览器不支持HTML5 Geolocation

WebSocket:

你的浏览器不支持HTML5 Web Sockets

<스크립트>

//웹소켓 참조>

//이 세션에 대해 생성된 고유한 무작위 ID

var myId = Math.floor(100000*Math.random());

//현재 표시된 행 수

var rowCount;

함수 updateSocketStatus(메시지){

document.getElementById("socketStatus").innerHTML = 메시지;

}

함수 updateGeolocationStatus(메시지){

document.getElementById("geoStatus").innerHTML = 메시지;

}

함수 loadDemo(){

//브라우저가 WebSocket을 지원하는지 확인하세요

if(window.WebSocket){

url = "ws://localhost:8080";//웹소켓 서버 위치 브로드캐스트

ws = 새로운 WebSocket(url);

ws.onopen = 함수(){

updateSocketStatus("연결이 설정되었습니다.");

}

ws.onmessage = 함수(e){

updateSocketStatus("위치 데이터 업데이트:" dataReturned(e.data));

}

}

var geo;

if(navigator.geolocation){

지리 = navigator.geolocation;

updateGeolocationStatus("브라우저는 HTML5 위치정보를 지원합니다.");

}

geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//20초마다 업데이트

함수 업데이트 위치(위치){

var 위도 = position.coords.latitude;

var 경도 = position.coords.longitude;

var 타임스탬프 = position.timestamp;

updateGeolocationStatus("위치 업데이트 시간: " timestamp);

var toSend = JSON.stringify([myId,latitude,longitude]);

내 위치 보내기(보내기);

}

함수 sendMyLocation(newLocation){

if(ws){

ws.send(newLocation)

}

}

함수 데이터 반환(locationData){

var allData = JSON.parse(locationData);

var 수신 ID = allData[1];

var receivedLat = allData[2];

var receivedLong = allData[3];

var receivedRow = document.getElementById(incomingId);

if(!incomingRow){

incomingRow = document.getElementById("div");

incomingRow.setAttribute("id",incomingId);

incomingRow.userText = (incomingId == myId)?"Me":'User' rowCount;

document.body.appendChild(incomingRow);

}

수신Row.innerHTML = 수신Row.userText " \ Lat: "

수신 Lat " \ Lon: "

incomingLong;

receiveRow.userText;

}

함수 핸들 위치 오류(오류){

스위치(error.code){

사례 0:

updateGeolocationStatus("위치 정보 검색 중 오류 발생: " error.message);

break;

사례 1:

updateGeolocationStatus("사용자가 위치 정보에 대한 접근을 차단했습니다.");

break;

사례 2:

updateGeolocationStatus("브라우저가 위치 정보를 감지할 수 없습니다: " error.message);

break;

사례 3:

updateGeolocationStatus("위치 정보를 검색하는 동안 브라우저 시간이 초과되었습니다.");

break;

}
}