web项目轮询实践

头像
坚果面包
    阅读 6 分钟

    ​ 近期在实现即时通信时使用了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<SocketDemoProps> = () => {
  const [msg, setMsg] = useState<string[]>([]);
  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 (
    <div className={styles.root}>
      {msg.map((item) => (
        <span>{item}</span>
      ))}
    </div>
  );
};
export default SocketDemo;

    • 客户端输出

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

    • 服务端输出

      服务端连接服务端端接收: <Buffer 68 65 6c 6c 6f>// 默认是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"];
});
    提供的特性
    1. 可靠性: 连接依然可以建立即使应用环境存在： 代理或者负载均衡器 个人防火墙或者反病毒软件

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

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

    3. 断开连接检测：在http://Engine.io层实现了一个心跳机制，这样允许客户端和服务器知道什么时候其中的一方不能响应。该功能是通过设置在服务端和客户端的定时器实现的，在连接握手的时候，服务器会主动告知客户端心跳的间隔时间以及超时时间。浏览器连接后的默认设置的断开重新时间。chrome的Network的ws面板可查看

      心跳检测设置
      pingInterval: 25000
pingTimeout: 5000
    4. 二进制的支持：任何序列化的数据结构都可以用来发送
    5. 跨浏览器的支持：该库甚至支持到IE8
    6. 支持复用：为了在应用程序中将创建的关注点隔离开来，http://Socket.io允许你创建多个namespace，这些namespace拥有单独的通信通道，但将共享相同的底层连接
    7. 支持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 分组
    • 状态同步
    • 服务端并发连接数
    javascriptwebsocket
    坚果面包
    21 声望0 粉丝
    « 上一篇
    web页面集成调用第三方exe -- 编写注册表
    下一篇 »
    笔记-javascript 对象

    引用和评论

    推荐阅读
    头像
    h5 兼容性-ios 滚动问题及可能的方

    坚果面包阅读 4.3k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.4k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.7k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新