HTML5의 WebSocket 및 서버 푸시 events_html5 튜토리얼 기술에 대한 간략한 분석-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5의 WebSocket 및 서버 푸시 events_html5 튜토리얼 기술에 대한 간략한 분석

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:45 PM

html5 websocket

웹소켓

웹 소켓은 단일 소켓에서 실행되는 웹 애플리케이션을 위한 차세대 양방향 통신 기술로, JavaScript 인터페이스를 통해 HTML5 호환 브라우저에 노출됩니다.

웹 서버에서 웹 소켓 연결을 얻은 후에는 send() 메서드를 호출하여 브라우저에서 서버로 데이터를 보낼 수 있고, onmessage 이벤트 핸들러를 통해 서버에서 브라우저로 데이터를 받을 수 있습니다.

다음은 새로운 WebSocket 객체를 생성하기 위한 API입니다.

JavaScript 코드클립보드에 콘텐츠 복사

var 소켓 = new WebSocket(url, [protocal] )

첫 번째 매개변수 url은 연결할 URL을 지정하는 데 사용됩니다. 두 번째 속성인 포트는 선택 사항이며, 제공되는 경우 성공적인 연결을 위해 서버가 지원해야 하는 하위 프로토콜을 지정합니다.

WebSocket 속성
다음은 WebSocket 객체의 속성입니다. 위의 소켓 개체를 생성했다고 가정합니다.

속성 설명 소켓.준비상태

属性	描述
Socket.readyState	只读属性readyState表示连接的状态。有以下取值： 0 表示连接尚未建立。 1 表示连接已建立，可以进行通信。 2 表示连接正在进行关闭握手。 3 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount	只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。

属性

描述

Socket.readyState

只读属性readyState表示连接的状态。有以下取值：

0 表示连接尚未建立。
1 表示连接已建立，可以进行通信。
2 表示连接正在进行关闭握手。
3 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。

읽기 전용 속성
readyState은 연결 상태를 나타냅니다. 값은 다음과 같습니다:
0은 아직 연결이 설정되지 않았음을 의미합니다.

事件	事件处理程序	描述
open	Socket.onopen	建立 socket 连接时触发这个事件。
message	Socket.onmessage	客户端从服务器接收数据时触发。
error	Socket.onerror	连接发生错误时触发。
close	Socket.onclose	连接被关闭时触发。

1은 연결이 설정되어 통신이 가능함을 의미합니다.
2는 연결이 종료 핸드셰이크를 진행 중임을 나타냅니다.

方法	描述
Socket.send()	send(data) 方法使用连接传输数据。
Socket.close()	close() 方法用于终止任何现有连接。

3은 연결이 닫혔거나 연결을 열 수 없음을 의미합니다. Socket.bufferedAmount 읽기 전용 속성bufferedAmountsend() 메서드를 사용하여 대기열에 추가된 URF-8 텍스트 바이트 수를 나타냅니다. WebSocket 이벤트 다음은 WebSocket 개체와 관련된 이벤트입니다. 위의 Socket 개체를 생성했다고 가정합니다. WebSocket 메소드 WebSocket 객체와 관련된 메소드는 다음과 같습니다. 위의 Socket 개체를 생성했다고 가정합니다. 방법 설명 Socket.send() send(data) 메소드는 연결을 사용하여 데이터를 전송합니다. Socket.close() close() 메소드는 기존 연결을 종료하는 데 사용됩니다.

서버 푸시 이벤트
기존 웹 애플리케이션은 웹 서버 측으로 전송되는 이벤트를 생성합니다. 예를 들어 링크를 클릭하면 서버에 새 페이지가 요청됩니다.

웹 브라우저에서 웹 서버까지의 이러한 시간을 클라이언트측 이벤트라고 부를 수 있습니다.

HTML5의 출현과 함께 WHATWG 웹 애플리케이션 1.0에서는 SSE(Server Push Events)라는 웹 서버에서 웹 브라우저로의 이벤트 스트림을 도입했습니다. SSE를 사용하여 DOM 이벤트를 사용자 브라우저에 지속적으로 푸시합니다.

이 이벤트 스트리밍 방법은 서버에 대한 지속적인 연결을 열고 새 메시지가 있을 때 클라이언트에 데이터를 전송하므로 지속적인 폴링이 필요하지 않습니다.

SSE 웹 애플리케이션
웹 애플리케이션에서 서버 푸시 이벤트를 사용하려면 문서에 요소를 추가해야 합니다.

요소의 src 속성은 이벤트가 포함된 데이터 스트림을 보내기 위해 HTTP 영구 연결을 제공해야 하는 URL을 가리켜야 합니다.

이 URL은 지속적으로 이벤트 데이터를 보내는 PHP, PERL 또는 Python 스크립트를 가리킵니다. 다음은 서버 시간을 예상하는 웹 애플리케이션의 간단한 예입니다.

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html>
<머리>
<스크립트 유형="text/ javascript">
/* 여기에 이벤트 처리 논리를 정의하세요 */
스크립트>
머리>
<몸>
<div id="sse" >
<이벤트 소스 src="/cgi -bin/ticker.cgi" />
div>
<div id="ticker" >
<시간>
div>
몸>
html>

SSE 서버측 스크립트
서버측 스크립트는 아래와 같이 유형을 text/event-stream으로 지정하는 Content-type 헤더를 보내야 합니다.

코드 복사

코드는 다음과 같습니다.

print "Content-Type: text/event -streamnn" ;

Content-type을 설정한 후 서버측 스크립트는 Event: 태그와 이벤트 이름을 전송합니다. 다음 예에서는 개행 문자로 끝나는 서버 시간을 이벤트 이름으로 보냅니다.

코드 복사

코드는 다음과 같습니다.

print "Event: server-timen";

마지막 단계는 다음과 같이 Data: 태그와 개행 문자로 끝나는 정수 문자열 값을 사용하여 이벤트 데이터를 보내는 것입니다.

코드 복사

코드는 다음과 같습니다.

$time = localtime();
print " Data: $timen";

다음은 Perl로 작성된 완전한 ticket.cgi입니다:

코드 복사

코드는 다음과 같습니다.

#!/usr/bin /perl
print "Content-Type: text/event-streamnn";
while(true){
print "Event: server-timen";
$time = localtime();
인쇄 " 데이터: $timen";
sleep(5);

서버 푸시 이벤트 처리
서버 푸시 이벤트를 처리하도록 웹 애플리케이션을 수정해 보겠습니다. 마지막 예는 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사