최고의 HTML5 웹 소켓 튜토리얼 2024년, 이 튜토리얼에서는 웹 소켓 속성,웹 소켓 이벤트,웹 소켓 방법,웹 소켓 인스턴스,설치 pywebsocket,를 배울 수 있습니다.
HTML5 웹 소켓은 단일 TCP 연결 프로토콜을 통해 전이중 (full-duplex) 통신에 의해 제공되는 시작이다.
웹 소켓 API에있어서, 브라우저와 서버는 브라우저와 패스트 트랙의 형성에 서버 사이 그리고, 핸드 쉐이크 동작을 수행한다. 당신은 서로간에 직접 데이터를 전송할 수 있습니다.
브라우저가 웹 소켓 연결을 자바 스크립트 요청을 통해 서버에 전송하고 연결이 설정된 클라이언트와 서버는 TCP를 통해 데이터를 교환하는 데에 직접 연결될 수있다.
웹 소켓 연결을 얻을 때, 당신은송신 () 메소드를 통해 서버에 데이터를 보낼 수 있고,의 onMessage이벤트 서버에 의해 반환 된 데이터를 수신 할 수 있습니다.
다음 웹 소켓 API는 객체를 생성하는 데 사용됩니다.
var Socket = new WebSocket(url, [protocal] );
위의 코드 첫 번째 매개 변수의 URL은 URL 연결을 지정합니다. 두 번째 매개 변수는 허용 서브 프로토콜을 지정 옵션 프로토콜입니다.
이러한 속성의 웹 소켓 객체입니다. 우리는 소켓 객체를 생성하는 위의 코드를 사용한다고 가정
재산 | 기술 |
---|---|
Socket.readyState | 읽기 전용readyState의 연결 상태는 다음과 같은 값을 가질 수 있습니다 나타냅니다 속성 :
|
Socket.bufferedAmount | 읽기 전용 전송 대기 큐에 배치됩니다 ()bufferedAmount 전송 된 속성,하지만 아직 UTF-8 텍스트 바이트를 발행하지 않았습니다. |
다음은 이벤트 웹 소켓 객체입니다. 우리는 소켓 객체를 생성하는 위의 코드를 사용한다고 가정
행사 | 이벤트 핸들러 | 기술 |
---|---|---|
열린 | Socket.onopen | 연결이 설정 될 때 트리거 |
메시지 | Socket.onmessage | 클라이언트는 트리거 서버 데이터를 수신하면 |
오류 | Socket.onerror | 오류가 통신을 발생 때 트리거됩니다 |
가까운 | Socket.onclose | 연결이 종료 될 때 트리거 |
여기에 방법의 웹 소켓 객체입니다. 우리는 소켓 객체를 생성하는 위의 코드를 사용한다고 가정
방법 | 기술 |
---|---|
Socket.send () | 데이터를 전송하기 위해 연결을 사용 |
Socket.close () | 닫기 연결 |
자연 웹 소켓 프로토콜은 TCP 기반의 프로토콜이다.
이것은 애플리케이션 프로토콜임을 나타내는하십시오 웹 소켓 연결을 구축하기 위해 클라이언트 브라우저에서 추가 헤더 정보 "웹 소켓 업그레이드"는 상기 HTTP 서버가 먼저 요청 일반적인 HTTP 요청은 추가적인 헤더 정보를 포함하도록 요청하고자 개시 HTTP 요청을 업그레이드 서버는 추가적인 헤더 정보는 다시 클라이언트, 웹 소켓 연결 클라이언트에게 응답 메시지를 생성하고 서버가 설정된 파싱 양측 수있는 정보의 연결 채널없는 전송하고,이 연결을 통해 이 연결을 종료하기 위해 클라이언트 또는 서버 측 활성 자까지 지속됩니다.
크롬, 모질라, 오페라와 사파리 : 현재, 대부분의 브라우저는 웹 소켓 () 인터페이스를 지원, 다음과 같은 브라우저의 예제를 시도 할 수 있습니다.
w3big_websocket 파일 내용
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>本教程(w3write.com)</title> <script type="text/javascript"> function WebSocketTest() { if ("WebSocket" in window) { alert("您的浏览器支持 WebSocket!"); // 打开一个 web socket var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { // Web Socket 已连接上,使用 send() 方法发送数据 ws.send("发送数据"); alert("数据发送中ko."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("数据已接收ko."); }; ws.onclose = function() { // 关闭 websocket alert("连接已关闭ko."); }; } else { // 浏览器不支持 WebSocket alert("您的浏览器不支持 WebSocket!"); } } </script> </head> <body> <div id="sse"> <a href="javascript:WebSocketTest()">运行 WebSocket</a> </div> </body> </html>
위의 프로그램을 실행하기 전에, 우리는 지원 웹 소켓 서비스를 만들어야합니다. 에서 pywebsocket의 다운로드 다운로드 mod_pywebsocket 또는 사용의 자식 명령
git clone https://github.com/google/pywebsocket.git
mod_pywebsocket 지원이 필요 파이썬 환경
다음과 같이 아파치 HTTP 웹 소켓 확장 mod_pywebsocket, 설치 단계는 다음과 같습니다다운로드 한 파일의 압축을 풉니 다.
pywebsocket 디렉토리를 입력합니다.
실행
$ python setup.py build $ sudo python setup.py install
설명서를 참조하십시오 :
$ pydoc mod_pywebsocket
pywebsocket / mod_pywebsocket 디렉토리에서 다음 명령을 실행합니다 :
$ sudo python standalone.py -p 9998 -w ko/example/
위의 명령은, 서비스 포트 번호 9998을 열 수있는 디렉토리 핸들러 echo_wsh.py을 설정 -w를 사용합니다.
이제 우리는 이전에 크롬 브라우저에 생성 w3big_websocket 파일을 열 수 있습니다. 브라우저가 웹 소켓 ()를 지원하는 경우 "실행 웹 소켓은"당신이 전체 과정을 팝업 창, 프로세스 지프 데모의 각 단계를 볼 수 있습니다 클릭 :
우리가 서비스를 중지하면, 그것은 "연결이 닫혀 koko"나타납니다