WebJX 기사 소개 : HTML5의 멋진 새로운 기능은 WebSockets로 AJAX 요청없이 서버와 대화 할 수 있습니다. 오늘날 Bingo는 모든 사람이 PHP 환경의 서버 측면을 통해 WebSocket을 실행하고 클라이언트를 생성하며 WebSockets 프로토콜을 통해 서버 측 정보를 보내고받을 수 있도록합니다. Websockets 란 무엇입니까? Websockets는 (TCP) 인터페이스에서 양방향입니다
HTML5의 멋진 새로운 기능은 WebSockets로 AJAX 요청없이 서버와 대화 할 수 있습니다. 오늘날 Bingo는 모든 사람이 PHP 환경의 서버 측면을 통해 WebSocket을 실행하고 클라이언트를 생성하며 WebSockets 프로토콜을 통해 서버 측 정보를 보내고받을 수 있도록합니다.
Websockets 란 무엇입니까?
Websockets는 (TCP) 인터페이스에서 양방향 통신과 푸시 기술 유형을 수행하는 기술입니다. 동시에 WebSockets는 여전히 W3C 표준을 기반으로합니다. 지금까지 최신 버전의 Chrome 및 Safari 브라우저는 이미 Websockets를 지원했습니다.
Websockets는 무엇을 교체합니까?
Websockets는 긴 폴링 (PHP 서버 푸시 기술)을 대체 할 수 있으며 이는 흥미로운 개념입니다. 클라이언트는 요청을 서버로 보냅니다. 이제 서버는 준비되지 않은 데이터에 응답하지 않습니다. 최신 데이터를 보낼 준비가 될 때까지 연결을 열어줍니다. 그 후 클라이언트는 데이터를 수신 한 다음 다른 요청을 보냅니다. 이점은 이점이 있습니다. 연결에서의 대기 시간을 줄이고 한 연결이 이미 열려있을 때 새로운 연결을 생성 할 필요가 없습니다. 그러나 긴 폴링은 멋진 기술이 아니며 요청 일시 중지가 발생할 수 있으므로 새로운 연결이 필요할 수 있습니다.
일부 AJAX 응용 프로그램은 위에서 언급 한 기술을 사용합니다.이 기술은 종종 자원 활용이 낮기 때문입니다.
서버가 시작하여 일부 연결 포트를 미리 설정하지 않고 수신하고자하는 클라이언트에게 데이터를 보내는 경우 얼마나 큰지 상상해보십시오! 푸시 기술의 세계에 오신 것을 환영합니다!
1 단계 : WebSocket 서버를 가져옵니다
이 튜토리얼은 서버 실행보다는 클라이언트 생성에 더 중점을 둘 것입니다.
Windows 7을 기반으로 XAMPP를 사용하여 PHP 실행을 로컬로 구현합니다. Phpwebsockets는 PHP WebSocket 서버입니다. (내 경험상,이 버전에는 약간의 문제가 있습니다. 나는 그것에 대해 약간의 수정을하고 소스 파일을 업로드하여 공유했습니다.) 다음 버전도 WebSocket을 구현할 수도 있습니다. 사용할 수없는 경우 다른 버전을 시도하거나 다음 튜토리얼을 계속 읽을 수 있습니다.
Jwebsocket (Java)
웹 소켓 루비 (루비)
소켓 IO- 노드 (node.js)
Apache 서버를 시작하십시오
2 단계 : URL 및 포트 수정
이전 설치에 따르면 서버를 수정하십시오. 다음은 setup.class.php의 예입니다.
}
파일을 탐색하고 적절한 경우 변경하십시오.
3 단계 : 클라이언트 생성을 시작합니다
다음은 내 Client.php 파일입니다.
> <>
>
>
>
> 예 : 'hi', 'name', 'age', 'today'>
> 분리 >>
</html>
기본 템플릿 : 채팅 로그 컨테이너, 입력 입력 상자 및 연결 해제 버튼을 만들었습니다.
4 단계 : CSS를 추가하십시오
멋진 코드는 없으며 태그의 스타일을 다루십시오.
몸
회색
}
5 단계 : WebSocket 이벤트
먼저 WebSocket 이벤트의 개념을 이해하고 이해합시다.
WebSocket 이벤트 :
우리는 세 가지 WebSocket 이벤트를 사용합니다.
ONOPEN : 인터페이스가 열릴 때
OnMessage : 메시지가 수신 된 경우
Onclose : 인터페이스가 닫힐 때
우리는 이것을 어떻게 달성합니까?
먼저 WebSocket 객체를 만듭니다
그런 다음 다음과 같이 이벤트를 감지하십시오
소켓.
}
메시지를받을 때 다음을 수행하십시오.
socket.msgmsg); //엄청난!
}
그러나 우리는 여전히 경고를 사용하지 않으려 고 노력하고 있으며 이제 배운 내용을 클라이언트 페이지에 통합 할 수 있습니다.
6 단계 : JavaScript
먼저 코드를 문서에 넣은 다음 jQuery의 기능을 사용한 다음 사용자의 브라우저가 WebSocket을 지원하는지 확인해야합니다. 지원되지 않으면 Chrome 브라우저 페이지에 링크를 추가합니다.
$
창문
$.
$.
보시다시피, 사용자의 브라우저가 WebSocket을 지원하면 Connect () 함수를 실행합니다. 핵심 기능은 다음과 같습니다. 우리는 개방, 닫기 및 수신 이벤트를 만들기 시작합니다.
서버에서 URL을 정의합니다.
URL에 HTTP가없는 이유를 알 수 있습니까? 그렇습니다. 이것은 다른 프로토콜을 사용하는 WebSocket URL입니다. URL 고장 다이어그램은 다음과 같습니다.