WebSocket-yhteyden avaaminen
Muodostakaa yhteys WebSocket-palvelimeen.
WebSocket-yhteyden avaaminen on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.
Mitä WebSocketit ovat?
WebSocketit tarjoavat selaimen ja palvelimen välille pysyvän, täysdupleksisen yhteyden yhden TCP-yhteyden kautta. Toisin kuin HTTP:n pyyntö–vastaus-mallissa, kumpi tahansa osapuoli voi lähettää viestejä milloin tahansa — tämä sopii erinomaisesti keskusteluihin, reaaliaikaisiin syötteisiin ja peleihin.
ws- ja wss-skeemat
WebSocket-URL-osoitteissa käytetään skeemaa ws:// (salaamaton) tai wss:// (TLS-salattu). Suosikaa tuotannossa aina wss://-skeemaa aivan kuten https-protokollaa.
const url = "wss://example.com/socket";Yhteyden luominen
Luokaa socket yhteydellä new WebSocket(url). Kättely alkaa välittömästi, mutta yhteys ei ole valmis ennen kuin se avautuu.
const socket = new WebSocket("wss://example.com/socket");
console.log(socket.url);onopen-tapahtuma
onopen suoritetaan, kun kättely on valmis. Vasta sen jälkeen tietojen lähettäminen on turvallista.
socket.onopen = (event) => {
console.log("Connection established");
socket.send("Hello server");
};addEventListener-vaihtoehto
Voitte käyttää addEventListener-funktiota on*-ominaisuuksien sijaan useiden käsittelijöiden liittämiseen.
socket.addEventListener("open", () => {
console.log("open via listener");
});Yhteyden readyState
readyState ilmoittaa elinkaaren vaiheen: CONNECTING (0), OPEN (1), CLOSING (2), CLOSED (3).
if (socket.readyState === WebSocket.OPEN) {
socket.send("ready!");
}Aliprotokollat
Toisella argumentilla neuvotellaan aliprotokolla. Palvelin valitsee yhden, ja voitte lukea ominaisuuden socket.protocol yhteyden avauduttua.
const s = new WebSocket("wss://example.com", ["chat", "v2.chat"]);
s.onopen = () => console.log("Using", s.protocol);Sama alkuperä ja sekasisältö
https-protokollalla ladattu sivu voi avata vain wss://-yhteyksiä — ws://-yhteyden avaaminen estetään sekasisältönä. Suunnitelkaa URL-osoitteet tämän mukaisesti.
Binäärityyppi
Asettakaa binaryType-ominaisuuden arvoksi "blob" (oletus) tai "arraybuffer", jotta voitte määrittää, miten binäärikehykset vastaanotetaan.
socket.binaryType = "arraybuffer";Pienin toimiva asiakas
Kootaan kokonaisuus: avataan yhteys, kirjataan tila ja siivotaan resurssit.
const socket = new WebSocket("wss://example.com/socket");
socket.onopen = () => console.log("opened");
socket.onclose = () => console.log("closed");Yhteyden aikakatkaisut
WebSocketeissa ei ole sisäänrakennettua yhteyden muodostamisen aikakatkaisua. Käyttäkää ajastinta, joka sulkee socketin, jos onopen-tapahtumaa ei ole suoritettu ajoissa.
const socket = new WebSocket(url);
const timer = setTimeout(() => {
if (socket.readyState !== WebSocket.OPEN) socket.close();
}, 5000);
socket.onopen = () => clearTimeout(timer);Pikatarkistus
Testatkaa yhteyden muodostamisen perusteet.
Kertaus: yhteyden avaaminen
Opitte ws- ja wss-skeemat, loitte socketin komennolla new WebSocket, käsittelitte tapahtuman onopen, tarkistitte ominaisuuden readyState, neuvottelitte aliprotokollia ja lisäsitte yhteyden muodostamisen aikakatkaisun. Seuraavaksi: viestien lähettäminen ja vastaanottaminen.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 59
- Oppitunnit
- 200
Usein kysytyt kysymykset
Onko oppitunti ”WebSocket-yhteyden avaaminen” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “WebSocket-yhteyden avaaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”WebSocket-yhteyden avaaminen”?
Muodostakaa yhteys WebSocket-palvelimeen. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”WebSocket-yhteyden avaaminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?
Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- WebSocket-yhteyden avaaminen
- Viestien lähettäminen ja vastaanottaminen
- Yhteyden elinkaari ja virheet
- Uudelleenyhdistämisstrategiat