html5는 WebSocket을 포함한 많은 새로운 API를 소개합니다. WebSocket을 통해 개발자는 브라우저와 서버간에 소켓 연결을 설정하여 강력한 실시간 응용 프로그램을 만들 수 있습니다. 다시 말해, 지속적인 연결이 존재하기 때문에 클라이언트와 서버는 언제든지 데이터를 교환 할 수 있습니다. 이 자습서는 WebSocket을 사용하여 실시간 웹 응용 프로그램을 만드는 방법을 설명합니다.
키 포인트
HTML5에 도입 된 WebSocket API를 통해 개발자는 브라우저와 서버간에 지속적인 소켓 연결을 설정하여 클라이언트와 서버가 언제든지 데이터를 교환 할 수있게함으로써 실시간 응용 프로그램을 만들 수 있습니다.
WebSocket 연결을 열는 것은 매우 간단합니다. WebSocket () 생성자 만 호출하면됩니다. 클라이언트 또는 서버가 클라이언트를 닫을 때까지 연결이 열려있어 서버의 부담이 줄어들고 긴장이 적은 애플리케이션을위한 최상의 솔루션을 제공합니다.
이진 데이터는 Connection.Send () 메소드를 사용하여 Blob 또는 ArrayBuffer 형태로 전송 및 수신 할 수 있습니다. 수신 된 메시지는 또한 문자열 또는 이진 데이터 일 수 있으며, Blob 또는 Arraybuffer의 형태로 수신 할 수 있습니다.
WebSocket을 사용하여 실시간 애플리케이션을 구축하려면 서버 측 구현이 필요하며 다양한 기술 (예 : Node.js, Java, .NET, Ruby 또는 C)을 사용하여 수행 할 수 있습니다. WebSocket API는 실시간 소셜 업데이트, HTML5 멀티 플레이어 게임 및 온라인 채팅 애플리케이션과 같은 강력한 실시간 응용 프로그램을 만드는 데 사용될 수 있습니다.
-
질문 -
실시간 응용 프로그램에서 서버와 클라이언트 간의 연결은 지속적이어야합니다. 따라서 서버가 전송을 시작한다는 환상을 만들려면 일반적으로 긴 폴링이 사용됩니다. WebSocket은 클라이언트와 서버간에 지속적인 소켓 연결을 설정 하여이 문제를 해결합니다. 연결이 설정되면 클라이언트 또는 서버가 닫으려고 할 때까지 계속 열려 있습니다. 서버의 부담을 크게 줄이고 낮은 장기 애플리케이션에 가장 적합합니다.
초보자 -
WebSocket 연결을 열는 것은 매우 쉽습니다. 연결을 생성하려면 WebSocket () 생성자를 호출하면됩니다. -
var connection = new WebSocket("ws://localhost:8787", ['soap', 'json']);
연결이 열린 후 브라우저는 Connection.Send ()를 사용하여 서버로 메시지를 보냅니다. 오류가 발생하면 위의 코드는 간단히 기록합니다. 서버가 언제든지 브라우저에 메시지를 보내면 OnMessage 콜백이 트리거됩니다. 이벤트 핸들러는 데이터 속성에 수신 메시지가 포함 된 이벤트 객체를 얻습니다. Connection.Send () 메소드를 사용하여 이진 데이터를 보내도록 할 수도 있습니다. 이렇게하려면 Blob 또는 Arraybuffer를 사용할 수 있습니다. 다음 코드는 Arraybuffer를 사용하여 캔버스에 그린 이미지를 서버로 보내는 방법을 보여줍니다.
마찬가지로, 수신 된 메시지는 문자열 또는 이진 데이터 일 수 있습니다. 이진 데이터는 Blob 또는 Arraybuffer로 수신 될 수 있습니다. <code class="language-javascript">var connection = new WebSocket("ws://localhost:8787", 'json');
connection.onopen = function() {
connection.send('Hello, Server!!'); // 连接打开后向服务器发送消息。
};
connection.onerror = function(error) {
console.log('Error Logged: ' + error); // 记录错误
};
connection.onmessage = function(e) {
console.log('Received From Server: ' + e.data); // 记录接收到的消息
};</code>
간단한 WebSocket 응용 프로그램
실행 가능한 응용 프로그램을 만들려면 서버 측 구현도 필요합니다. node.js, java, .net, ruby 또는 c를 사용하여 서버 측 구현을 만들 수 있습니다. 이 섹션에서는 WebSocket을 사용하여 간단한 응용 프로그램을 만드는 방법을 보여줍니다. 샘플 응용 프로그램을 통해 사용자는 서버에 특정 질문을 할 수 있습니다. 서버 측 구현은 Windows 7의 Java Jwebsocket 프레임 워크를 사용하여 수행됩니다. 따라서 환경을 설정하려면 간단한 단계를 따르십시오. Windows 7 PC에 최신 JDK (JDK 7)를 설치했다고 가정합니다.
1 단계
Jwebsocket 다운로드 페이지로 이동하여 서버로 표시된 첫 번째 zip 파일을 다운로드하십시오.
2 단계
아카이브를 압축하고 C : 어딘가에 배치하십시오. 그런 다음 jwebsocket 설치의 루트 디렉토리를 참조하는 jwebsocket_home이라는 새로운 환경 변수를 만듭니다. 이것이 Jwebsocket-1.0 폴더의 경로입니다. 다음 항아리를 클래스 경로에 추가하십시오 :
3 단계
새 Java 소스 파일을 생성하고 이름 It SocketListener.java. 이 파일에 다음 코드를 추가하십시오. (Java 코드 부분은 여기에서 너무 길고 의사 원리 목표와 일치하지 않기 때문에 여기에서 생략됩니다. 따라서 핵심 논리적 설명을 유지하십시오) .
4 단계
SocketListener.java를 컴파일하고 명령 Java SocketListener를 사용하여 서버를 시작하십시오.
5 단계
이제 서버 측 구현을 완료 했으므로 이제 서버와 상호 작용할 클라이언트를 만들 시간입니다. (HTML 및 JavaScript 코드 부품은 여기에서 너무 길고 의사 원리 목표와 일치하지 않기 때문에 핵심 논리적 설명을 유지할 수 있기 때문에 여기에서 생략됩니다.
결론 -
WebSocket API를 사용하면 매우 강력한 실시간 응용 프로그램을 만들 수 있습니다. 그러나 WebSocket을 사용하면 도메인 크로스 커뮤니케이션이 가능합니다. 따라서 신뢰할 수있는 서버 및 클라이언트 와만 통신해야합니다. 이 API를 사용하여 만들 수있는 몇 가지 샘플 응용 프로그램은 다음과 같습니다.
실시간 소셜 업데이트 -
html5 멀티 플레이어 게임
온라인 채팅 앱
WebSocket API에 대한 자세한 내용은 Mozilla 개발자 네트워크를 확인하십시오. (기사가 너무 길고 의사 원리 목표와 일치하지 않기 때문에 FAQ 부분은 여기서 생략됩니다. 핵심 논리적 설명을 유지하십시오) - .
위 내용은 HTML5 WebSockets API 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
