web项目轮询实践

近期在实现即时通信时使用了2种不同的方式：一种是基于定时器实现的轮询（在项目内部与后端协作），一种是基于websocket的双向通信（项目与第三方集成协作）。接下来会介绍这2种方式不同的即时通信方式的基本使用、优缺点。

第一种：Ajax轮询

轮询

需求场景：需实时刷新展示的面板数据。
实现过程：客户端主动向服务器发出请求，等待一段固定的时间（通常使用 JavaScript 的 setInterval 函数），然后再次发出请求
```
setInterval(function () {
  fetch('get-csrf')
    .then((res) => res.json())
    .then((res) => {
      console.log(res);
    });
}, 5 * 1000);
```
优点：实现简单，不需要任何服务器端的特定功能，只需客户端就能处理。并且所有的浏览器上都支持，良好的错误处理系统，超时管理
缺点：
- 服务器和网络资源浪费：链接多数是无效重复的
- 响应数据有延时：setInterval的时间间隔设置越长，服务器上的新数据就需要越多的时间才能到达客户端，不具有可伸缩性
- 响应的结果没有顺序：因为是异步请求，当发送的请求没有返回结果的时候，后面的请求又被发送，而此时如果后面的请求比前面的请求要先返回结果，那么当前面的请求返回结果数据时已经是过时无效的数据
问题场景：每隔5s 定时请求接口 vs 接口返回后再间隔5s时间获取
- 请求响应后间隔5s执行，可以保证响应的顺序性，但同时需要考虑，当请求没有响应时，后续的操作不会执行的问题。
- 可添加超时响应的处理，超过一定的时间没有响应则取消请求。这个超时的时间同时也得考虑其他请求时间过长的接口，且没有实时刷新的部分功能，防止超时取消后无数据展示。
- fetch 请求的实现超时取消请求的方式，可以通过timeout+abort方式来实现。Promise.race([fetch(),timout])的方式也可以实现超时的功能
```
// 接口返回后再间隔5s时间获取 
function getToken() {
  fetch('get-csrf')
    .then((res) => res.json())
    .then((res) => {
      console.log(res);
      setTimeout(() => {
        getToken();
      }, 5 * 1000);
    });
}
getToken();
```

长轮询

实现过程：客户端向服务器端发送请求接口，然后等待服务器端响应。服务器端需要实现特定功能来允许请求被挂起，只要一有事件发生，服务器端就会在挂起的请求中发送响应并关闭该请求，客户端就会使用这一响应并打开一个新的到服务器端的长生存期的Ajax请求。

相比于上述的客户端主动轮询的方式，需服务器端有特殊的功能来临时挂起连接。在项目实现过程中，对于前端人员，采用了第一种方式实现更快捷及具有可操作性

客户端代码示例：

function getToken() {
　　fetch('get-csrf')
    .then((res) => res.json())
    .then((res) => {
      console.log(res);
    });
}
getToken();
/**
在这种长轮询方式下，客户端是在 XMLHttpRequest 的 readystate 为 4（即数据传输结束）时调用回调函数，进行信息处理。当 readystate 为 4 时，数据传输结束，连接已经关闭
**/

其他轮询方式

script标签的长轮询 & Iframe的流：
- 实现：script标签附加到页面上以让脚本执行。服务器端则会挂起连接直到有事件发生，接着把脚本内容发送回浏览器，然后重新打开另一个script标签来获取下一个事件。（script 标签的src 或 iframe 的src指向服务器地址）
- 没有方法可用来实现可靠的错误处理或是跟踪连接的状态，而其具有跨域功能，也有更多实现方式如cors

第二种：websocket

第一种轮询实现的方式，是基于HTTP方式来实现，HTTP的连接具有被动性(需一端主动发起)、无状态、单向、非持久化的特点。同时轮询实现的数据延时（时间间隔）、请求重复浪费等缺点。
而对于项目场景如: 频繁的请求更新数据：控台操作2d地图时，需将地图视野变化（平移缩放旋转等）即时传递给第三方集成应用的3d地图,并同步作出响应，这种场景对于操作的实时性要求更高且响应频繁。多用户通信，由于集成web页面的方式，通过chromium 加载各个不同的页面，这些页面相当于独立的浏览器页面，各个页面之间需要通信、页面与第三方集成应用间的也需要通信，所以综合考虑，websocket具有的双向实时通信能力能更好的满足业务选择。

websocket连接

WebSocket的连接，先进行TCP的三次握手后，再依赖 HTTP 协议进行一次握手，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。
客户端：当客户端连接服务端的时候，会向服务端发送一个类似下面的http报文，升级协议
```
GET ws://localhost:8080/socket.io/?UserGroup=toyGroup&EIO=3&transport=websocket HTTP/1.1
Host: http://localhost:8080
Connection: Upgrade
Upgrade: websocket
Origin: http://localhost:8000
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: V1yj21hlXCrSK2HDuJsD9A==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
```
- Connection: Upgrade：表示要升级协议
- Upgrade: websocket：它的作用是告诉服务端需要将通信协议切换到websocket
- Sec-WebSocket-Version: 13：表示websocket的版本。如果服务端不支持该版本，需要返回一个Sec-WebSocket-Versionheader，里面包含服务端支持的版本号。
- Sec-WebSocket-Key：与后面服务端响应首部的Sec-WebSocket-Accept是配套的，提供基本的防护，比如恶意的连接，或者无意的连接。
服务端：如果服务端支持websocket协议，那么它就会将通信协议切换到websocket，同时发给客户端类似于以下的一个响应报文头
```
HTTP/1.1 101 Switching Protocols
Date: Mon, 20 Dec 2021 07:14:21 GMT
Connection: upgrade
Upgrade: websocket
Sec-WebSocket-Accept: 8L5tW9vVu5z9vfRMglkhare9o58=
```
- 返回的状态码为101，表示同意客户端协议转换请求，并将它转换为websocket协议。
- Sec-WebSocket-Accept根据客户端请求首部的Sec-WebSocket-Key计算出来。

