WebSocket属性
Socket.readyState
0：表示连接尚未建立
1：表示连接已经建立，可以进行通信
2：表示连接正在进行关闭
3：表示连接已经关闭或者连接不能打开
WebSocket事件
open：连接建立时触发
message：客户端接收服务端数据时触发
error：通信发生错误时触发
close：连接关闭时触发
WebSocket方法
Socket.send()：使用连接发送数据
Socket.close()：关闭连接
代码展示示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>webscoket</title> <script type="text/javascript"> function WebSocketTest() { if ("WebSocket" in window) { alert("您的浏览器支持 WebSocket!"); // 打开一个 web socket var ws = new WebSocket("ws://localhost:xxxx/echo"); ws.onopen = function() { // Web Socket 已连接上，使用 send() 方法发送数据 ws.send("发送数据"); alert("数据发送中..."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("数据已接收..."); }; ws.onclose = function() { // 关闭 websocket alert("连接已关闭..."); }; } else { // 浏览器不支持 WebSocket alert("您的浏览器不支持 WebSocket!"); } } </script> </head> <body> <div id="sse"> <a href="javascript:WebSocketTest()">运行 WebSocket</a> </div> </body> </html>
总结：
HTML5的十大新特性是需要掌握的，在前端面试中很频繁的被问到，重点要理解Web Worker，Web Storage，Web Socket。重要的不是背诵，而是去理解。一个新事物取代一个旧事物肯定是为了更好，所以是更好的什么呢？一般来讲，人都是很懒的生物，更好的用户体验，更好的操作简单，更好的代码可读性等等，从这几个方面去思考为什么HTML5需要出现，它的出现解决了什么问题?相比HTML4有什么优势?改进了什么?优化了什么功能？与HTML4有什么区别？想清楚这些问题，基本也就可以在理解的基础上去掌握这些知识点。
