摘要：直播技能成为一种极为盛行的交流办法。而直播渠道的中心方针之一便是实时在线人数，准确地显现该方针关于用户和运营商来说都具有重要意义。然而，直播实时在线人数的显现也面临着功能和资源耗费的挑战。本文将介绍怎么运用Flutter和Dart开发技能栈来优化直播实时在线人数的显现，以到达最小化功能和资源耗费的方针。

文章仅仅运用Flutter示例，其实前后端原理大致相同。

JS的前端和后端我会在文件下面进行独自解说，或者直接跳到文末：五、前端和后端的优化差异

一、了解直播技能

在开始优化直播实时在线人数显现之前，咱们需求了解直播技能的基本原理。直播技能首要包括音视频采集、编码、传输和播映等环节。针对不同的直播场景，能够挑选不同的技能方案和协议。（以下部分内容来源于互联网）

当涉及到直播技能时，了解其基本原理是非常重要的。直播技能涵盖了一系列环节，包括音视频采集、编码、传输和播映等。下面我将详细解说每个环节的基本原理：

音视频采集：直播中的音频和视频数据需求经过摄像头、麦克风等设备进行实时采集。关于音频采集，麦克风会将声响转换成电信号，然后经过模数转换器（ADC）转换为数字信号。关于视频采集，摄像头会将光信号转换成电信号，并运用图像传感器将光信息转换为数字图像。
编码：采集到的音频和视频数据需求经过紧缩编码以削减数据量，并保证在网络传输进程中的实时性。常用的音视频编码格局包括H.264、H.265（也称为HEVC）、AAC等。编码器将原始音视频数据转换为特定格局的紧缩数据。
传输：编码后的数据需求经过网络传输给观众端。在直播场景中，常用的传输协议包括实时传输协议（Real-Time Transport Protocol，简称RTP）和实时传输操控协议（Real-Time Control Protocol，简称RTCP）。RTP用于传输音视频数据，而RTCP用于传输操控信息，如同步音讯和丢包率等。
播映：观众端接收到音视频数据后，需求进行解码和播映。解码器将紧缩的音视频数据解码为原始的音频和视频信号。然后经过音频播映器和视频烘托器将解码后的信号转换为可听和可见的内容。

针对不同的直播场景，能够挑选不同的技能方案和协议。例如，关于大规模直播活动，能够选用多台服务器进行分布式处理，同时运用内容分发网络（Content Delivery Network，简称CDN）来供给更高的传输效果和可靠性。不过这些咱们稍微看看，了解就好。

二、数据采集与传输

直播实时在线人数的显现需求获取当时观看直播的用户数量。一种常用的做法是经过直播服务器记载用户的衔接状况，并实时更新在线人数。为了最小化功能和资源耗费，能够选用以下优化战略：

合理挑选数据传输协议：运用轻量级的网络协议，如WebSocket或HTTP长衔接，防止频频的衔接和断开操作，削减功能开销。
优化数据传输格局：挑选适宜的数据格局，如JSON或二进制数据，以削减数据包巨细和传输时刻。
防止冗余数据传输：仅传输必要的信息，如用户ID或衔接状况，防止传送无关数据，削减网络带宽和服务器压力。

三、前端展现与更新

将直播实时在线人数在前端进行展现和更新，需求考虑以下方面的优化：

运用缓存技能：在前端运用恰当的缓存机制，削减对服务器的恳求次数，进步页面加载速度和呼应功率。
异步更新机制：选用异步技能来更新在线人数的显现，防止堵塞主线程，进步页面功能和用户体会。
精细化界面烘托：合理运用Flutter的烘托机制，防止不必要的重绘和布局操作，削减GPU资源耗费。

好的，现在咱们来分步详解下前端是怎么完结的。

缓存技能

在Flutter里，咱们需求导入一些网络包，和shared_preferences。这个包负责完结本地缓存。

import 'package:shared_preferences/shared_preferences.dart';
class _MyWidgetState extends State<MyWidget> {
  String _data = '';
  @override
  void initState() {
    super.initState();
    fetchData();
  }
  Future<void> fetchData() async {
    // 从缓存中获取数据
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    final cachedData = prefs.getString('cachedData');
    if (cachedData != null) {
      setState(() {
        _data = cachedData;
      });
    } else {
      // 恳求数据并将其存入缓存
      final response = await http.get(Uri.parse('https://xxxx.com/data'));
      if (response.statusCode == 200) {
        final responseData = response.body;
        setState(() {
          _data = responseData;
        });
        // 将数据存入缓存
        prefs.setString('cachedData', responseData);
      }
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Cached Data Example')),
      body: Center(
        child: Text(_data),
      ),
    );
  }
}

在上面代码中，咱们创立了一个StatefulWidget（MyWidget)而且创立了一个_fetchData_办法来获取数据，然后初始化 initState调用_fetchData_办法来初始化页面数据和缓存。

