HTML5의 멋진 새 기능 중 하나는 AJAX 요청 없이 서버와 통신할 수 있는 WebSocket입니다. 오늘 Bin Go에서는 Php 환경의 서버 측을 통해 WebSocket을 실행하고, 클라이언트를 생성하고, WebSockets 프로토콜을 통해 서버 측 정보를 보내고 받을 수 있습니다.
WebSocket이란 무엇입니까?
WebSockets는 (TCP) 인터페이스에서 양방향 통신을 위한 기술, PUSH 기술 유형입니다. 동시에 WebSocket은 여전히 W3C 표준을 기반으로 합니다. 지금까지 최신 버전의 Chrome 및 Safari 브라우저는 이미 WebSocket을 지원합니다.
WebSocket은 무엇을 대체할까요? WebSocket은 흥미로운 개념인 Long Polling(PHP 서버 푸시 기술)을 대체할 수 있습니다. 클라이언트는 서버에 요청을 보냅니다. 이제 서버는 준비되지 않은 데이터에 응답하지 않으며 최신 데이터를 보낼 준비가 될 때까지 연결을 유지합니다. 그 후 클라이언트는 데이터를 수신하고 다른 데이터를 보냅니다. 요구. . 여기에는 장점이 있습니다. 두 연결 모두에서 대기 시간이 줄어들고 연결이 이미 열려 있는 경우 새 연결을 만들 필요가 없습니다. 그러나 Long-Polling은 멋진 기술이 아니며 요청 일시 중단이 발생할 가능성이 있으므로 새로운 연결을 설정해야 합니다.
일부 AJAX 애플리케이션은 위의 기술을 사용합니다. 이는 종종 낮은 리소스 활용도에 기인합니다.
서버가 아침에 자동으로 시작되어 미리 연결 포트를 설정하지 않고도 데이터를 수신하려는 클라이언트에 데이터를 보낼 수 있다면 얼마나 좋을까요! PUSH 기술의 세계에 오신 것을 환영합니다!
1단계: WebSocket 서버 가져오기
이 튜토리얼에서는 서버 측 실행 및 기타 작업보다는 클라이언트 생성에 더 중점을 둘 것입니다.
저는 Windows 7에서 XAMPP를 사용하여 PHP를 로컬로 실행하고 있습니다. phpwebsockets는 PHP WebSocket 서버입니다. (제 경험상 이 버전에는 약간의 문제가 있습니다. 일부 수정하고 소스 파일을 업로드하여 모두와 공유합니다.) 아래의 다른 버전에서도 WebSocket을 구현할 수 있습니다. 작동하지 않으면 다른 버전을 사용해 볼 수 있습니다. 또는 아래 튜토리얼을 계속 진행하세요.
jWebSocket (자바)
웹 소켓 루비 (루비)
소켓 IO 노드 (node.js)
아파치 서버 시작
2단계: URL 및 포트 수정
이전 설치를 기반으로 서버를 수정하십시오. 다음은 setup.class.php의 예입니다.
| 공용 함수 __construct($host='localhost',$port=8000,$max=100) { $this->createSocket($host,$port); } |
파일을 찾아보고 필요한 경우 변경합니다.
3단계: 클라이언트 생성 시작
기본 템플릿을 만들어 보겠습니다. 이것은 내 client.php 파일입니다.
| <!DOCTYPE HTML> <html> <머리> <스크립트 소스= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <title>WebSocket 클라이언트</title> </head> <본문> <div id="래퍼"> <div id="컨테이너"> <h1>웹소켓 클라이언트</h1> <div id="chatLog"> </div><!-- #chatLog --> <p id="examples">예: '안녕', '이름', '나이', '오늘'</p> <입력 id="text" type="text" /> <button id="disconnect">연결 해제</button> </div><!-- #컨테이너 --> </div> </body> </html> |
채팅 로그 컨테이너, 입력 상자, 연결 끊기 버튼 등 기본 템플릿을 만들었습니다.
4단계: CSS 추가
화려한 코드는 없으며 레이블 스타일만 처리하면 됩니다.
몸 { |
5단계: 웹소켓
이벤트 먼저 WebSocket 이벤트의 개념을 이해해 보겠습니다.
웹소켓 이벤트:
세 가지 WebSocket 이벤트를 사용합니다.
onopen: 인터페이스가 열릴 때
onmessage: 메시지를 받았을 때
onclose: 인터페이스가 닫힐 때
우리는 이것을 어떻게 달성합니까?
먼저 WebSocket 개체를 만듭니다.
var 소켓 = new WebSocket("ws://localhost:8000/socket/server/startDaemon.php");
그런 다음 다음과 같이 이벤트를 감지합니다.
| 소켓.온오픈 = 함수(){ Alert("소켓이 열렸습니다!"); } |
정보를 받으면 다음을 수행하십시오.
| 소켓.온메시지 = 함수(msg){ 경고(msg); //멋지네요! } |
그러나 우리는 여전히 경고 사용을 피하려고 노력하고 있으며 이제 배운 내용을 클라이언트 페이지에 통합할 수 있습니다.
6단계: 자바스크립트
먼저 jQuery 의 document.ready 함수에 코드를 넣은 다음 사용자의 브라우저가 WebSocket을 지원하는지 여부도 확인합니다. 지원되지 않는 경우 Chrome 페이지에 대한 링크를 추가하겠습니다.
| $(문서).ready(함수() { if(!(창의 "WebSocket")){ $('#chatLog, 입력, 버튼, #examples').fadeOut("fast"); $('<p>아뇨, WebSocket을 지원하는 브라우저가 필요합니다. <a href="Google'>http://www.google.com/chrome">Google Chrome</a>은 어떻습니까?</p >').appendTo('#container'); }또 다른{ //사용자에게 WebSocket이 있습니다. 연결하다(); 함수 연결(){ //연결 함수 코드는 아래와 같습니다. } }); |
보시다시피 사용자의 브라우저가 WebSocket을 지원한다면 connect() 함수를 실행하게 됩니다. 핵심 기능은 다음과 같습니다. 열기, 닫기 및 수신 이벤트 생성을 시작하겠습니다.
서버에서 URL을 정의하겠습니다.
| var 소켓; var 호스트 = "ws://localhost:8000/socket/server/startDaemon.php"; |
URL에 http가 없다는 것을 알 수 있습니까? 네, 이것은 다른 프로토콜을 사용하는 WebSocket URL입니다.
계속해서 connect() 함수를 사용해 보겠습니다. 코드에 문제가 있으면 사용자에게 알릴 수 있도록 코드를 try/catch 블록에 넣습니다. WebSocket을 생성하고 나중에 설명할 message() 함수에 정보를 전달합니다. onopen, onmessage 및 onclose 함수를 만듭니다. 사용자에게 포트 상태를 제공한다는 점에 유의해야 합니다. 이는 필수는 아니지만 주로 디버깅을 용이하게 하기 위해 제공합니다.
| 연결 중 = 0 열려 있음 = 1 닫힘 = 2 함수 연결(){ 노력하다{ var 소켓; var 호스트 = "ws://localhost:8000/socket/server/startDaemon.php"; var 소켓 = 새로운 WebSocket(호스트); message('<p class="event">소켓 상태: '+socket.readyState); 소켓.온오픈 = 함수(){ message('<p class="event">소켓 상태: '+socket.readyState+' (열림)'); } 소켓.온메시지 = 함수(msg){ message('<p class="message">수신됨: '+msg.data); } 소켓.onclose = 함수(){ message('<p class="event">소켓 상태: '+socket.readyState+' (닫힘)'); } } 잡기(예외){ message('<p>오류'+예외); } } |
message() 함수는 매우 간단합니다. 채팅 로그 컨테이너를 사용자에게 표시하려는 텍스트로 채웁니다. 소켓 이벤트 함수에 단락(<p>) 태그에 대한 적절한 클래스를 생성하고 메시지 함수에는 단락 닫는 태그만 있습니다.
| 함수 메시지(msg){ $('#chatLog').append(msg+'</p>'); } |
현재 결과
위 튜토리얼을 단계별로 따라하셨다면 HTML/CSS 템플릿을 생성하고 Websocket 연결을 생성 및 설정했으며 연결 생성을 통해 사용자의 진행 상황을 업데이트한 것입니다.
7단계: 데이터 보내기
이제 제출 버튼이 생겼지만 사용자가 키보드를 눌렀을 때 이벤트를 모니터링하고 보내기 기능도 실행해야 합니다. 아래 '13'은 Enter 키에 해당하는 ASCII 코드입니다.
| $('#text').keypress(function(event) { if (event.keyCode == '13') { 보내다(); } }); |
다음은 send() 함수입니다:
| 함수 보내기(){ var 텍스트 = $('#text').val(); if(텍스트==""){ message('<p class="warning">메시지를 입력해주세요.'); 반품 ; } 노력하다{ 소켓.send(텍스트); message('<p class="event">보낸 날짜: '+text) } 잡기(예외){ message('<p class="warning"> 오류:' + 예외); } $('#text').val(""); } |
아래에는 다음이 필요합니다.
소켓.send();
추가 코드는 다음 작업을 수행합니다. 사용자가 아무것도 입력하지 않은 후 Return을 클릭하는지 여부를 감지하고 입력 상자를 지우고 message() 함수를 실행합니다.
8단계: 소켓 닫기
소켓을 닫는 것은 매우 간단합니다. 연결 끊기 버튼에 대한 클릭 이벤트 리스너를 추가하기만 하면 됩니다.
| $('#disconnect').click(function(){ 소켓.닫기(); }); |
완전한 자바스크립트 코드
| $(문서).ready(함수() { if(!(창의 "WebSocket")){ $('#chatLog, 입력, 버튼, #examples').fadeOut("fast"); $('<p>아뇨, WebSocket을 지원하는 브라우저가 필요합니다. <a href=" Google'>http://www.google.com/chrome">Google Chrome</a>은 어떻습니까?</p >').appendTo('#container'); }또 다른{ //사용자에게 WebSocket이 있습니다. 연결하다(); 함수 연결(){ var 소켓; var 호스트 = "ws://localhost:8000/socket/server/startDaemon.php"; 노력하다{ var 소켓 = 새로운 WebSocket(호스트); message('<p class="event">소켓 상태: '+socket.readyState); 소켓.온오픈 = 함수(){ message('<p class="event">소켓 상태: '+socket.readyState+' (열림)'); } 소켓.온메시지 = 함수(msg){ message('<p class="message">수신됨: '+msg.data); } 소켓.onclose = 함수(){ message('<p class="event">소켓 상태: '+socket.readyState+' (닫힘)'); } } 잡기(예외){ message('<p>오류'+예외); } 함수 보내기(){ var 텍스트 = $('#text').val(); if(텍스트==""){ message('<p class="warning">메시지를 입력해주세요.'); 반품 ; } 노력하다{ 소켓.send(텍스트); message('<p class="event">보낸 날짜: '+text) } 잡기(예외){ message('<p class="warning">'); } $('#text').val(""); } 함수 메시지(msg){ $('#chatLog').append(msg+'</p>'); } $('#text').keypress(function(event) { if (event.keyCode == '13') { 보내다(); } }); $('#disconnect').click(function(){ 소켓.닫기(); }); }//연결 종료 }//그 외 종료 }); |
9단계: WebSocket 서버를 실행하려면 몇 가지 명령줄을 입력해야 합니다. XAMPP는 보다 편리한 셸 옵션을 제공합니다. XAMPP 제어판의 '셸' 버튼을 클릭하고 다음을 입력합니다.
| php -q 경로toserver.php |
이제 WebSocket 서버가 실행 중입니다!
이제 끝났습니다!
페이지를 읽으면 WebSocket 연결을 시도하고 사용자는 정보를 입력하고 서버로부터 정보를 받을 수 있습니다. 이 튜토리얼을 읽어주셔서 감사합니다. HTML5 WebSocket에 대한 유용한 지식을 얻으셨기를 바랍니다. WebSocket API를 통해 HTML5 WebSocket의 최신 개발에 대해 알아볼 수 있습니다.