Hoppa till innehåll

Utmaningar

Nedan finns sex frågor om WebSocket och webbläsarens API:er. Frågorna bygger på artiklarna Realtid med WebSocket och Webbläsarens API:er.

Varje fråga har ett antal alternativ att välja bland. Klicka på “Visa lösning” för att se svaret och förklaringen.

Om du är osäker kan du alltid testa själv i webbläsarens konsol, eller ta upp frågan på en handledning.

Fråga 17-01: Skicka direkt

Section titled “Fråga 17-01: Skicka direkt”
const socket = new WebSocket('wss://example.com/chat')
socket.send('Hej')

Vad händer?

  1. Meddelandet läggs i kö och skickas när anslutningen är öppen.
  2. send() kastar ett InvalidStateError, eftersom anslutningen inte är öppen än.
  3. Meddelandet försvinner utan felmeddelande.
  4. Konstruktorn väntar tills anslutningen är öppen, så meddelandet skickas direkt.

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 2. Konstruktorn väntar inte på handskakningen, så readyState är CONNECTING när send() anropas. Lägg det som ska skickas direkt i en lyssnare på open.

Alternativ 3 beskriver vad som händer om du anropar send() när anslutningen är stängd eller håller på att stängas.

Fråga 17-02: Polling eller WebSocket

Section titled “Fråga 17-02: Polling eller WebSocket”

Vilket av följande är det starkaste skälet att välja WebSocket framför polling med fetch()?

  1. WebSocket använder andra portar än HTTP och kommer därför lättare igenom brandväggar.
  2. Med WebSocket behöver inget skickas från klienten.
  3. Servern kan skicka så fort det finns något nytt, utan att klienten behöver fråga.
  4. WebSocket går igenom service workern och kan därför fungera offline.

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 3. När anslutningen är öppen kan båda sidor skicka när de vill, så klienten behöver inte fråga och servern slipper svara att inget har hänt.

WebSocket använder samma portar som HTTP, vilket är just därför den kommer igenom brandväggar, så alternativ 1 stämmer inte. Den går inte heller genom service workern, så alternativ 4 är fel.

Fråga 17-03: Texten från andra

Section titled “Fråga 17-03: Texten från andra”

Ett chattmeddelande visas med item.innerHTML = message.data. Vad är problemet?

  1. Inget, eftersom meddelanden som kommer över wss:// är krypterade.
  2. Ett meddelande med HTML kan köra JavaScript hos alla som läser det.
  3. innerHTML fungerar inte i en shadow DOM.
  4. Långa meddelanden kapas.

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 2. Text som tolkas som HTML kan innehålla till exempel en bild med onerror, och koden körs då hos alla mottagare. Det är cross-site scripting. Använd textContent.

Kryptering skyddar bara mot den som lyssnar på vägen, inte mot avsändaren, så alternativ 1 stämmer inte.

Fråga 17-04: Komponenten som flyttas

Section titled “Fråga 17-04: Komponenten som flyttas”

En komponent öppnar en WebSocket i connectedCallback() och stänger den i disconnectedCallback(). Vad händer med anslutningen när komponenten flyttas med otherParent.append(component)?

  1. Inget, eftersom elementet finns kvar i DOM:en hela tiden.
  2. Anslutningen stängs och en ny öppnas.
  3. Anslutningen stängs och öppnas aldrig igen.
  4. Webbläsaren kastar ett fel eftersom elementet redan har en förälder.

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 2. Elementet tas först bort och sätts sedan in, så både disconnectedCallback() och connectedCallback() körs. Därför är z-index ett bättre sätt att lägga ett fönster överst i ett PWD än att flytta det i DOM:en.

Fråga 17-05: Secure context

Section titled “Fråga 17-05: Secure context”

Vite körs med --host, och sidan öppnas på http://192.168.1.20:5173. Vad är navigator.clipboard?

  1. Ett Clipboard-objekt, precis som på localhost.
  2. undefined, eftersom sidan inte är ett secure context.
  3. Ett objekt, men alla anrop blir rejected tills användaren har gett behörighet.
  4. null, eftersom Clipboard API kräver att applikationen är installerad.

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 2. localhost räknas som säkert, men inte en vanlig IP-adress över HTTP. API:er som kräver secure context finns då inte alls, och koden behöver klara det.

Fråga 17-06: Canvas

Section titled “Fråga 17-06: Canvas”

En <canvas width="300" height="150"> får i CSS width: 600px. En rektangel ritas med context.fillRect(0, 0, 150, 150). Vad ser användaren?

  1. En rektangel som är 150 CSS-pixlar bred, skarp som vanligt.
  2. En rektangel som täcker halva ritytan och är uppskalad, och därför kan se suddig ut.
  3. Ingenting, eftersom storleken i CSS måste stämma med attributen.
  4. En rektangel som täcker en fjärdedel av ritytan.

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 2. Attributen anger ritytans storlek i pixlar, och CSS skalar bara resultatet. Rektangeln täcker 150 av 300 pixlar i ritytan, alltså halva, och visas 300 CSS-pixlar bred.

CCBY