websocket使用

服务端实现：在nodejs，使用ws模块来实现

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

wss.on('connection', function connection(ws) {
  console.log('服务端连接');

  ws.on('message', function (message) {
    // msessage 默认是Buffer
    console.log('服务端端接收:', message.toString());
  });

  ws.send('world', { binary: false });
});

客户端初始化websocket实例

import React, { useState, useEffect } from 'react';
import styles from './index.less';

interface SocketDemoProps {}

const SocketDemo: React.FC = () => {
  const [msg, setMsg] = useState([]);
  useEffect(() => {
    var ws = new WebSocket('ws://localhost:8080');
    ws.onopen = function () {
      msg.push('客户端连接：成功');
      setMsg([...msg]);
      ws.send('hello');
    };
    ws.onmessage = function (e) {
      msg.push('客户端接收消息：' + e.data);
      setMsg([...msg]);
    };
  }, []);
  return (
    
      {msg.map((item) => (
        {item}
      ))}
    
  );
};
export default SocketDemo;

客户端输出

客户端连接：成功
客户端接收消息：world

服务端输出

服务端连接服务端端接收: // 默认是Buffer ， 可用 toString转为相应的字符串    服务端连接服务端端接收: hello

websocket的Opcode

opcode中定义了帧的类型：
持续帧：

     0：继续前一帧；表示和前一个帧的类型完全一致的

非控制帧：主要用来传输数据的

    1：文本帧（UTF8）
    2: 二进制帧
    3-7: 为非控制保留帧

控制帧

    8:关闭帧：当关闭ws链接的时候就会有关闭帧
    9:心跳帧ping
    A:心跳帧pong
    B-F:为控制保留帧

websocket服务搭建： socket.io

node.js提供了高效的服务端运行环境，但是由于浏览器端对HTML5的支持不一，为了兼容所有浏览器，提供卓越的实时的用户体验，并且为程序员提供客户端与服务端一致的编程体验，于是socket.io诞生。

Socket.IO 封装了 Websocket、基于 Node 的 JavaScript 框架，包含 client 的 JavaScript 和 server 的 Node。其屏蔽了所有底层细节，让顶层调用非常简单。

另外，Socket.IO 还有一个非常重要的好处。其不仅支持 WebSocket，还支持许多种轮询机制以及其他实时通信方式，并封装了通用的接口。这些方式包含 Adobe Flash Socket、Ajax 长轮询、Ajax multipart streaming 、持久 Iframe、JSONP 轮询等。换句话说，当Socket.IO 检测到当前环境不支持 WebSocket 时，能够自动地选择最佳的方式来实现网络的实时通信

const socket = io("127.0.0.1:8080", {
  transports: ["websocket", "polling"]  // 注意：transports属性可直接为websocket，不设置时默认采用polling方式
});

socket.on("connect_error", () => {
  // revert to classic upgrade
  socket.io.opts.transports = ["polling", "websocket"];
});

提供的特性

可靠性: 连接依然可以建立即使应用环境存在：代理或者负载均衡器个人防火墙或者反病毒软件

支持自动连接：除非特别指定，否则一个断开的客户端会一直重连服务器直到服务器恢复可用状态。重连设置

import { io } from "socket.io-client";
const socket = io({
  reconnection: false   // 自动重连设置为false之后，需手动设置重连
});
const tryReconnect = () => {
  setTimeout(() => {
    socket.io.open((err) => {
      if (err) {
        tryReconnect();
      }
    });
  }, 2000);
}

socket.io.on("close", tryReconnect);

断开连接检测：在http://Engine.io层实现了一个心跳机制，这样允许客户端和服务器知道什么时候其中的一方不能响应。该功能是通过设置在服务端和客户端的定时器实现的，在连接握手的时候，服务器会主动告知客户端心跳的间隔时间以及超时时间。浏览器连接后的默认设置的断开重新时间。chrome的Network的ws面板可查看
心跳检测设置
```
pingInterval: 25000
pingTimeout: 5000
```
二进制的支持：任何序列化的数据结构都可以用来发送
跨浏览器的支持：该库甚至支持到IE8
支持复用：为了在应用程序中将创建的关注点隔离开来，http://Socket.io允许你创建多个namespace，这些namespace拥有单独的通信通道，但将共享相同的底层连接
支持Room：在每一个namespace下，你可以定义任意数量的通道，我们称之为"房间"，你可以加入或者离开房间，甚至广播消息到指定的房间。

开发版本问题

跨域
socket.io v3与 socket.io v2的一个更改为：socket.io v2 默认支持跨域，socket.io v3 需要手动支持
socket.io v3版本客户端连接 socket.io v2版本的服务端？

Socket.io v3 服务端连接socket.io v2 客户端

const io = require("socket.io")({
  allowEIO3: true // false by default
});

更多信息：https://socket.io/blog/socket...

websocket 开发过程的问题

socket服务端需提供的能力

namespace 与 group 分组
状态同步
服务端并发连接数