html5 websocket_html5 튜토리얼 기술을 사용하여 웹소켓 채팅방 구현

웹소켓이란

WebSocket 프로토콜은 html5에서 도입된 새로운 프로토콜입니다. 그 목적은 브라우저와 서버 간의 전이중 통신을 달성하는 것입니다. 위의 링크를 읽는 학생들은 과거에 낮은 효율성과 높은 소비(폴링 또는 Comet)로 이를 수행하는 방법을 이미 이해했을 것입니다. websocket API에서 브라우저와 서버는 핸드셰이크 작업만 수행하면 됩니다. 브라우저와 서버 사이에 빠른 채널이 형성됩니다. 데이터는 둘 사이에서 직접 전송될 수 있습니다. 동시에 수행하면 두 가지 이점이 있습니다

1. 통신 전송 바이트 감소: 이전에 http를 사용하여 데이터를 전송한 것과 비교하여 websocket은 Baidu에 따르면 추가 정보를 거의 2k
2. 클라이언트가 쿼리할 필요 없이 서버가 클라이언트에 메시지를 적극적으로 푸시할 수 있습니다.

개념과 이점은 인터넷 어디에나 있으므로 간단히 설명하지 않겠습니다. 원칙을 살펴보고 웹 버전의 채팅방 작성을 시작하세요.

악수

TCP 연결의 3방향 핸드셰이크 외에도 웹소켓 프로토콜에서는 클라이언트와 서버가 연결을 설정하기 위해 추가 핸드셰이크가 필요합니다. 최신 버전의 프로토콜에서는 다음과 같습니다.

클라이언트가 서버에 요청을 보냅니다. 요청 보내기

코드 복사코드는 다음과 같습니다:

GET / HTTP/1.1
업그레이드: websocket
연결: 업그레이드
호스트: 127.0.0.1:8080
원본: < a href="http://test.com">http:/ /test.com
Pragma: no-cache
Cache-Control: no-cache
Sec-WebSocket- 키: OtZtd55qBhJF2XLNDRgUMg==
Sec-WebSocket-버전: 13
Sec-WebSocket-Extensions: x-webkit-deflate-frame
사용자 에이전트: Mozilla/5.0(Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36(KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36

서버가 응답합니다

코드 복사코드는 다음과 같습니다.

HTTP/ 1.1 101 전환 프로토콜
업그레이드: websocket
연결: 업그레이드
Sec-WebSocket-Accept: xsOSgr30aKL2GNZKNHKmeT1qYjA=

요청의 "Sec-WebSocket-Key" 무작위인 경우 서버는 이러한 데이터를 사용하여 SHA-1 정보 다이제스트를 구성합니다. "Sec-WebSocket-Key"에 매직 문자열 "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"을 추가합니다. SHA-1 암호화를 사용한 다음 BASE-64 인코딩을 사용하고 결과를 "Sec-WebSocket-Accept" 헤더(Wikipedia에서) 값으로 클라이언트에 반환합니다.

웹소켓 API
핸드셰이크 이후 브라우저와 서버는 연결을 맺고, 둘은 서로 통신할 수 있습니다. websocket의 API는 정말 간단합니다. W3C 정의를 살펴보세요

코드 복사

enum BinaryType { "blob", "arraybuffer" };
[Constructor(DOMString url, option (DOMString 또는 DOMString[]) 프로토콜)]
인터페이스 WebSocket : EventTarget {
읽기 전용 속성 DOMString url;

// 준비 상태
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSING = 2 ;
const unsigned short CLOSED = 3;
읽기 전용 속성 unsigned short ReadyState;
읽기 전용 속성 unsigned long bufferedAmount;

// 네트워킹
속성 EventHandler onopen;
속성 EventHandler onerror;
속성 EventHandler onclose;
읽기 전용 속성 DOMString 확장;
읽기 전용 속성 DOMString 프로토콜;
void close([Clamp] 선택적 서명되지 않은 단축 코드, 선택적 DOMString 이유);

// 메시징
속성 EventHandler onmessage;
속성 BinaryType binaryType;
void send(DOMString 데이터);
void send(Blob 데이터);
void send(ArrayBuffer 데이터);
void send(ArrayBufferView 데이터);


웹소켓 생성

코드 복사코드는 다음과 같습니다.

ws=new WebSocket(address); //ws://127.0.0.1:8080

호출 웹소켓을 생성하기 위해 주소를 전달합니다. 주소 프로토콜은 ws/wss여야 합니다.

소켓을 닫습니다

코드 복사코드는 다음과 같습니다.

ws.close();

웹 서비스를 닫으려면 웹 서비스 인스턴스의 close() 메서드를 호출하세요. 물론 웹 서비스가 닫힌 이유를 설명하는 코드와 문자열을 전달할 수도 있습니다.

여러 콜백 함수 핸들

비동기 실행으로 인해 콜백 함수는 당연히 필수입니다.

onopen: 연결이 생성된 후 호출됩니다.
onmessage: 서버 메시지를 받은 후 호출됩니다. .
onerror: 오류가 발생할 때 호출됩니다.
onclose: 연결을 닫을 때 호출됩니다.

이름을 보면 그 기능을 알 수 있습니다. 각 콜백 함수는 Event 개체를 전달하며 메시지는 event.data를 통해 액세스할 수 있습니다.

API 사용

소켓을 성공적으로 생성한 다음 콜백 함수에 값을 할당할 수 있습니다

코드 복사

코드는 다음과 같습니다. 다음과 같습니다:

ws=new WebSocket(address);
ws.onopen=function(e){
var msg=document.createElement('div');
msg.style.color='#0f0';
msg.innerHTML="서버 > 연결이 열려 있습니다.";
msgContainer.appendChild(msg);
ws.send('{<' 문서 .getElementById('name').value '> }');

이벤트 바인딩을 사용할 수도 있습니다.

복사 code

코드는 다음과 같습니다:

ws=new WebSocket(address);
ws.addEventListener('open',function(e){
var msg=document.createElement('div') ;
msg.style.color='#0f0';
msg.innerHTML="서버 > 연결이 열려 있습니다.";
msgContainer.appendChild (msg);
ws.send('{ <' document.getElementById('name').value '>}');

클라이언트 측 구현
사실 클라이언트 측 구현은 웹소켓과 관련된 몇몇 문장을 제외하면 비교적 간단합니다. 자동 포커스, 키 입력 이벤트 처리, 자동 위치 지정 등 몇 가지 간단한 기능이 있습니다. 메시지박스는 하단에 하나씩 설명하지 않겠습니다