HTML5 WebSocket的JavaScript接口详解

HTML5 herman 1589浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

如果我们想彻底的了解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脚本实时的和服务器进行交互。

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

浏览器 支持情况
Chrome 支持 version 4+
Firefox 支持 version 4+
Internet Explorer 支持 version 10+
Opera 支持 version 10+
Safari 支持 version 5+

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

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

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