HTML5的WebSocket的API,WebSocket API简介

时间: 2017-11-13阅读: 530标签: 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兼容性


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

广告合作文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