- 目标:在一个持久连接上提供全双工的双向通信。
- 最开始是以TCPConnection的身份添加到HTML5 规范的, 后来被抽离出来形成了自己的单独的规范。
- 浏览器支持:Firefox 6+, Safari 5+, Chrome和iOS 4以上的Safari。
Web Socket 使用了自定义的协议,而不是HTTP,所以URL模式也略有不同:
使用自定义协议而不是HTTP协议的好处是,能够在客户端和服务器之间发送非常少量的数据,因此特别适合移动应用。
要创建Web Socket,先实例一个WebSocket 对象并传入要连接的URL:
var socket = new WebSocket("ws://www.example.com/server.php");
注意:必须给WebSocket 构造函数传入绝对URL路径。
要关闭Web Socket 连接,可以在任何时候调用close()方法。
socket.close();
WebSocket 有一个表示当前状态的readyState 属性:
readyState 的值永远从0开始。
Web Socket 打开之后,就可以通过连接发送和接收数据。
发送数据使用send()方法,并传入任意字符串。例如:
var socket = new WebSocket("ws://www.example.com/foobar.php"); socket.send("Hello world!");
下面的代码是把数据序列化成JSON字符串,再发送到服务器:
var message = { time: new Date(), text: "Hello World!", clientId: "adkeig393g8dk" }; socket.send(JSON.stringify(message));
服务器收到以后,再解析收到的JSON字符串。
当服务器向客户端发来消息时,Web Socket 对象会触发message事件。这个message事件同样把返回的数据保存在event.data中。
socket.onmessage = function(event) { var data = event.data; // 处理数据 };
与通过send()发送到服务器的数据一样,event.data中返回的数据也是字符串。大部分情况下也需要手工解析。
在连接生命周期不同阶段触发的其他三个事件(除了message):
var socket = new WebSocket("ws://www.example.com/server.php"); socket.onopen = function() { alert("连接建立!"); } socket.onerror = function() { alert("连接出错!"); } socket.onclose = function(event) { console.log("连接关闭!" + "Was clean?" + event.wasClean + " Code=" + event.code + " Reason=" + event.reason); }
前面的三个事件中只有close事件的event对象有额外的三个属性信息:
socket.onclose = function(event) { console.log("连接关闭!" + "Was clean?" + event.wasClean + " Code=" + event.code + " Reason=" + event.reason); }