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 서버입니다. (내 경험상,이 버전에는 약간의 문제가 있습니다. 몇 가지 수정을하고 소스 파일을 업로드하여 다음 버전을 사용할 수 없으면 시도 할 수 있습니다 다른 버전 또는 아래 튜토리얼을 읽습니다.
Jwebsocket (Java)
웹 소켓 루비 (루비)
소켓 IO- 노드 (node.js)
Apache 서버를 시작하십시오
2 단계 : URL 및 포트 수정
이전 설치에 따르면 서버를 수정하십시오. 다음은 setup.class.php의 예입니다.
| public function __construct ($ host = 'localhost', $ port = 8000, $ max = 100) { $ this-> CreateSocket ($ host, $ port); } |
파일을 탐색하고 적절한 경우 변경하십시오.
3 단계 : 클라이언트 생성을 시작합니다
다음은 내 Client.php 파일입니다.
| <! doctype html> <html> <헤드> <스크립트 src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </스크립트> <title> Websockets 클라이언트 </title> </head> <body> <div id = "래퍼"> <div id = "컨테이너"> <H1> WebSockets 클라이언트 </h1> <div id = "chatlog"> </div> <!-#ChatLog-> <p id = "examples"> 예 : 'hi', 'name', 'age', 'today'</p> <input id = "text"type = "text" /> <버튼 id = "분리"> 분리 </button> </div> <!-#container-> </div> </body> </html> |
기본 템플릿 : 채팅 로그 컨테이너, 입력 입력 상자 및 연결 해제 버튼을 만들었습니다.
4 단계 : CSS를 추가하십시오
멋진 코드는 없으며 태그의 스타일을 다루십시오.
몸 { |
5 단계 : WebSocket
이벤트는 먼저 WebSocket 이벤트의 개념을 시도하고 이해해 드리겠습니다.
WebSocket 이벤트 :
우리는 세 가지 WebSocket 이벤트를 사용합니다.
ONOPEN : 인터페이스가 열릴 때
OnMessage : 메시지가 수신 된 경우
Onclose : 인터페이스가 닫힐 때
우리는 이것을 어떻게 달성합니까?
먼저 WebSocket 객체를 만듭니다
var Socket = New WebSocket (& ldquo; ws : // localhost : 8000/socket/server/startdaemon.php & rdquo;);
그런 다음 다음과 같이 이벤트를 감지하십시오
| socket.onopen = function () { 경고 ( "소켓이 열렸습니다!"); } |
메시지를받을 때 다음을 수행하십시오.
| socket.onmessage = function (msg) { 경고 (MSG); } |
그러나 우리는 여전히 경고를 사용하지 않으려 고 노력하고 있으며 이제 배운 내용을 클라이언트 페이지에 통합 할 수 있습니다.
6 단계 : JavaScript
먼저 코드를 문서에 넣은 다음 jQuery의 기능을 사용한 다음 사용자의 브라우저가 WebSocket을 지원하는지 확인해야합니다. 지원되지 않으면 Chrome 브라우저 페이지에 링크를 추가합니다.
| $ (document) .ready (function () { if (! (창에서 "웹 소켓")) { $ ( ' # #chatlog, 입력, 버튼, #Examples'). fadeout ( "fast"); $ ( '<p> 아뇨, WebSockets를 지원하는 브라우저가 필요합니다. <a href = "Google'> http://www.google.com/chrome"> Google Chrome </a>? </p는 어떻습니까? > '). 부록 ('#컨테이너 '); }또 다른{ // 사용자는 WebSockets가 있습니다 연결하다(); 함수 connect () { // 연결 함수 코드는 다음과 같습니다 } }); |
보시다시피, 사용자의 브라우저가 WebSocket을 지원하면 Connect () 함수를 실행합니다. 핵심 기능은 다음과 같습니다. 우리는 개방, 닫기 및 수신 이벤트를 만들기 시작합니다.
서버에서 URL을 정의합니다.
| var 소켓; var host = "ws : // localhost : 8000/socket/server/startdaemon.php"; |
URL에 HTTP가없는 이유를 알 수 있습니까? 그렇습니다. 이것은 다른 프로토콜을 사용하는 WebSocket URL입니다.
아래에 Connect () 함수를 계속 작성하여 코드를 시도하여 코드에 문제가 있으면 사용자에게 알 수 있습니다. WebSocket을 생성하고 정보를 Message () 함수로 전달하고 나중에 설명하겠습니다. 우리는 Onopen, OnMessage 및 OnClose 기능을 만듭니다. 우리는 사용자에게 포트 상태를 제공한다는 점에 유의해야합니다. 포트 상태는 필요하지 않지만 주로 디버깅의 편의를 위해 배치합니다.
| 연결 = 0 개방 = 1 폐쇄 = 2 함수 connect () { 노력하다 { var 소켓; var host = "ws : // localhost : 8000/socket/server/startdaemon.php"; var 소켓 = 새로운 WebSocket (호스트); 메시지 ( '<p class = "event"> 소켓 상태 :'+socket.readystate); socket.onopen = function () { 메시지 ( '<p class = "event"> 소켓 상태 :'+socket.readystate+'(Open)'); } socket.onmessage = function (msg) { 메시지 ( '<p class = "message"> 수신 :'+msg.data); } socket.onclose = function () { 메시지 ( '<p class = "event"> 소켓 상태 :'+socket.readystate+'(close)'); } } catch (예외) { 메시지 ( '<p> 오류'+예외); } } |
Message () 함수는 간단하며 사용자에게 채팅 로그 컨테이너에 제시하려는 텍스트를 채 웁니다. 소켓 이벤트 기능에서 단락 (<p>) 태그에 적합한 클래스를 생성하고 메시지 함수에 단락 엔드 태그 만 있습니다.
| 함수 메시지 (msg) { $ ( '#hatlog'). Append (msg+'</p>'); } |
현재 결과
위의 튜토리얼을 단계별로 따라 다니면 HTML/CSS 템플릿을 만들고 WebSocket 연결을 만들고 설정 한 후 연결을 만들어 사용자 진행 상황을 업데이트했습니다.
7 단계 : 데이터 보내기
이제 제출 버튼이 있지만 키보드 이벤트를 누르고있는 사용자의 말을 듣고 아래의 "13"은 Enter 키에 해당하는 ASCII 코드입니다.
| $ ( '#text'). keypress (function (event) { if (event.keyCode == '13') { 보내다(); } }); |
다음은 send () 함수입니다.
| 함수 send () { var text = $ ( '#text'). val (); if (text == "") { 메시지 ( '<p class = "경고"> 메시지를 입력하십시오'); 반품 ; } 노력하다 { socket.send (텍스트); 메시지 ( '<p class = "event"> send :'+text) } catch (예외) { 메시지 ( '<p class = "경고"> 오류 :' + 예외); } $ ( '#text'). val ( ""); } |
여기서 우리는 필요합니다 :
socket.send ();
추가 코드는 다음과 같은 작업을 수행합니다. 사용자가 다시 클릭 한 것 외에도 입력한지 여부를 감지하고 입력 입력 상자를 지우고 Message () 함수를 실행합니다.
8 단계 : 소켓을 닫습니다
소켓을 닫기위한 작업은 매우 간단합니다. 클릭 이벤트를 연결 해제 버튼에 추가하여 들으십시오.
| $ ( '#링크 컨트라'). 클릭 (function () { socket.close (); }); |
완전한 JavaScript 코드
| $ (document) .ready (function () { if (! (창에서 "웹 소켓")) { $ ( ' # #chatlog, 입력, 버튼, #Examples'). fadeout ( "fast"); $ ( '<p> 아뇨, WebSockets를 지원하는 브라우저가 필요합니다. <a href = "Google'> http://www.google.com/chrome"> Google Chrome </a>? </p는 어떻습니까? > '). 부록 ('#컨테이너 '); }또 다른{ // 사용자는 WebSockets가 있습니다 연결하다(); 함수 connect () { var 소켓; var host = "ws : // localhost : 8000/socket/server/startdaemon.php"; 노력하다 { var 소켓 = 새로운 WebSocket (호스트); 메시지 ( '<p class = "event"> 소켓 상태 :'+socket.readystate); socket.onopen = function () { 메시지 ( '<p class = "event"> 소켓 상태 :'+socket.readystate+'(Open)'); } socket.onmessage = function (msg) { 메시지 ( '<p class = "message"> 수신 :'+msg.data); } socket.onclose = function () { 메시지 ( '<p class = "event"> 소켓 상태 :'+socket.readystate+'(close)'); } } catch (예외) { 메시지 ( '<p> 오류'+예외); } 함수 send () { var text = $ ( '#text'). val (); if (text == "") { 메시지 ( '<p class = "경고"> 메시지를 입력하십시오'); 반품 ; } 노력하다 { socket.send (텍스트); 메시지 ( '<p class = "event"> send :'+text) } catch (예외) { 메시지 ( '<p class = "경고">'); } $ ( '#text'). val ( ""); } 함수 메시지 (msg) { $ ( '#hatlog'). Append (msg+'</p>'); } $ ( '#text'). keypress (function (event) { if (event.keyCode == '13') { 보내다(); } }); $ ( '#링크 컨트라'). 클릭 (function () { socket.close (); }); } // 연결을 끝냅니다 } // 다른 끝 }); |
9 단계 : WebSocket 서버를 실행할 때 XAMPP는 비교적 편리한 쉘 옵션을 제공해야합니다. XAMPP 제어판에서 "쉘"버튼을 클릭하고 다음을 입력하십시오.
| php -q path to server.php |
이제 WebSocket 서버가 실행됩니다!
임무가 완료되었습니다!
페이지를 읽으면 WebSocket 연결을 만들려고 시도한 다음 사용자가 정보를 입력하여 서버에서 수신 할 수 있습니다. 이 튜토리얼을 읽는 데 감사드립니다. WebSocket API를 통해 HTML5 WebSocket의 최신 개발에 대해 배울 수 있습니다.