HTML5的WebSocket的API,WebSocket API简介

更新日期: 2017-11-13阅读: 3.2k标签: html5

由于实际工作中很少接触WebSocket,因为很少有业务需求要用到WebSocket。例如当一个审核请求后台要通过异步实现,审核的http请求的结果(response)不能实时返回,前端这边就不知道何时去更新页面显示状态,这种场景我们最容易想到的处理方案是通过ajax的setTimeout或者setInterval长轮询来去获取后台的处理结果实现,但是这样的实现会造成HTTP的大量开销,这时我们会可能想到用html5 的WebSocket,于是查阅网上资料,倒腾一下WebSocket这玩意。


首先阐述一下WebSocket是什么?

这个简单,百度官方解释 :WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

我们知道,一个普通的http请求是一个request对应一个response,当然了http链接也会长链接和短连接的,长链接是在一定的期限内保持链接不断开。然而这些请求过程都是客户端主动的发起的,服务器则是被动的返回。

而WebSocket是为了解决客户端发起多个http请求到服务器必须要经过长时间的轮训问题而产生的,在webSocket协议下客服端和浏览器可以同时发送信息。建立了WebSocket之后服务器不必在浏览器发送request请求之后才能发送信息到浏览器。这时的服务器已有主动权想什么时候发就可以发送信息到服务器。而且信息当中不必在带有head的部分信息了,对于http的长链接通信来说,这种方式,不仅能降低服务器的压力。而且信息当中也减少了部分多余的信息。


第二,WebSocket应用场景

简单罗列了以下这些场景:社交订阅场景上,您的订阅消息实时更新;多家游戏的交互效果实时反馈;股票基金等金融消息瞬息万变,几乎每秒都在变化,实时看到这些变化尤其重要;体育实况的实时播报和多媒体聊天等。这些场景如何实现数据的实时更新,这时候WebSocket就能派上用场了。


第三,webscoket Demo

1 首先安装 node 环境 
2 安装ws,ws是nodejs的一个WebSocket库,可以用来创建服务

https://github.com/websockets/ws 


//服务器端 server.js

var WebSocket = require('ws').Server;
var wss = new WebSocket({port:8088});
wss.on('connection',function(ws){
   console.log('ws');
   ws.on('message',function(mes){
       console.log(mes);
   });
   ws.send('i get it');
});

//客户端

<script>
   if(!window.WebSocket){
       alert('您的浏览器不支持WebSocket')
   }
   var ws = new WebSocket('ws://localhost:8088');
   //监听消息
   ws.onmessage = function(event) {
       console.log(new Date(),'client get a message ==',event.data);
   };
   // 打开WebSocket
   ws.onclose = function(event) {
       //WebSocket Status:: Socket Closed
   };
   // 打开WebSocket
   ws.onopen = function(event) {
       //WebSocket Status:: Socket Open
       console.log(new Date(),'client send a message ==','hello websocket');
       ws.send('hello websocket');
   };
   ws.onerror =function(event){
       //WebSocket Status:: Error was reported
   };
</script>


//附:express上WebSocket服务器搭建

const express = require('express');
const http = require('http');
const url = require('url');
const WebSocket = require('ws');
const app = express();
app.use(function (req, res) {
 res.send({ msg: "hello" });
});
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
wss.on('connection', function connection(ws, req) {
 const location = url.parse(req.url, true);
 // You might use location.query.access_token to authenticate or share sessions
 // or req.headers.cookie (see http://stackoverflow.com/a/16395220/151312)
 ws.on('message', function incoming(message) {
   console.log('received: %s', message);
 });
 ws.send('something');
});
server.listen(8080, function listening() {
 console.log('Listening on %d', server.address().port);
});


运行结果: 


第四,WebSocket相关api

方法
//关闭WebSocket连接或停止正在进行的连接请求。如果连接的状态已经是closed,这个方法不会有任何效果
void close(in optional unsigned long code, in optional domString reason);

