HTML5 웹소켓

WebSocket은 HTML5가 제공하기 시작한 단일 TCP 연결에서 전이중 통신을 위한 프로토콜입니다.

WebSocket API에서는 브라우저와 서버가 핸드셰이크 작업만 수행하면 브라우저와 서버 사이에 빠른 채널이 형성됩니다. 데이터는 둘 사이에서 직접 전송될 수 있습니다.

브라우저는 JavaScript를 통해 WebSocket 연결을 요청을 서버에 보냅니다. 연결이 설정된 후 클라이언트와 서버는 TCP 연결을 통해 직접 데이터를 교환할 수 있습니다.

웹 소켓에 연결한 후 send() 메서드를 통해 서버에 데이터를 보내고, onmessage를 통해 서버에서 반환된 데이터를 받을 수 있습니다. 이벤트.

다음 API는 WebSocket 객체를 생성하는 데 사용됩니다.

var Socket = new WebSocket(url, [protocal] );

위 코드의 첫 번째 매개변수 url은 연결의 URL을 지정합니다. 두 번째 매개변수 프로토콜은 선택사항이며 허용되는 하위 프로토콜을 지정합니다.

WebSocket 속성

다음은 WebSocket 개체의 속성입니다. 위의 코드를 사용하여 소켓 객체를 생성한다고 가정해 보겠습니다.

Properties

설명

Socket.readyState

属性

描述

Socket.readyState

只读属性 readyState 表示连接状态，可以是以下值：

0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

읽기 전용 속성

readyState

는 다음과 같은 연결 상태를 나타냅니다. 값:

0 - 연결이 아직 설정되지 않았음을 의미합니다.

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

1 - 연결이 설정되어 통신이 가능함을 나타냅니다.

2 - 연결이 종료되고 있음을 나타냅니다.
3 - 연결이 닫혔거나 연결을 열 수 없음을 나타냅니다.

Socket.bufferedAmount

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

읽기 전용 속성 <🎜>bufferedAmount<🎜> has been send()는 전송을 위해 대기 중이지만 아직 전송되지 않은 UTF-8 텍스트의 바이트 수를 지정합니다. <🎜>

<🎜><🎜>WebSocket 이벤트 <🎜><🎜>다음은 WebSocket 객체와 관련된 이벤트입니다. 위의 코드를 사용하여 Socket 개체를 생성한다고 가정해 보겠습니다. <🎜><🎜><🎜><🎜>WebSocket 메서드 <🎜><🎜>다음은 WebSocket 개체의 관련 메서드입니다. 위 코드를 사용하여 소켓 객체를 생성한다고 가정해 보겠습니다. <🎜> < /tr>

메서드	설명
Socket.send()	<🎜>연결을 사용하여 데이터를 보냅니다<🎜>
소켓. close()	<🎜>연결 닫기<🎜>

WebSocket 인스턴스

WebSocket 프로토콜은 본질적으로 TCP 기반 프로토콜입니다.

WebSocket 연결을 설정하려면 클라이언트 브라우저가 먼저 서버에 대한 HTTP 요청을 시작해야 합니다. 이 요청은 일반 HTTP 요청과 다르며 "업그레이드"라는 추가 헤더 정보를 포함한 일부 추가 헤더 정보가 포함되어 있습니다. : WebSocket" 프로토콜 업그레이드를 신청하기 위한 HTTP 요청임을 나타냅니다. 서버는 이러한 추가 헤더 정보를 구문 분석한 후 응답 정보를 생성하여 클라이언트에 반환합니다. 클라이언트와 서버 간의 WebSocket 연결이 설정되고, 둘 다 당사자는 이 연결 채널을 통해 자유롭게 통신할 수 있으며 이 연결은 클라이언트나 서버가 연결을 적극적으로 종료할 때까지 계속 존재합니다.

클라이언트 측의 HTML 및 JavaScript

현재 대부분의 브라우저는 WebSocket() 인터페이스를 지원하며 Chrome, Mozilla, Opera 및 Safari 브라우저에서 예제를 사용해 볼 수 있습니다.

php_websocket.html 파일 내용

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>php中文网(php.cn)</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("数据发送中...");
               };
				
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
				
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
		
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

pywebsocket 설치

위 절차를 실행하기 전에 WebSocket을 지원하는 서비스를 생성해야 합니다. pywebsocket에서 mod_pywebsocket을 다운로드하거나 git 명령을 사용하여 다운로드하세요.

git clone https://github.com/google/pywebsocket.git

mod_pywebsocket에는 Python 환경 지원이 필요합니다.

mod_pywebsocket은 Apache HTTP용 웹 소켓 확장입니다. 설치 단계는 다음과 같습니다. :

다운받은 파일의 압축을 풀어주세요.
pywebsocket 디렉터리를 입력합니다.

명령 실행:

$ python setup.py build
$ sudo python setup.py install

문서 설명 보기:
```
$ pydoc mod_pywebsocket
```

서비스 시작

pywebsocket/mod_pywebsocket 디렉터리에서 다음 명령을 실행합니다:

$ sudo python standalone.py -p 9998 -w ../example/

위 명령은 포트 번호 9998로 서비스를 엽니다. -w를 사용하여 핸들러를 설정합니다. echo_wsh.py 목차가 있습니다.

이제 앞서 생성한 php_websocket.html 파일을 Chrome 브라우저에서 열 수 있습니다.