Speed Test

Install speed-test

Was playing around with live data update on panels and wanted to see how one can customise the show() panel a bit, so I wrote this script to check internet download/upload speed.

import "@johnlindquist/kit";

// Menu: Speed Test
// Description: Test the speed and performance of your internet connection
// Author: Altrim Beqiri
// Twitter: @altrimbeqiri

const speedTest = await npm("speedtest-net");

interface SpeedTestResult {
  timestamp: Date;
  ping: { jitter: number; latency: number };
  download: { bandwidth: number; bytes: number; elapsed: number };
  upload: { bandwidth: number; bytes: number; elapsed: number };
  packetLoss: number;
  isp: string;
  interface: {
    internalIp: string;
    name: string;
    macAddr: string;
    isVpn: boolean;
    externalIp: string;
  };
  server: {
    id: number;
    name: string;
    location: string;
    country: string;
    host: string;
    port: number;
    ip: string;
  };
  result: {
    id: string;
    url: string;
  };
}

const progressPanelInfo = ({ downloadSpeed = 0, uploadSpeed = 0 }: { downloadSpeed: number; uploadSpeed: number }) => {
  return `
  <div class="flex flex-col p-4">
    <p class="mb-2 text-xl font-mono text-center text-yellow-500" style="font-variant-numeric: tabular-nums;">
     ${downloadSpeed.toFixed(2)} Mbps &darr; </p>
    <p class="text-xl text-center font-mono text-yellow-500" style="font-variant-numeric: tabular-nums;">
     ${uploadSpeed.toFixed(2)} Mbps &uarr;</p>
  </div>
`;
};
const showResultsPanel = ({
  datacenter,
  downloadSpeed,
  uploadSpeed,
}: {
  datacenter: string;
  downloadSpeed: number;
  uploadSpeed: number;
}) => {
  show(
    `
<div class="px-2 py-2 mx-auto">
  <h3 class="text-center bg-clip-text text-green-400" style="background-image: linear-gradient(45deg, #2ed1c1, #3a86f4); color: transparent; -webkit-background-clip:text">Datacenter ${datacenter}</h3>
  <div class="grid grid-cols-2" style="gap: 1rem;">
    <div class="flex flex-col justify-center p-4 bg-gray-800 rounded">
        <p class="text-3xl font-semibold font-mono text-center text-white">${downloadSpeed.toFixed(2)}</p>
        <p class="text-2xl font-semibold text-center text-gray-300">Mbps</p>
        <p class="text-center text-gray-400">Download</p>
    </div>

    <div class="flex flex-col justify-center p-4 bg-gray-800 rounded">
        <p class="text-3xl font-semibold font-mono text-center text-white">${uploadSpeed.toFixed(2)}</p>
        <p class="text-2xl font-semibold text-center text-gray-300">Mbps</p>
        <p class="text-center text-gray-400">Upload</p>
    </div>
  </div>
</div>
`,
    { width: 640, height: 170, transparent: true }
  );
};

try {
  let downloadSpeed = 0;
  let uploadSpeed = 0;

  div(progressPanelInfo({ downloadSpeed, uploadSpeed }));

  const testResult: SpeedTestResult = await speedTest({
    acceptLicense: true,
    acceptGdpr: true,
    progress: (progress: any) => {
      if (progress.type === "download") {
        downloadSpeed = progress.download.bandwidth / 131072;
      }
      if (progress.type === "upload") {
        uploadSpeed = progress.upload?.bandwidth / 131072;
      }
      setPanel(progressPanelInfo({ downloadSpeed, uploadSpeed }));
    },
  });

  downloadSpeed = testResult.download.bandwidth / 131072;
  uploadSpeed = testResult.upload.bandwidth / 131072;
  let datacenter = `${testResult.server.name} ${testResult.server.location} - ${testResult.server.country}`;

  showResultsPanel({ datacenter, downloadSpeed, uploadSpeed });
} catch (err: any) {
  console.log(err.message);
}