DEV Community

lyc233333
lyc233333

Posted on

📚 HarmonyOS helps online education: practical network optimization battle from stuttering classroom to silky learning

As a developer who was stuck in online classes and wanted to smash the computer, today I want to share the practical online education of HarmonyOS network acceleration!After using this solution to optimize, students reported that "live broadcast is as smooth as local playback", and these life-saving techniques must be made public~

1. The "Internet Life and Death Line" of Online Education

Last week, when I helped the training institution adjust the online course APP, the teacher complained: "When the key points are mentioned, the picture is stuck and all the students are running away."Online education requires more stringent Internet requirements than social apps:

  • Live broadcast cannot be stuck: Every 1 second of stuttering, students lose 20% of their attention
  • Courseware loading in seconds: The time to wait for the courseware for more than 3 seconds, the exit rate soars
  • Data must be secure: Student privacy and course information cannot be leaked

HarmonyOS's network acceleration service is like installing a "voltage regulator" for online classes. The following is the practical solution~

2. Network architecture: build an "exclusive highway" for online courses

1. The layered architecture is super stable

Layer name Responsibilities Analogy
Application layer Live broadcast interface and courseware list for students to watch Classroom blackboard
Network service layer Manage request sending, result processing Express sorting center
Data cache layer Common courseware storage, emergency rescue when network misses backup textbooks in the back row of classroom
Network adaptation layer Choose the fastest network, and the network cutting will not be stuck Traffic commander

2. Module collaboration is like "pipeline"

  1. Students click "Open Live" → Application layer to notify the network service layer
  2. First check whether there is live stream in the cache layer → if there is no network adapter layer, select the network
  3. Select the network (such as 5G) in the network adapter layer → initiate a request from the network service layer
  4. When the live stream is returned, the cache layer is stored first → then display it to the application layer.

3. Online guarantee for live classes: Teachers’ lectures are not “stuck”

1. Adaptive bit rate: automatic "speed bump" mechanism

  • Strong.com: 2Mbps HD live broadcast, the teacher can read it clearly
  • Weak network: Automatically reduce to 500kbps standard definition, and priority is to ensure smoothness 
import { netQuality } from '@kit.NetworkBoostKit';

// Monitor network quality and automatically adjust code rate
netQuality.on('netQosChange', (qos) => {
const bandwidth = qos.linkDownBandwidth; // Unit kbps

if (bandwidth < 800) {
setVideoQuality('Standard Definition'); // 500kbps
console.log('Net difference, cut to standard definition mode');
  } else {
setVideoQuality('HD'); // 2000kbps
console.log('The network is good, cut to HD mode');
  }
});

function setVideoQuality(quality) {
  const player = getVideoPlayer();
player.setBitrate(quality === 'Standard Definition' ? 500000: 2000000);
}
Enter fullscreen mode Exit fullscreen mode

2. Multi-network switching: Continuous classes from classroom to corridor

  • Switching conditions: When WiFi signal < -70dBm and 4G bandwidth>500kbps
  • Seamless Continue: Pre-cache 5 seconds of video before cutting the net, and then play it after cutting. 
import { netHandover } from '@kit.NetworkBoostKit';

// Save 5 seconds of video before cutting the net
netHandover.on('handoverStart', () => {
preloadVideo(5); // Preload for 5 seconds
console.log('Prepare to cut the net, save 5 seconds of video first');
});

// Continue to broadcast after cutting the network
netHandover.on('handoverComplete', () => {
  resumeFromPreload();
console.log('Successfully cut the net, continue from the preload');
});
Enter fullscreen mode Exit fullscreen mode

4. Courseware loading optimization: "Page turns in seconds" like flipping books

1. Preloading strategy: "Preview" before students

  • Preload the next class after class: After class, the second class is automatically preloaded after class
  • Smart Sorting: Preload difficult courses first, save more caches for popular courses 
// Pre-load the next get out of class after class
afterClass(() => {
const Next class = getNextCourse();
preloadCourseMaterials(next class.id);
});

function preloadCourseMaterials(courseId) {
const courseware = getCourseMaterials(courseId);
Courseware.forEach((material) => {
    loadInBackground(material.url, {
priority: material.difficulty > 3 ? 'high' : 'medium' // Difficult courses are preferred
    });
  });
}
Enter fullscreen mode Exit fullscreen mode

2. Cache management: the "smart bookshelf" of courseware

  • Memory + local two-level cache: Commonly used courseware to store memory, and infrequently used stored locally
  • Operational clearance: Courseware that exceeds 7 days will be automatically deleted, saving space 
// Save the courseware to memory, move the local area when full
function saveToCache(material) {
  if (memoryCache.size < MAX_MEMORY) {
    memoryCache.add(material);
  } else {
const has not been used for the longest time = memoryCache.getLeastUsed();
localCache.add (last time not used);
memoryCache.remove(the longest has not been used);
    memoryCache.add(material);
  }
}

// Clear expired courseware every week
weekly(() => {
  clearExpiredCache();
});
Enter fullscreen mode Exit fullscreen mode

5. Safety and stability: "Anti-theft Door" for online courses

1. Data encryption: the "password lock" of the courseware

  • Transmission encryption: Student homework and exam papers are transmitted with AES encryption
  • Local Encryption: The cached courseware is also encrypted locally to prevent the phone from being stolen 
// Encrypted jobs are sent again
function submitHomework(homework) {
const encryption job = encrypt(homework, AES_KEY);
sendToServer(encrypted job);
}

// Local courseware encrypted memory
function saveCourseLocally(course) {
const encryption courseware = encrypt(course, LOCAL_KEY);
fs.writeFile('encrypted_course', encryption courseware);
}
Enter fullscreen mode Exit fullscreen mode

2. Heartbeat mechanism: the "Electronic Graph" of the Internet

  • Test every 10 seconds: Automatically reconnect after disconnection, up to 3 trials
  • Smart Retry: Retry after 1 second the first time, 2 seconds the second time, 4 seconds the third time 
// A heartbeat once in 10 seconds
setInterval(() => {
  if (isNetworkDown()) {
reconnect(0); // Start reconnecting
  }
}, 10000);

function reconnect(number of retry) {
const interval = 2 **Number of retry; // 1s→2s→4s
const success = netManager.reconnect();

if (!Success && Number of retry times < 3) {
    setTimeout(() => {
reconnect(number of retry + 1);
}, interval * 1000);
  }
}
Enter fullscreen mode Exit fullscreen mode

6. Practical data: How much difference is before and after optimization?

Scenario Before Optimization After Optimization
Live Stuck Rate 15 times/hour 2 times/hour
Courseware loading time Average 8 seconds Average 1.5 seconds
Weak network disconnection rate 30% 5%

The last thought

I remember when I was testing in a mountain school for the first time, the 4G signal was only 2 grids, and the courseware loaded so slowly that the teacher dropped chalk~ After optimization, the teacher said, "Now clicking the courseware is as fast as flipping a book", and asked me if I "opened the back door" for the APP~ In fact, I just used the network acceleration function of HarmonyOS right~

Top comments (0)