WebSocket

推送技术

在HTML5之前 服务器要实现向网页中推送数据，所用的技术都是 Ajax 轮询。轮询（心跳）是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

WebSocket介绍

WebSocket 协议本质上是一个基于 TCP 的协议。

为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

创建webSocket

webSocket参考文档

  1. 创建 webSocket 使用 new WebSocket(url, [protocol] )
  2. 事件
事件 描述
onopen 连接建立时触发
onmessage 客户端接收服务端数据时触发
onerror 通信发生错误时触发
onclose 连接关闭时触发
  1. 连接状态：只读属性 readyState 表示连接状态
状态值 描述
0 连接尚未建立。
1 连接已建立，可以进行通信。
2 连接正在进行关闭。
3 连接已经关闭或者连接不能打开。
  1. 方法：
方法名称 描述
send() 使用连接发送数据
close() 关闭连接

实例

服务器端

服务器端基于nodejs搭建。使用 ws 包

  1. npm i ws 安装 ws参考文档

  2. 创建 wsServer.js 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    const WebSocket = require('ws');

    const wss = new WebSocket.Server({ port: 8080 });

    wss.on('connection', function connection(ws) {
      ws.on('message', function incoming(message) {
        console.log('received: %s', message);

      });

        setInterval(() => {
            ws.send('something');
        }, 2000);
    });

客户端

​ 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<button class="btn">运行 WebSocket</button>

<script type="text/javascript">
    let t1 = null
    document.querySelector('.btn').onclick = function () {
        if ("WebSocket" in window) {
            // 打开一个 web socket
            var ws = new WebSocket("ws://192.168.6.15:8080");

            //连接建立时触发
            ws.onopen = function () {
                t1 = setInterval(() => {
                    //检测当前是否连接状态
                    if (1 == ws.readyState) {
                        //发送数据到服务端
                        ws.send("发送数据");
                    } else {
                        clearInterval(t1)
                    }
                }, 1000);
            };
            //等待接收服务器发送的信息
            ws.onmessage = function (evt) {
                var received_msg = evt.data;
                console.log(received_msg)
            };
            //连接关闭时触发
            ws.onclose = function () {
                console.log("连接已关闭...");
            };

            //5秒后关闭连接
            setTimeout(() => {
                ws.close()
            }, 5000);
        } else {
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
        }
    }
</script>