注：在Flutter中，widget分为两类：Stateful（有状况）和 stateless（无状况）widget。

在_fetchData_中，首要运用_shared_preferences_包来获取本地缓存。假如本地有缓存数据，直接运用缓存数据更新界面。假如没有缓存数据，则发送网络恳求获取最新数据，并将数据存入缓存中。

最终，在build办法中，咱们将获取到的数据显现在Text组件中。

经过运用_shared_preferences_包，咱们能够在前端完结简单的本地缓存机制，削减对服务器的恳求次数，进步页面加载速度和呼应功率。

异步更新机制

假如觉得上面办法过于的耗费本地功能，也能够挑选异步更新机制。这样能够防止堵塞主线程，进步页面功能和用户体会。

  Future<void> updateOnlineUsers() async {
    // 发送异步网络恳求获取在线用户数
    final response = await http.get(Uri.parse('https://xxxxx.com/online-users'));
    if (response.statusCode == 200) {
      final responseData = response.body;
      final onlineUsers = int.tryParse(responseData) ?? 0; // 解析呼应数据为整数
      setState(() {
        _onlineUsers = onlineUsers;
      });
    }
  }
...pass
body: Center(
        child: Text('Online Users: $_onlineUsers'),
      ),

在上面代码中。咱们创立了一个_updateOnlineUsers_办法，来异步获取在线用户，而且initState，在_updateOnlineUsers_办法中，首要运用_http_包发送异步网络恳求获取在线用户数。假如呼应成功，解析呼应数据为整数并运用_setState_办法更新_onlineUsers_变量。

经过运用Future和async/await，咱们能够完结异步更新机制，防止堵塞主线程，进步页面功能和用户体会。在网络恳求等耗时操作中，运用异步更新能够坚持界面的流通性，运用户能够持续与运用交互而不被堵塞。

精细化界面烘托

前端无论是什么技能，都要考虑烘托``重绘等，同理，在Flutter里边，咱们一样需求注意防止不必要的重绘和布局操作，然后削减GPU资源耗费。下面供给几种办法来优化。

运用const要害字：在构建Widget时，运用const要害字创立不可变的Widget，这样能够保证该Widget只会在初次烘托时进行一次布局和制作，之后不会再进行无谓的重绘。例如：
```
Widget build(BuildContext context) {
  return const Text('Hello, World!');
}
```
运用shouldRepaint和==运算符：自界说继承自CustomPainter的制作类时，能够经过重写shouldRepaint办法来操控是否进行重绘。在shouldRepaint办法中，能够运用==运算符对前后两帧的数据进行比较，只要在数据发生变化时才返回true，不然返回false，然后防止不必要的重绘。
运用RepaintBoundary小部件：当需求一部分Widget不随其他Widget的重绘而重绘时，能够将其包裹在RepaintBoundary小部件中，这样能够将该部分Widget放入独自的层级，并独立地进行布局和制作，防止对整个界面进行重绘。
运用LayoutBuilder小部件：在需求依据父组件尺寸进行自界说布局时，能够运用LayoutBuilder小部件包裹子组件。LayoutBuilder会依据父组件的尺寸来重绘子组件，然后防止不必要的重绘。
运用Keys标识Widget：经过为Widget设置Key，能够告知Flutter框架该Widget的身份，然后在进行重绘时更精确地确认是否需求重建该Widget。这样能够防止不必要的重绘和布局操作。
防止频频的数据更改：在更改数据时，尽量防止频频地履行setState办法。能够经过兼并操作或运用状况管理东西（如Provider、GetX等）来削减不必要的重绘和布局操作。

经过上述办法，咱们能够精细化操控界面的烘托进程，防止不必要的重绘和布局操作，然后削减GPU资源的耗费。这样能够进步运用程序的功能和用户体会，使界面愈加流通和呼应快速。

四、功能监测与优化

优化直播实时在线人数显现的最终一步是进行功能监测和优化

功能测验与分析：运用功能测验东西对整个体系进行测验，并收集要害方针，如呼应时刻、CPU和内存占用等。依据测验结果进行功能优化。
代码优化：依据功能测验的结果和问题定位，针对性地对要害代码进行优化。以下是一些常见的代码优化战略：

削减不必要的核算和循环：检查代码中是否存在冗余的核算和循环操作，尽量防止重复核算和迭代操作。
合理运用缓存：关于一些频频拜访的数据，能够运用缓存技能进行优化，削减数据库或网络拜访次数。
异步处理：关于一些耗时的操作，能够运用异步办法来处理，防止堵塞主线程。
数据库优化：关于频频读写的数据库，能够经过索引优化、拆分表等办法来进步数据库功能。
图片、资源等优化：关于图片、视频等资源，能够进行紧缩或运用适宜的格局，削减网络传输和加载时刻。
内存管理：及时开释不再需求的内存资源，防止内存泄漏和过度耗费。

