WebSocket学习笔记

什么是websocket？

websocket最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

其他特点包括：
（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

该协议包括两个方面，握手链接（handshake）和数据传输（data transfer）。

这篇文章对websocket的介绍比较全面：http://www.ruanyifeng.com/blog/2017/05/websocket.html?utm_source=tuicool&utm_medium=referral

握手链接

由客户端先发起请求

客户端发了一串 Base64 加密的密钥过去，也就是上面你看到的 Sec-WebSocket-Key。 Server 看到 Client 的请求后，会处理这个握手请求。

使用node构建一个简单的websocket

服务端代码如下：

var WebSocketServer = require('ws').Server,    wss = new WebSocketServer({ port: 8181 }); //握手的端口号wss.on('connection', function (ws) {    console.log(ws.readyState); //1    console.log('client connected');});wss.on('message', function (message) {    ws.send('nihao')});

websocket.readystate一共有四个状态：

CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

客户端代码如下：

  var ws = new WebSocket("ws://localhost:8181");    ws.onopen = function (e) {        console.log('Connection to server opened');    };    var app=new Vue({        el:'#app',        data:{            txt:"1111"        },        methods:{            sendMessage:function(){                console.log(this.txt);                ws.send(this.txt);            }        }    });    ws.onmessage=function(mes){        console.log(mes.data); //nihao    };