关于Websocket以及小例子

我们想去实时去更新数据会用到轮询，setInterval或者setTimeout，还有一种就是websocket，因为 HTTP 协议有一个缺陷：通信只能由客户端发起，我们用ajax去请求数据每次都会http请求，websocket相对于轮询效率更高，耗资源更少，只需要请求一次，会把http转换成websocket，就会和服务端相互通信。

再说直白一点就是服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话

1. webcocket描述

• HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于TCP传输协议
• 支持双向通信，更灵活，更高效，可扩展性更好
• 可以发送文本，也可以发送二进制数据
• 没有同源限制，客户端可以与任意服务器通信。
• 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

2.入门demo

服务端
我用的编辑器是webstorm，node.js
先去node官网下载安装node

下载好默认安装就行，直接点下一步，安装好后再打开cmd，或者直接在webstorm上运行查看

这就安装好了，可以用node.js写服务端了，新建一个目录，node_,打开这个目录，输入npm init回车 ，然后一直回车就行，创建完之后会有一个pack.json的文件，

在Node.js中，使用最广泛的WebSocket模块是ws，在pack.json中加入
“dependencies”: {
“ws”: “1.1.1”
}
然后npm install 安装依赖

装好后就这个样子，里面多出的modules就是下载的依赖包

现在就可以写服务端代码了

const WebSocket = require('ws');

// 引用Server类:
const WebSocketServer = WebSocket.Server;

// 实例化:
const wss = new WebSocketServer({
    port: 3000
});
wss.on('connection', function (ws) {
    console.log(`[SERVER] connection()`); 
    ws.on('message', function (message) {
        console.log(`[SERVER] Received: ${message}`);//打印客户端传给服务端的数据
        ws.send(`ECHO: ${message}`, (err) => {
            if (err) {
                console.log(`[SERVER] error: ${err}`);
            }
        });
    })
});

然后在控制台或者webstrom自带的运行服务，这里就直接在编辑器启动了

客户端代码

<button id="bn">停止</button>
<script>
    //打开一个webscoket
    var ws = new WebSocket('ws://localhost:3000');
    console.log(ws)
    
    // 建立 web socket 连接成功触发事件
    ws.onopen = function () {
        var json="{'a':'1','b':'2','c':3}"
        ws.send(json);//可以给后台发送参数
    };

    //接收到消息的回调方法，接收的数据
    ws.onmessage = function (event) {
        alert('接收的数据'+event.data)
        console.log(event);//后台传回的数据,后台不间断发送数据，持续接收。
        console.log(event.data);
    }
    //---------------点击按钮后关闭websocket--------------
    var bn=document.getElementById('bn')
    bn.addEventListener('click',clickHandler);
    function  clickHandler(e) {
        ws.close() //关闭webscoket
    }
    //断开 web socket 连接成功触发事件
    ws.onclose = function () {
        alert("连接已关闭...");
    };
</script>

在webstorm打开浏览器可以看到，我们打印的ws，后台传给前端的数据

后台做出的相应

然后我们点击按钮，让websocket断开，这里触发了onclose方法

3.websocket的状态

我们打印一下ws，它下面有个readyState的属性

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

到这就写完了，很简单的例子没什么特殊，写一俩遍就入门了。