English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 TCP 연결을 통해 전双工 통신을 제공하는 프로토콜로 시작되었습니다.
WebSocket은 클라이언트와 서버 간의 데이터 교환을 더 간단하게 만들고, 서버가 클라이언트에 데이터를 적극적으로 전송할 수 있도록 합니다. WebSocket API에서 브라우저와 서버는 단 한 번의 인사를 나누면, 두자리는 지속적인 연결을 생성하고 양방향 데이터 전송을 수행할 수 있습니다.
WebSocket API에서 브라우저와 서버는 단 한 번의 인사를 나누면, 그런 다음 브라우저와 서버 간에 빠른 통로가 형성됩니다. 두자리는 데이터를 상호 전송할 수 있습니다.
현재 많은 웹사이트가 데이터 피드 기술을 구현하기 위해 Ajax 루프를 사용하고 있습니다. 루프는 특정 시간 간격(예를 들어 매1초에), 브라우저가 서버에 HTTP 요청을 보내고, 그런 다음 서버가 가장 최신 데이터를 클라이언트 브라우저로 반환합니다. 이 전통적인 모델은 명확한 단점을 가지고 있으며, 즉 브라우저가 지속적으로 서버에 요청을 보내야 하며, HTTP 요청은 긴 헤더를 포함할 수 있으며, 실제로 효과적인 데이터는 매우 작은 부분일 수 있습니다. 이는 많은_bandwidth와 자원을 낭비하는 것입니다.
HTML5 정의된 WebSocket 프로토콜은 서버 자원과_bandwidth를 더 잘 절약하고 더 실시간하게 통신할 수 있도록 합니다.
브라우저가 JavaScript를 사용하여 WebSocket 연결을 설정하는 요청을 서버에 보내고, 연결이 설정되면 클라이언트와 서버는 TCP 연결을 통해 데이터를 직접 교환할 수 있습니다.
Web Socket 연결을 얻은 후, 브라우저를 통해 send() 서버에 데이터를 보내고 통신을 통해 onmessage 이벤트를 통해 서버가 반환하는 데이터를 수신합니다.
다음 API는 WebSocket 객체를 생성하는 데 사용됩니다.
var Socket = new WebSocket(url, [protocol]);
위 코드의 첫 번째 매개변수 url은 연결의 URL을 지정합니다. 두 번째 매개변수 protocol은 선택 사항으로, 수용할 수 있는 서브 프로토콜을 지정합니다.
다음은 WebSocket 객체와 관련된 속성입니다. 위 코드를 사용하여 Socket 객체를 생성한 경우에 대해 가정합니다:
| 속성 | 설명 |
| Socket.readyState | 읽기 전용 속성 readyState 연결 상태는 다음 값 중 하나일 수 있습니다:
|
| Socket.bufferedAmount | 읽기 전용 속성 bufferedAmount send()에 의해 대기 중인 대기열에 추가된 UTF8로 변환된 바이트 문자열.-8 텍스트 바이트 수. |
다음은 WebSocket 객체와 관련된 이벤트입니다. 위 코드를 사용하여 Socket 객체를 생성한 경우에 대해 가정합니다:
| 이벤트 | 이벤트 처리기 | 설명 |
| open | Socket.onopen | 연결이 설정되면 트리거됩니다 |
| message | Socket.onmessage | 클라이언트가 서버 측 데이터를 수신할 때 트리거됩니다 |
| error | Socket.onerror | 통신이 오류가 발생하면 트리거됩니다 |
| close | Socket.onclose | 연결이 종료되면 트리거됩니다 |
다음은 WebSocket 객체와 관련된 메서드입니다. 위 코드를 사용하여 Socket 객체를 생성한 경우에 대해 가정합니다:
| 메서드 | 설명 |
| Socket.send() | 연결을 통해 데이터를 전송하려면 |
| Socket.close() | 연결 종료 |
WebSocket 프로토콜은 본질적으로 TCP에 기반한 프로토콜입니다.
WebSocket 연결을 설정하기 위해 클라이언트 브라우저는 먼저 서버에 HTTP 요청을发起합니다. 이 요청은 일반 HTTP 요청과 다르며 추가 헤더 정보를 포함하고 있으며, 추가 헤더 정보 "Upgrade: WebSocket"는 이 HTTP 요청이 프로토콜 업그레이드를 요청하는 것을 나타냅니다. 서버 측은 이 추가 헤더 정보를 분석한 후 응답 정보를 클라이언트에게 반환하여 클라이언트와 서버 측의 WebSocket 연결이 설정되고, 양쪽은 이 연결 경로를 통해 정보를 자유롭게 전달할 수 있으며, 이 연결은 클라이언트나 서버 측의 어떤一方이 연결을 주동적으로 종료할 때까지 지속됩니다.
고객의 HTML과 JavaScript
현재 대부분의 브라우저가 WebSocket() 인터페이스를 지원하며, 다음 브라우저에서 예제를 시도할 수 있습니다: Chrome, Mozilla, Opera, Safari。
w3codebox_websocket.html 파일 내용
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>WebSocket 사용 방법, 기본 튜토리얼 웹사이트(oldtoolbag.com)</title>
<script type="text/javascript">
function WebSocketTest()
{
var x = document.getElementById("websocket");
if ("WebSocket" in window)
{
x.innerHTML="您的浏览器支持 WebSocket!";
// 打开一个 web socket
var ws = new WebSocket("ws://echo.websocket.org");
ws.onopen = function()
{
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("发送数据");
x.innerHTML="数据发送中...";
};
ws.onmessage = function(evt)
{
var received_msg = evt.data;
x.innerHTML="数据已接收,基础教程(oldtoolbag.com)...";
};
ws.onclose = function()
{
// 关闭 websocket
x.innerHTML="连接已关闭...";
};
}
else
{
// 浏览器不支持 WebSocket
x.innerHTML="您的浏览器不支持 WebSocket!";
}
}
</script>
</head>
<body>
<div id="sse">
<input type="button" onclick="WebSocketTest()" value="실행 WebSocket">
</div>
<div id="websocket"></div>
</body>
</html>시험을 보세요 ‹/›시험 결과 다음 그림과 같습니다:
소프트웨어 통신은 일곱 계층 구조를 가지고 있으며, 하위 세 계층 구조는 데이터 통신에 치우쳐 있으며, 상위 세 계층은 데이터 처리에 더 치우쳐 있습니다. 중간 전송 계층은 상위 세 계층과 하위 세 계층 간의 다리 역할을 합니다. 각 계층은 다른 작업을 수행하며, 상위 프로토콜은 하위 프로토콜에 의존합니다. 이 통신 구조 개념을 기반으로 합니다.
Socket은 실제로 프로토콜이 아니며, 응용 프로그램 계층과 TCP/IP 프로토콜 가족의 통신 중간 소프트웨어 추상 계층으로, 그것은 인터페이스의 그룹입니다. 두 台의 호스트가 통신할 때, Socket이 지정된 프로토콜에 맞는 데이터를 조직하는 데 사용됩니다. TCP 연결은 더 많이 IP 프로토콜의 기본에 의존하며, IP 프로토콜의 연결은 링크 계층 등 더 낮은 계층에 의존합니다.
WebSocket은 응용 프로그램 계층의 표준적인 프로토콜입니다.
Socket은 전송 제어 계층 프로토콜입니다
WebSocket은 응용 프로그램 계층 프로토콜입니다