定期保护与监测：功能优化是一个持续的进程，需求定期进行保护和监测。在实时在线人数显现功能上线后，需求定期收集并监测要害方针，例如每日活泼用户、页面加载时刻、服务器呼应时刻等。

下面就要评论下，在前端视开发视角，咱们怎么完结这一步操作呢？以及前后端的差异。

五、前端和后端的优化差异

在实时人数显现的进程中，前端和后端都能够采取一些优化战略来进步功能和下降资源耗费，但两者的要点和办法略有不同。（以下均用React来演示）

前端优化

前端缓存：前端能够运用缓存来存储已获取的实时人数数据，削减对服务器的重复恳求。例如，将数据存储在本地缓存或运用浏览器的本地存储技能（如LocalStorage）。

import React, { useEffect, useState } from 'react';
 const [userCount, setUserCount] = useState(0);
  useEffect(() => {
    // 从缓存中获取实时人数数据
    const cachedUserCount = localStorage.getItem('userCount');
    if (cachedUserCount) {
      setUserCount(parseInt(cachedUserCount));
    }
    // 建议恳求获取最新的实时人数数据
    fetchUserCount();
  }, []);
  const fetchUserCount = () => {
    // 模仿恳求实时人数数据的API接口，这儿用 setTimeout 来模仿异步恳求
    setTimeout(() => {
      const latestUserCount = Math.floor(Math.random() * 100); // 假定获取到的实时人数数据
      // 更新实时人数显现
      setUserCount(latestUserCount);
      // 将最新数据存储在缓存中
      localStorage.setItem('userCount', latestUserCount.toString());
    }, 2000); // 假定恳求耗时2秒
  };
  //最终 
  return (
    <div>
      <h2>实时在线人数：{userCount}</h2>
    </div>
  );

守时更新：前端能够经过守时器来周期性地获取最新的实时人数数据，而不是实时监听服务器推送。这样能够削减频频的网络恳求。
虚拟化烘托：运用虚拟化列表（Virtualized List）等技能，只烘托当时可见的人数数据，而不是悉数数据。这能够显著削减DOM操作和内存占用。

这儿着重收拾下虚拟化烘托 这种情况，只要超多数据量的时候才引荐运用。处理大量数据的高效烘托。它经过只烘托当时可见区域的部分数据，而不是将整个数据集一次性悉数烘托到页面上，然后进步功能和呼应速度。

Virtualized代码示例

首要，装置React和React Virtualized：


npm install react react-dom react-virtualized

然后，运用如下代码示例来完结虚拟化烘托：

import { List } from 'react-virtualized';
  // 模仿大量数据
  const data = Array.from({ length: 10000 }, (_, index) => ({
    id: index,
    name: `Item ${index}`,
  }));
 // 烘托每个列表项
  const rowRenderer = ({ index, key, style }) => {
    const item = data[index];
    return (
      <div key={key} style={style}>
        {item.name}
      </div>
    );
  };
 return (
    <List
      width={300} // 列表宽度
      height={400} // 列表高度
      rowCount={data.length} // 列表项数量
      rowHeight={30} // 每个列表项的高度
      rowRenderer={rowRenderer} // 自界说烘托每个列表项的函数
    />
  );

在上面的代码中，咱们创立了一个名为LargeDataList的组件。咱们运用Array.from办法生成了一个包括10000个数据项的数组，并经过rowRenderer函数界说每个列表项的烘托办法。

最终，咱们运用<List>组件来进行虚拟化烘托。这个组件来自React Virtualized库，它承受一些必要的属性，如width（宽度）、height（高度）、rowCount（列表项数量）、rowHeight（每个列表项的高度）和rowRenderer（烘托每个列表项的函数）。

不过话说，这好像有点跑题了…不要紧，，能够用来处理查看正在观看直播的观众。哈哈哈哈

总结

直接让后端来干吧！！

恶作剧~前端后端如同兄弟，同手足。可是！ 前端优化首要关注页面烘托、网络恳求和数据展现方面，着重于进步用户体会；后端优化则首要关注数据存储、查询和实时推送等方面，着重于进步体系的功能和可扩展性。经过前后端的协同优化，能够完结更高效、更稳定的实时人数显现。

本文同步我的技能文档

如何处理直播实时在线人数显示并且最小化性能和资源消耗？

一、了解直播技能

二、数据采集与传输

三、前端展现与更新

缓存技能

异步更新机制

精细化界面烘托

四、功能监测与优化

五、前端和后端的优化差异

前端优化

总结

作者信息

如何处理直播实时在线人数显示并且最小化性能和资源消耗？

一、了解直播技能

二、数据采集与传输

三、前端展现与更新

缓存技能

异步更新机制

精细化界面烘托

四、功能监测与优化

五、前端和后端的优化差异

前端优化

总结

相关文章

全球接近八成的开发人员正在考虑新的岗位

2023年了，还是没学会内卷「前端年终总结」

Web 标准与前端开发 | 青训营笔记

[译] Flutter 3.10 的新功能

作者信息