Web Sockets的目标是在一个单独的持久连接上提供全双工、双向通信。在Javascript中创建了Web Sockets之后,会有一个HTTP请求发送到浏览器以发起连接。在取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为Web Socket协议。也就是说,使用标准的HTTP服务器无法实现Web Sockets,只有支持这种协议的专门服务器才能正常工作。
由于Web Sockets使用了自定义的协议,所以URL模式也略有不同。未加密的连接不再是http://,而是ws://;加密的连接也不是https://,而是wss://。在使用Web Sockets URL时,必须带着这个模式,因为将来还有可能支持其他模式。
使用自定义协议而非HTTP协议的好处:
能够在客户端和服务器之间发送非常少量的数据,而不必担心HTTP那样字节级的开销。由于传递的数据包很小,因此Web Sockets非常适合移动应用。毕竟对移动应用而言,带宽和网络延迟都是关键问题。
自定义协议的缺点:
制定协议的时间比制定Javascript API的时间还要长。
存在一致性和安全性问题。
支持Web Sockets的浏览器:Firefox6+、Safari5+、Chrome、iOS4+版的Safari。
(1)Web Sockets API
创建Web Socket,实例一个WebSocket对象并传入要连接的URL:
var socket = new WebSocket("ws://www.example.com/server.php");
注:必须给WebSocket构造函数传入绝对URL。同源策略对Web Sockets不适用,因此可以通过它打开到任何站点的连接。至于是否会与某个域中的页面通信,则完全取决于服务器。(通过握手信息就可以知道请求来自何方。)
WebSocket表示当前状态的readyState属性:
* WebSocket.OPENING(0):正在建立连接。
* WebSocket.OPEN(1):已经建立连接。
* WebSocket.CLOSING(2):正在关闭连接。
* WebSocket.CLOSE(3):已经关闭连接。
关闭Web Socket连接:
socket.close();
调用了close()之后,readyState的值立即变为2(正在关闭),而在关闭连接后就会变成3。
(2)发送和接收数据
向服务器发送数据,使用send()方法并传入任意字符串:
var socket = new WebSocket("ws://www.example.com/server.php");
socket.send("Hello World!");
因为Web Sockets只能通过连接发送纯文本数据,所以对于复杂的数据结构,在通过连接发送之前,必须序列化。
如:
var message = {
time: new Date(),
text: "Hello World!",
clientId: "asdfp8734req"
};
socket.send(JSON.stringify(message));
当服务器向客户端发送消息是,WebSocket对象就会触发message事件:
socket.onmessage = function(event){
var data = event.data;
//处理数据
//event.data返回的数据也是字符串
};
(3)其他事件
* open:在成功建立连接时触发。
* error:在发生错误时触发,连接不能持续。
* close:在连接关闭时触发。
WebSocket对象不支持DOM2级事件侦听器,必须使用DOM0级语法分别定义每个事件处理程序。
1 var socket = new WebSocket("ws://www.example.com/server.php");
2 socket.onopen = function(){
3 alert("Connection established.");
4 };
5 socket.onerror = function(){
6 alert("Connection error.");
7 };
8 socket.onclose = function(){
9 alert("Connection closed.");
10 };
只有close事件的event对象有额外的信息。
三个额外属性:
wasClean:布尔值,表示连接是否已经明确的关闭;
code:服务器返回的数值状态码;
reason:一个字符串,包含服务器发回的消息。
可以吧这些信息显示给用户,也可以记录到日志中以便将来分析:
socket.onclose = function(event){
console.log("Was clean?" + event.wasClean + " Code=" + event.code + " Reason=" + event.reason);
};