Html5의 WebSocket 통신
- 黄舟원래의
- 2017-02-16 14:29:403210검색
1. WebSocket 통신 기본 지식
WebSocket은 HTML5가 제공하기 시작한 브라우저와 서버 간의 전이중 통신을 위한 네트워크 기술입니다. ws 또는 wss 프로토콜을 사용하는 차세대 클라이언트-서버 비동기 통신 방식입니다.
WebSocket API에서는 브라우저와 서버가 핸드셰이크 작업만 수행하면 브라우저와 서버 사이에 빠른 채널이 형성됩니다. 데이터는 둘 사이에서 직접 전송될 수 있습니다.
요즘에는 인스턴트 메시징(실시간)을 구현하기 위해 많은 웹사이트에서 폴링(폴링) 기술을 사용하고 있습니다. 폴링은 브라우저가 특정 시간 간격(예: 1초마다)으로 서버에 HTTP 요청을 보낸 다음 서버가 클라이언트의 브라우저에 최신 데이터를 반환하는 것입니다. 이 전통적인 HTTP 요청 d 모델은 브라우저가 서버에 지속적으로 요청을 보내야 한다는 명백한 단점을 가지고 있습니다. 그러나 HTTP 요청의 헤더는 매우 길고 여기에 포함된 데이터는 작은 값일 수 있습니다. 대역폭이 많이 늘어납니다.
폴링 효과를 구현하는 최신 기술은 AJAX를 사용하는 Comet입니다. 그러나 이 기술은 전이중 통신이 가능하더라도 여전히 요청(reuqest)을 발행해야 합니다.
WebSocket API에서는 브라우저와 서버가 핸드셰이크 작업만 수행하면 브라우저와 서버 간에 빠른 채널이 형성됩니다. 데이터는 둘 사이에서 직접 전송될 수 있습니다. 이 WebSocket 프로토콜에서는 인스턴트 서비스를 구현하면 두 가지 주요 이점을 얻을 수 있습니다.
1. 헤더
서로 통신하는 헤더는 매우 작습니다. 2바이트
2. 서버 푸시
클라이언트가 오픈한 소켓이 서버와 연결되어 있는 한 서버는 클라이언트에 적극적으로 데이터를 전송할 수 있습니다. 데이터를 푸시할 수 있습니다. 이 소켓으로 이동하여 수동에서 활성으로 변경하세요.
WebSocket은 Ajax(또는 XHR) 통신에만 국한되지 않습니다. Ajax 기술에서는 클라이언트가 요청을 시작해야 하고 WebSocket 서버와 클라이언트가 서로 도메인 통신에 정보를 푸시할 수 있기 때문입니다.
Ajax 기술의 뛰어난 점은 이를 사용하기 위한 정해진 방법이 없다는 것입니다. WebSocket은 지정된 대상에 대해 생성되며 양방향으로 메시지를 푸시하는 데 사용됩니다.
2. HTML5 WebSockets API
WebSocket 개체
WebSocket은 DOM에 있는 창 개체의 하위 개체입니다.
WebSocket(url) 생성자.
ReadyState. 읽기 전용 속성이며 해당 값은 CONNECTING(0), OPEN(1), CLOSED(3)일 수 있습니다.
boolean send(DOMString 데이터)
-
메시지를 보내고 WebSocket 연결을 닫는 데 각각 사용되는 두 가지 close() 메소드를 무효로 합니다
onopen, onmessage 및 onclosee의 세 가지 이벤트 속성은 각각 open, message 및 close의 세 가지 WebSocket 이벤트에 대한 것입니다.
1. 브라우저 지원 감지
브라우저 지원 감지
rree2. WebSocket 객체 생성 및 서버 연결
필수 통신 엔드포인트에 연결하려면 새 WebSocket 인스턴스를 생성하고 연결하려는 피어의 URL을 제공하기만 하면 됩니다. ws:// 및 wss:// 접두사는 각각 WebSocket 연결과 보안 WebSocket 연결을 나타냅니다.
function loadDemo() {
if (window.WebSocket) {
//supported
} else {
// not supported
}
}WebSocket 연결을 설정할 때 웹 애플리케이션이 사용할 수 있는 프로토콜을 나열할 수 있습니다. WebSocket 생성자의 두 번째 매개변수는 문자열이거나 문자열 그룹일 수 있습니다.
url = "ws://localhost:8080/echo"; w = new WebSocket(url);
proto1과 proto2가 클라이언트와 서버 모두가 이해할 수 있는 잘 정의되고 등록 가능하며 표준화된 프로토콜 이름이라고 가정합니다. 서버는 목록에서 기본 프로토콜을 선택합니다.
w = new WebSocket(url, ["proto1", "proto2"]);
3. 이벤트 리스너 추가
WebSocket 프로그래밍은 소켓을 연 후 서버를 적극적으로 폴링하지 않고 이벤트가 발생할 때까지 기다리기만 하면 됩니다. WebSocket 객체에 이벤트 리스너를 추가하려면 이벤트를 수신하는 콜백 함수를 추가하세요.
WebSocket 개체에는 open, close 및 message세 가지 이벤트가 있습니다. onopen, onmessage 및 onclose는 연결 수명 주기의 각 단계를 처리하는 데 해당하는 세 가지 이벤트 리스너입니다. 물론 onerror도 사용할 수 있습니다. 다음 예와 같이 오류를 수신합니다.
onopen = function(e) {
//确定服务器选择的协议
log(e.target.protocol);
}4. 메시지 보내기
소켓이 열려 있을 때(즉, onopen 이후와 onclose 이전) send 메소드를 사용하여 메시지를 보낼 수 있습니다. 메시지가 전송된 후 close 메소드를 호출하여 연결을 종료할 수도 있고, 이를 수행하지 않고 열린 상태로 유지할 수도 있습니다.
w.onopen = function() {
log("open");
w.send("send message");
}
w.onmessage = function(e) {
log(e.data);
}
w.onclose = function(e) {
log("closed");
}
w.onerror = function(e) {
log("error");
}Send() 함수를 호출하기 전에 전송 버퍼에 얼마나 많은 데이터가 백업되어 있는지 측정할 수 있습니다. bufferAmount 속성은 WebSocket에서 전송되었지만 아직 네트워크에 기록되지 않은 바이트 수를 나타냅니다. 전송 속도를 조정하는 데 유용합니다.
w.send();
WebSocket API는 바이너리 데이터 형식으로 Blob 및 ArrayBuffer 인스턴스 전송을 지원합니다
document.getElementById("sendButton").onclick = function() {
if (w.bufferedAmount < bufferThreshold) {
w.send(document.getElementById("inputMessage").value);
}
}Constant-readyState 속성
이러한 상수는 WebSocket 연결 상태를 설명하는 데 사용할 수 있는 ReadyState 속성 값.
| Constant | Value | Description |
|---|---|---|
| CONNECTING | 0 | 连接还没开启。 |
| OPEN | 1 | 连接已开启并准备好进行通信。 |
| CLOSING | 2 | 连接正在关闭的过程中。 |
| CLOSED | 3 | 连接已经关闭，或者连接无法建立。 |
3.实例
<!DOCTYPE html><html><head>
<title>webSocket实例</title></head><body>
<h2>webSocket实例</h2>
<input type="text" id="text">
<button type="" id="connect" onclick="connect()">建立连接</button>
<button type="" id="send" onclick="send()">发送数据</button>
<button type="" id="disconnect" onclick="disconnect()">断开连接</button>
<p id="message"></p>
<script type="text/javascript">
var socket; var readyState = ["正在连接","已经连接","正在断开","已经断开"]; var message = document.getElementById('message'); function connect(){
try{ var url = 'ws:localhost/test';
socket = new webSocket(url);
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
socket.onopen = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
socket.onmessage = function(msg){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+'<br>'+ "接收数据" + msg.data +"</p>";
}
socket.onclose = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
}catch(exception){ // socket.onerror = function(){
message.innerHTML += "<p>发生错误！"+"</p>"; // }
}
} function send(){
var text = document.getElementById('text').value; try{
socket.send(text);
message.innerHTML += "<p>发送数据：" + text +"</p>";
}catch(exception){
message.innerHTML += "<p>发送数据出错</p>";
}
} function disconnect(){
socket.close();
} </script></body></html>1.WebSocket通信基础知识
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。 使用ws或wss协议，是下一代客户端-服务器的异步通信方法。
在WebSocket API中，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现即时通讯(real-time)，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request)，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。
而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求(reuqest)。
在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即使服务带来了两大好处：
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器可以主动传送数据给客户端，只要客户端打开的socket与服务器建立连接后，就可以把数据推送到这个socket上，从被动转为主动。
WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。
Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建，用于双向推送消息。
2、HTML5 WebSockets API
WebSocket对象
WebSocket在DOM中是window对象的子对象，它具有：
WebSocket(url)构造函数。
readyState。只读属性，其值可以是CONNECTING（0），OPEN（1），CLOSED（3）。
boolean send(in DOMString data)
void close()两个方法，分别用于发送消息和关闭WebSocket连接
onopen, onmessage, 和onclosee三个事件属性，分别对open, message和close三个WebSocket事件。
1、浏览器支持情况检测
检测浏览器支持情况
function loadDemo() {
if (window.WebSocket) {
//supported
} else {
// not supported
}
}2、WebSocket对象的创建和服务器连接
要连接通信端点，只需要创建一个新的WebSocket实例，并提供希望连接的对端URL。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。
url = "ws://localhost:8080/echo"; w = new WebSocket(url);
建立WebSocket连接时，可以列出Web应用能够使用的协议。WebSocket构造函数的第二个参数既可以是字符串，也可以是字符串组。
w = new WebSocket(url, ["proto1", "proto2"]);
假设proto1和proto2是定义明确、可能已注册且标准化的协议名称，它们能够同时为客户端和服务器端所理解。服务器会从列表中选择首选协议。
onopen = function(e) {
//确定服务器选择的协议
log(e.target.protocol);
}3、添加事件监听器
WebSocket编程遵循异步编程模型；打开socket后，只需等待事件发生，而不需要主动向服务器轮询，所以需要在WebSocket对象中添加回调函数来监听事件。
WebSocket对象有三个事件：open、close和message对应有三个事件监听器onopen,onmessage,onclose来处理连接的生命周期的每个阶段,当然还可以是onerror来监听错误，如以下示例所示。
w.onopen = function() {
log("open");
w.send("send message");
}
w.onmessage = function(e) {
log(e.data);
}
w.onclose = function(e) {
log("closed");
}
w.onerror = function(e) {
log("error");
}4、发送消息
当socket处于打开状态（即onopen之后，onclose之前），可以用send方法来发送消息。消息发送完，可以调用close方法来终止连接，也可以不这么做，让其保持打开状态。
w.send();
你可能想测算在调用Send()函数之前，有多少数据备份在发送缓冲区中。bufferAmount属性表示已在WebSocket上发送但尚未写入网络的字节数。它对于调节发送速率很有用。
document.getElementById("sendButton").onclick = function() {
if (w.bufferedAmount < bufferThreshold) {
w.send(document.getElementById("inputMessage").value);
}
}WebSocket API支持以二进制数据的形式发送Blob和ArrayBuffer实例
var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]); w.send(a.buffer);
常量-readyState属性
这些常量是readyState属性的取值，可以用来描述WebSocket连接的状态。
| Constant | Value | Description |
|---|---|---|
| CONNECTING | 0 | 连接还没开启。 |
| OPEN | 1 | 连接已开启并准备好进行通信。 |
| CLOSING | 2 | 连接正在关闭的过程中。 |
| CLOSED | 3 | 连接已经关闭，或者连接无法建立。 |
3.实例
<!DOCTYPE html><html><head>
<title>webSocket实例</title></head><body>
<h2>webSocket实例</h2>
<input type="text" id="text">
<button type="" id="connect" onclick="connect()">建立连接</button>
<button type="" id="send" onclick="send()">发送数据</button>
<button type="" id="disconnect" onclick="disconnect()">断开连接</button>
<p id="message"></p>
<script type="text/javascript">
var socket; var readyState = ["正在连接","已经连接","正在断开","已经断开"]; var message = document.getElementById('message'); function connect(){
try{ var url = 'ws:localhost/test';
socket = new webSocket(url);
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
socket.onopen = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
socket.onmessage = function(msg){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+'<br>'+ "接收数据" + msg.data +"</p>";
}
socket.onclose = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
}catch(exception){ // socket.onerror = function(){
message.innerHTML += "<p>发生错误！"+"</p>"; // }
}
} function send(){
var text = document.getElementById('text').value; try{
socket.send(text);
message.innerHTML += "<p>发送数据：" + text +"</p>";
}catch(exception){
message.innerHTML += "<p>发送数据出错</p>";
}
} function disconnect(){
socket.close();
} </script></body></html> 以上就是Html5 中的 WebSocket通信的内容，更多相关内容请关注PHP中文网（www.php.cn）！