HTML5 WebSocket的JavaScript接口详解

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

如果我们想彻底的了解WebSocket，就必须先从它的接口定义学起。WebSocket和HTTP协议一样，都是基于TCP协议的，因此我们无需关注它们的握手协议，而只需关注实际应用的业务和相关接口的实现。
WebSocket在设计时，针对Web开发人员的WebSocket JavaScript客户端接口是非常简单的，以下是WebSocket JavaScript接口的定义：

[Constructor(in DOMString url, in optional DOMString protocol)] 
 interface WebSocket { 
   readonly attribute DOMString URL; 
        // ready state 
   const unsigned short CONNECTING = 0; 
   const unsigned short OPEN = 1; 
   const unsigned short CLOSED = 2; 
   readonly attribute unsigned short readyState; 
   readonly attribute unsigned long bufferedAmount; 
   //networking 
   attribute Function onopen; 
   attribute Function onmessage; 
   attribute Function onclose; 
   attribute Function onerror; 
   boolean send(in DOMString data); 
   void close(); 
 }; 
 WebSocket implements EventTarget;

URL：代表WebSocket服务器的网络地址，HTTP 协议开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。
onopen：当浏览器和WebSocketServer连接成功后，会触发onopen消息
onerror：如果连接失败，发送、接收数据失败或者处理数据出现错误，browser会触发onerror消息
onmessage：当Browser接收到WebSocketServer发送过来的数据时，就会触发onmessage消息
send：方法就是发送数据到服务器端
onclose：当浏览器接收到WebSocketServer端发送的关闭连接请求时，就会触发onclose消息

重点：api所有的操作都是采用异步回调的方式触发，这样不会阻塞UI，可以获得更快的响应时间，更好的用户体验。
主流的浏览器（包括PC和移动终端）现已都支持标准的HTML5的WebSocket API，这意味着客户端的WebSocket JavaScirpt脚本具备良好的一致性和跨平台特性。
WebSockets支持双向、全双工通信信道。只要我们通过HTTP请求（WebSockets的握手）成功，那么连接一直处于激活状态，我们就可以通过js脚本实时的和服务器进行交互。

以下列举部分主流浏览器支持情况：

原文地址：http://www.xttblog.com/?p=389

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » HTML5 WebSocket的JavaScript接口详解