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
    };