高端建设网站建设,网站备案需要关闭网站吗,网站建设与管理期末考试,沈阳做网站推广的公司一、为什么需要 WebSocket#xff1f;
初次接触 WebSocket 的人#xff0c;都会问同样的问题#xff1a;我们已经有了 HTTP 协议#xff0c;为什么还需要另一个协议#xff1f;它能带来什么好处#xff1f;
答案很简单#xff0c;因为 HTTP 协议有一个缺陷#xff1a…一、为什么需要 WebSocket
初次接触 WebSocket 的人都会问同样的问题我们已经有了 HTTP 协议为什么还需要另一个协议它能带来什么好处
答案很简单因为 HTTP 协议有一个缺陷通信只能由客户端发起。
举例来说我们想了解今天的天气只能是客户端向服务器发出请求服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。 这种单向请求的特点注定了如果服务器有连续的状态变化客户端要获知就非常麻烦。我们只能使用轮询每隔一段时候就发出一个询问了解服务器有没有新的信息。最典型的场景就是聊天室。
轮询的效率低非常浪费资源因为必须不停连接或者 HTTP 连接始终打开。因此工程师们一直在思考有没有更好的方法。WebSocket 就是这样发明的。 二、简介
WebSocket 协议在2008年诞生2011年成为国际标准。所有浏览器都已经支持了。
它的最大特点就是服务器可以主动向客户端推送信息客户端也可以主动向服务器发送信息是真正的双向平等对话属于服务器推送技术的一种。 其他特点包括
1建立在 TCP 协议之上服务器端的实现比较容易。
2与 HTTP 协议有着良好的兼容性。默认端口也是80和443并且握手阶段采用 HTTP 协议因此握手时不容易屏蔽能通过各种 HTTP 代理服务器。
3数据格式比较轻量性能开销小通信高效。
4可以发送文本也可以发送二进制数据。
5没有同源限制客户端可以与任意服务器通信。
6协议标识符是ws如果加密则为wss服务器网址就是 URL。 ws://example.com:80/some/path三、客户端的简单示例
WebSocket 的用法相当简单。
下面是一个网页脚本的例子点击这里看运行结果基本上一眼就能明白。 var ws new WebSocket(wss://echo.websocket.org);ws.onopen function(evt) { console.log(Connection open ...); ws.send(Hello WebSockets!);
};ws.onmessage function(evt) {console.log( Received Message: evt.data);ws.close();
};ws.onclose function(evt) {console.log(Connection closed.);
}; 四、客户端的 API
WebSocket 客户端的 API 如下。
4.1 WebSocket 构造函数
WebSocket 对象作为一个构造函数用于新建 WebSocket 实例。 var ws new WebSocket(ws://localhost:8080);执行上面语句之后客户端就会与服务器进行连接。
实例对象的所有属性和方法清单参见这里。
4.2 webSocket.readyState
readyState属性返回实例对象的当前状态共有四种。 CONNECTING值为0表示正在连接。OPEN值为1表示连接成功可以通信了。CLOSING值为2表示连接正在关闭。CLOSED值为3表示连接已经关闭或者打开连接失败。下面是一个示例。 switch (ws.readyState) {case WebSocket.CONNECTING:// do somethingbreak;case WebSocket.OPEN:// do somethingbreak;case WebSocket.CLOSING:// do somethingbreak;case WebSocket.CLOSED:// do somethingbreak;default:// this never happensbreak;
}4.3 webSocket.onopen
实例对象的onopen属性用于指定连接成功后的回调函数。 ws.onopen function () {ws.send(Hello Server!);
}如果要指定多个回调函数可以使用addEventListener方法。 ws.addEventListener(open, function (event) {ws.send(Hello Server!);
});4.4 webSocket.onclose
实例对象的onclose属性用于指定连接关闭后的回调函数。 ws.onclose function(event) {var code event.code;var reason event.reason;var wasClean event.wasClean;// handle close event
};ws.addEventListener(close, function(event) {var code event.code;var reason event.reason;var wasClean event.wasClean;// handle close event
});4.5 webSocket.onmessage
实例对象的onmessage属性用于指定收到服务器数据后的回调函数。 ws.onmessage function(event) {var data event.data;// 处理数据
};ws.addEventListener(message, function(event) {var data event.data;// 处理数据
});注意服务器数据可能是文本也可能是二进制数据blob对象或Arraybuffer对象。 ws.onmessage function(event){if(typeof event.data String) {console.log(Received data string);}if(event.data instanceof ArrayBuffer){var buffer event.data;console.log(Received arraybuffer);}
}除了动态判断收到的数据类型也可以使用binaryType属性显式指定收到的二进制数据类型。 // 收到的是 blob 数据
ws.binaryType blob;
ws.onmessage function(e) {console.log(e.data.size);
};// 收到的是 ArrayBuffer 数据
ws.binaryType arraybuffer;
ws.onmessage function(e) {console.log(e.data.byteLength);
};4.6 webSocket.send()
实例对象的send()方法用于向服务器发送数据。
发送文本的例子。 ws.send(your message);发送 Blob 对象的例子。 var file document.querySelector(input[typefile]).files[0];
ws.send(file);发送 ArrayBuffer 对象的例子。 // Sending canvas ImageData as ArrayBuffer
var img canvas_context.getImageData(0, 0, 400, 320);
var binary new Uint8Array(img.data.length);
for (var i 0; i img.data.length; i) {binary[i] img.data[i];
}
ws.send(binary.buffer);4.7 webSocket.bufferedAmount
实例对象的bufferedAmount属性表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。 var data new ArrayBuffer(10000000);
socket.send(data);if (socket.bufferedAmount 0) {// 发送完毕
} else {// 发送还没结束
}4.8 webSocket.onerror
实例对象的onerror属性用于指定报错时的回调函数。 socket.onerror function(event) {// handle error event
};socket.addEventListener(error, function(event) {// handle error event
});五、服务端的实现
WebSocket 服务器的实现可以查看维基百科的列表。
常用的 Node 实现有以下三种。
µWebSocketsSocket.IOWebSocket-Node
具体的用法请查看它们的文档这里不详细介绍了。 六、WebSocketd
下面我要推荐一款非常特别的 WebSocket 服务器Websocketd。
它的最大特点就是后台脚本不限语言标准输入stdin就是 WebSocket 的输入标准输出stdout就是 WebSocket 的输出。 举例来说下面是一个 Bash 脚本counter.sh。 #!/bin/bashecho 1
sleep 1echo 2
sleep 1echo 3命令行下运行这个脚本会输出1、2、3每个值之间间隔1秒。 $ bash ./counter.sh
1
2
3现在启动websocketd指定这个脚本作为服务。 $ websocketd --port8080 bash ./counter.sh上面的命令会启动一个 WebSocket 服务器端口是8080。每当客户端连接这个服务器就会执行counter.sh脚本并将它的输出推送给客户端。 var ws new WebSocket(ws://localhost:8080/);ws.onmessage function(event) {console.log(event.data);
};上面是客户端的 JavaScript 代码运行之后会在控制台依次输出1、2、3。
有了它就可以很方便地将命令行的输出发给浏览器。 $ websocketd --port8080 ls上面的命令会执行ls命令从而将当前目录的内容发给浏览器。使用这种方式实时监控服务器简直是轻而易举代码。 更多的用法可以参考官方示例。 Bash 脚本读取客户端输入的例子五行代码实现一个最简单的聊天服务器websocketd 的实质就是命令行的 WebSocket 代理。只要命令行可以执行的程序都可以通过它与浏览器进行 WebSocket 通信。下面是一个 Node 实现的回声服务greeter.js。 process.stdin.setEncoding(utf8);process.stdin.on(readable, function() {var chunk process.stdin.read();if (chunk ! null) {process.stdout.write(data: chunk);}
});启动这个脚本的命令如下。 $ websocketd --port8080 node ./greeter.js官方仓库还有其他各种语言的例子。 七、参考链接
How to Use WebSocketsWebSockets - Send Receive MessagesIntroducing WebSockets: Bringing Sockets to the Web
完 原文链接http://www.ruanyifeng.com/blog/2017/05/websocket.html
