H5 WebSocket

/**
            H5 Websocket
            http请求只能客户端单方便向服务器请求发送数据 短连接 轮询又太浪费资源
            websocket 实现全双通 长连接 用于前后端频繁交互的场景

            其他特点包括:
            (1)建立在 TCP 协议之上，服务器端的实现比较容易。

            (2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

            (3)数据格式比较轻量，性能开销小，通信高效。

            (4)可以发送文本，也可以发送二进制数据。

            (5)没有同源限制，客户端可以与任意服务器通信。

            (6)协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

         */

        //创建WebScoket实例
        var ws = new WebSocket("wss://echo.websocket.org");
        //执行上面语句之后,客户端就会与服务端进行连接.

        /**
        ws.readyState 查看连接状态:
            CONNECTING: 值为0，表示正在连接。
            OPEN: 值为1，表示连接成功，可以通信了。
            CLOSING: 值为2，表示连接正在关闭。
            CLOSED: 值为3，表示连接已经关闭，或者打开连接失败。
         */
        console.log(ws.readyState);//0


        //实例对象的onopen属性,用于指定连接成功后的回调函数。
        ws.onopen = function()
        {
            console.log("connect socket...");
            console.log(ws.readyState);//1

            // 实例对象的send()方法用于向服务器发送数据。
            ws.send("send message");
        }
        //如果要指定多个回调函数，可以使用addEventListener方法。
        ws.addEventListener('open',function(){
            console.log("connect socket...");
            console.log(ws.readyState);//1
            ws.send("send message");
        });


        //实例对象的onmessage属性,用于指定收到服务器数据后的回调函数。
        ws.onmessage = function(evt)
        {
            console.log("message:" + evt.data);
            ws.close();
            console.log(ws.readyState);//2
        }
        
        
        //实例对象的onclose属性,用于指定连接关闭后的回调函数。
        ws.onclose = function()
        {
            console.log("socket close!");
            console.log(ws.readyState);//3
        }
        ws.addEventListener('close',function(){
            console.log("socket close!");
        });


        //实例对象的onerror属性,用于指定报错时的回调函数。
        ws.onerror = function()
        {
            console.log("socket error!");
        }
        ws.addEventListener('error',function(){
            console.log("socket error!");
        });




        //总结:实现连接其实就下面简单的几步
        var ws = new WebSocket("wss://echo.websocket.org");
        console.log(ws.readyState);
        ws.onopen = function()
        {
            console.log("已连接socket！");
            console.log(ws.readyState);
            ws.send("这是发送的消息...");
        }

        ws.onmessage = function(evt)
        {
            console.log("这是接收的信息:" + evt.data);
            ws.close();//关闭链接
            console.log(ws.readyState);
        }

        ws.onclose = function(evt)
        {
            console.log("连接已关闭！");
            console.log(ws.readyState);
        }

 测试地址:https://jsbin.com/qulihivalo/edit?js,console

 原文:http://www.ruanyifeng.com/blog/2017/05/websocket.html

另外一篇讲的比较通透的文章：https://www.zhihu.com/question/20215561