//通过WebSocket连接向服务器发送数据。
void send(in DOMString data);
void send(in DOMString data)
void send(in ArrayBuffer data);
void send(in Blob data);


属性
属性名类型描述
binaryTypeDOMString一个字符串表示被传输二进制的内容的类型。取值应当是”blob”或者”arraybuffer”。”blob”表示使用DOMBlob 对象,而”arraybuffer”表示使用 ArrayBuffer 对象。
bufferedAmountunsigned long调用 send() 方法将多字节数据加入到队列中等待传输,但是还未发出。该值会在所有队列数据被发送后重置为 0。而当连接关闭时不会设为0。如果持续调用send(),这个值会持续增长。只读。
extensionsDOMString服务器选定的扩展。目前这个属性只是一个空字符串,或者是一个包含所有扩展的列表。
oncloseEventListener用于监听连接关闭事件监听器。当 WebSocket 对象的readyState 状态变为 CLOSED 时会触发该事件。这个监听器会接收一个叫close的 CloseEvent 对象。
onerrorEventListener当错误发生时用于监听error事件的事件监听器。会接受一个名为“error”的event对象。
onmessageEventListener一个用于消息事件的事件监听器,这一事件当有消息到达的时候该事件会触发。这个Listener会被传入一个名为”message”的 MessageEvent 对象。
onopenEventListener一个用于连接打开事件的事件监听器。当readyState的值变为 OPEN 的时候会触发该事件。该事件表明这个连接已经准备好接受和发送数据。这个监听器会接受一个名为”open”的事件对象。
protocolDOMString一个表明服务器选定的子协议名字的字符串。这个属性的取值会被取值为构造器传入的protocols参数。
readyStateunsigned short连接的当前状态。取值是 Ready state constants之一。 只读。
urlDOMString传入构造器的URL。它必须是一个绝对地址的URL。只读。

第五,HTML5 WebSocket兼容性


链接: https://www.fly63.com/article/detial/98

提示用户升级浏览器代码 不支持HTML5,请升级浏览器

javascript提示用户升级浏览器代码],低于ie9的浏览器提示.倾向于提示用户升级浏览器,而不是为了兼容老版浏览器.

HTML5全局属性汇总

HTML5全局属性:可以用来配置所有元素共有的行为,这种属性称为全局属性,可以用在任何一个元素身上。包括:accesskey属性、class属性、contenteditable属性、dir属性、draggable属性、dropzone属性、hidden属性等

一起来看 HTML 5.2 中新的原生元素 <dialog>

HTML 5.2 正式成为 W3C 的推荐标准(REC),其中,推出了一个新的原生模态对话框元素 <dialog>,乍一看,可能感觉它就是一个新增的元素,然而,作者最近在玩的时候,发现它确实是一个值得期待和很有意思的元素

html5新增主体结构元素有哪些?_各自的用途与使用

html5新增元素:article元素,aside元素,nav元素,section元素,footer元素,header元素,figure元素,figcaption元素。article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。

HTML5新特性总结

HTML5发布于2014年,设计目的是为了在移动端支持多媒体。语义化标签:section和article标签都是独立的分块标签,section跟随意,article表示单独的文字单元。

HTML5程序员需要掌握的重要技能

现在参加HTML5培训的人很多,但是能学到什么东西还有很多的小伙伴不是很清楚,本篇文章就带读者看一下一名专业的HTML5程序员需要掌握哪些技能。

HTML5行业的发展预测

现在的互联网市场上,HTML5在快速地成长,甚至是未来几年里将会有很多公司进入HTML5这个领域,HTML5也会像传统的Flex,Flash,Silverlight和Objective-C那样,更容易出现在任何一个设备中,形成一套自己独有的生态系统

html5中dialog标签的使用

在html5版本中新增了很多实用有语义的标签,今天要介绍的就是html5版本新增的其中一个标签,即<dialog>标签。接下来我们就一起来看看该标签的用法吧!

html5中details标签作用

HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息。目前只有 Chrome 和 Safari 6 支持 <details> 标签。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!