Détecter la vitesse de connexion internet avec Javascript
Salut tout le monde. Bienvenue dans le tutoriel d'aujourd'hui. Dans le tutoriel d'aujourd'hui, nous allons apprendre à détecter la vitesse d'Internet. Pour ce faire, nous avons besoin de Javascript.
N'hésitez pas à lacher une like et à commenter
Codes Sources
Avant de commencer à coder, examinons la structure du dossier du projet. Nous créons le dossier du projet appelé - 'Internet Speed'. Dans ce dossier, nous avons trois fichiers index.html, style.css et script.js.
Code HTML
Nous commençons par le code HTML. Copiez le code ci-dessous et collez-le dans votre document HTML.
<!DOCTYPE html>
<html lang="fr">
<tête>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Détecter la vitesse d'Internet</title>
<!-- Feuille de style -->
<link rel="stylesheet" href="style.css" />
</head>
<corps>
<div class="container">
<p id="bits"><span>Vitesse en bits :</span></p>
<p id="kbs"><span>Vitesse en Ko :</span></p>
<p id="mbs"><span>Vitesse en Mb :</span></p>
</div>
<!-- Scénario -->
<script src="script.js"></script>
</body>
</html>
Code CSS
Vous pouvez supprimer le code CSS car je l'ai utilisé uniquement pour rendre la sortie plus présentable :)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(#f4edff 50%, #cd8aff 50%);
}
.container {
width: 350px;
background-color: #ffffff;
padding: 4em 2em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.5em;
font-family: "Poppins", sans-serif;
font-size: 1.2em;
line-height: 2.2em;
box-shadow: 0 1.6em 2.4em rgb(40, 4, 67, 0.3);
}
p {
font-size: 400;
color: #747497;
letter-spacing: 0.02em;
}
span {
font-weight: 500;
color: #090931;
}
Code JavaScript
Ensuite, nous implémentons la logique.
Pour ce faire, nous avons besoin de Javascript.
Nous implémentons une fonctionnalité pour détecter la vitesse d'Internet à l'aide de Javascript. Nous le faisons dans les étapes suivantes :
Créer des références initiales
Créez une variable pour stocker des liens vers des images aléatoires à partir de l'API Unsplash.
Une fonction lorsque l'image se charge.
Obtenir la taille de l'image
Calculez la vitesse.
Nous calculons la vitesse en utilisant le temps de chargement de l'image. Cette heure est calculée en soustrayant l'heure de fin de l'heure de début moins. Pour convertir ce temps en secondes, nous le divisons par mille.
6. Créez une fonction initiale qui calcule l'heure de début. Il attribue également à une source d'image une image aléatoire de l'API Unsplash.
7. Lors du chargement de la fenêtre, appelez init ()
//API: https://source.unsplash.com/random?topics=nature
let startTime, endTime;
let imageSize = "";
let image = new Image();
let bitOutput = document.getElementById("bits");
let kboutput = document.getElementById("kbs");
let mboutput = document.getElementById("mbs");
//PHOTO ALRATOIRE
let imageLink = "https://source.unsplash.com/random?topics=nature";
//Quand l'image charge
image.onload = async function () {
endTime = new Date().getTime();
//Obtenir la longueur de l'image
await fetch(imageLink).then((response) => {
imageSize = response.headers.get("content-length");
calculateSpeed();
});
};
//Calculer la vitesse
function calculateSpeed() {
let timeDuration = (endTime - startTime) / 1000;
//total bots
let loadedBits = imageSize * 8;
let speedInBps = (loadedBits / timeDuration).toFixed(2);
let speedInKbps = (speedInBps / 1024).toFixed(2);
let speedInMbps = (speedInKbps / 1024).toFixed(2);
bitOutput.innerHTML += `${speedInBps}`;
kboutput.innerHTML += `${speedInKbps}`;
mboutput.innerHTML += `${speedInMbps}`;
}
//Initier
const init = async () => {
startTime = new Date().getTime();
image.src = imageLink;
};
window.onload = () => init();
C'est tout pour ce tutoriel.
Si vous rencontrez des problèmes lors de la création de ce code vous pouvez commenter ci-dessous nous vous répondrons
Bon codage !
6 commentaires
Par @RoyalDevelopper
@aliou02