由于实际工作中很少接触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);

属性

第五，HTML5 WebSocket兼容性

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