WebSockets kaksisuuntaiseen tiedonsiirtoon
Toteuttakaa WebSockets ja ymmärtäkää ne täysdupleksisena viestintäprotokollana, joka soveltuu ihanteellisesti reaaliaikaiseen kaksisuuntaiseen tiedonsiirtoon asiakkaan ja palvelimen välillä.
WebSockets kaksisuuntaiseen tiedonsiirtoon on ilmainen Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-kurssilla on yhteensä 4 oppituntia.
Mitä WebSocketit ovat?
Kuvittele puhelu, jossa molemmat voivat puhua ja kuunnella samanaikaisesti ilman, että puhelua tarvitsee katkaista ja soittaa uudelleen jokaisen lauseen jälkeen. WebSocket-yhteys toimii samalla tavalla!
WebSocketit tarjoavat full-duplex-tiedonsiirtokanavan yhden pitkäkestoisen yhteyden kautta. Tämä tarkoittaa, että data voi kulkea samanaikaisesti molempiin suuntiin, mikä tekee reaaliaikaisesta vuorovaikutuksesta sujuvaa ja tehokasta.
HTTP:n tuolle puolen: kaksisuuntainen tiedonsiirto
Perinteinen HTTP-tiedonsiirto muistuttaa kirjeen lähettämistä ja vastauksen odottamista. Jokainen pyyntö on erillinen.
- HTTP: Asiakas lähettää pyynnön ja palvelin vastauksen. Yhteys suljetaan yleensä.
- WebSocketit: Kun yhteys on muodostettu, asiakas ja palvelin voivat lähettää viestejä toisilleen milloin tahansa ilman uutta pyyntö–vastaus-kierrosta. Yhteys pysyy avoinna.
Tämä pysyvä ja kaksisuuntainen toimintatapa on olennaisen tärkeä reaaliaikaisille päivityksille.
WebSocket-yhteyden muodostaminen
WebSocket-yhteys alkaa tavallisella HTTP-pyynnöllä, mutta pyyntö sisältää erityisen otsakkeen yhteyden "päivittämistä" varten.
Tätä prosessia kutsutaan WebSocket-kättelyksi:
- Asiakas lähettää HTTP-pyynnön, jossa on 'Upgrade'-otsake.
- Palvelin vastaa '101 Switching Protocols' -tilalla.
- Yhteydestä tulee tämän jälkeen pysyvä WebSocket-yhteys.
Kättelyn jälkeen taustalla olevaa TCP-yhteyttä käytetään WebSocket-viestien suoraan vaihtamiseen.
Selaimesi WebSocket API
Verkkoselaimissa WebSocketeja käytetään sisäänrakennetun WebSocket-rajapinnan avulla. Se on JavaScript-olio, joka huolehtii yhteyden yksityiskohdista puolestasi.
Luot uuden WebSocket-instanssin antamalla WebSocket-palvelimesi URL-osoitteen. Tämä URL alkaa yleensä merkkijonolla ws:// salaamattomissa tai wss:// salatuissa yhteyksissä (suojatuissa WebSocket-yhteyksissä).
Yhteyden muodostaminen palvelimeen
Katsotaan, miten selaimesta muodostetaan WebSocket-yhteys. Yhdistämme julkiseen kaikupalvelimeen, joka lähettää yksinkertaisesti takaisin kaiken vastaanottamansa.
Kokeile suorittaa tämä esimerkki. Yhteyden muodostamisen jälkeen sinun pitäisi nähdä 'Connected!'.
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Connect</title>
</head>
<body>
<h1>Connecting...</h1>
<script>
// Use wss:// for secure connections
const socket = new WebSocket('wss://echo.websocket.events');
socket.onopen = () => {
document.querySelector('h1').innerText = 'Connected!';
console.log('WebSocket connection opened');
};
socket.onerror = (error) => {
document.querySelector('h1').innerText = 'Error!';
console.error('WebSocket Error:', error);
};
</script>
</body>
</html>Datan lähettäminen palvelimelle
Kun yhteys on muodostettu, voit lähettää dataa WebSocket-palvelimelle WebSocket-oliosi send()-metodilla. Voit lähettää tekstiä, binääridataa tai jopa JSON-merkkijonoja.
Kirjoita tässä esimerkissä viesti ja napsauta 'Send'. Kaikupalvelin vastaanottaa sen.
<!DOCTYPE html>
<html>
<head>
<title>Send WebSocket</title>
</head>
<body>
<input type="text" id="messageInput" placeholder="Type a message">
<button onclick="sendMessage()">Send</button>
<p id="status"></p>
<script>
const socket = new WebSocket('wss://echo.websocket.events');
socket.onopen = () => {
document.getElementById('status').innerText = 'Connected. Send a message!';
};
function sendMessage() {
const input = document.getElementById('messageInput');
const message = input.value;
if (socket.readyState === WebSocket.OPEN) {
socket.send(message);
document.getElementById('status').innerText = 'Sent: ' + message;
input.value = ''; // Clear input after sending
} else {
document.getElementById('status').innerText = 'Not connected yet!';
}
}
</script>
</body>
</html>Palvelimen päivitysten vastaanottaminen
Voit vastaanottaa palvelimelta viestejä kuuntelemalla message-tapahtumaa socket.onmessage-ominaisuuden avulla. Tapahtumaolio sisältää vastaanotetun datan.
Suorita tämä koodi. Se lähettää viestin yhteyden avautuessa ja näyttää sitten kaikupalvelimen vastauksen.
<!DOCTYPE html>
<html>
<head>
<title>Receive WebSocket</title>
</head>
<body>
<h1>Echo Messages</h1>
<ul id="messages"></ul>
<script>
const socket = new WebSocket('wss://echo.websocket.events');
socket.onopen = () => {
console.log('WebSocket connection opened.');
// Send a message to get a response from the echo server
socket.send('Hello Echo Server!');
};
socket.onmessage = (event) => {
const messageList = document.getElementById('messages');
const newItem = document.createElement('li');
newItem.textContent = 'Received: ' + event.data;
messageList.appendChild(newItem);
};
socket.onerror = (error) => {
console.error('WebSocket Error:', error);
};
</script>
</body>
</html>WebSocket-yhteyksien hallittu sulkeminen
WebSocket-yhteyksien hallinta on hyvä käytäntö. Voit sulkea yhteyden socket.close()-metodilla.
Voit lisäksi kuunnella muita tapahtumia:
socket.onclose: suoritetaan, kun yhteys suljetaan.socket.onerror: suoritetaan, jos yhteyden aikana tapahtuu virhe.
Näiden tapahtumien asianmukainen käsittely auttaa rakentamaan vankkoja reaaliaikaisia sovelluksia.
WebSocketien parhaat käyttökohteet
WebSocketit sopivat täydellisesti sovelluksiin, jotka tarvitsevat välittömiä ja jatkuvia päivityksiä asiakkaiden ja palvelinten välillä. Yleisiä käyttökohteita ovat:
- Reaaliaikaiset chat-sovellukset: Viestit näkyvät heti kaikille osallistujille.
- Reaaliaikaiset urheilutulokset ja osakekurssit: Data päivittyy ilman sivun päivittämistä.
- Moninpelit: Pelitilan ja pelaajien toimintojen synkronointi.
- Yhteismuokkaus: Muiden tekemien muutosten näkeminen reaaliajassa.
Ne tarjoavat tehokkaamman vaihtoehdon palvelimen toistuvalle pollaukselle.
WebSocket-osaamisen testi
Olet oppinut WebSocketeista. Testataan ymmärryksesi!
WebSocketit – yhteenveto
Hienoa työtä! Tässä oppitunnissa tutustuit WebSocketeihin, tehokkaaseen reaaliaikaisen tiedonsiirron tekniikkaan.
- WebSocketit tarjoavat full-duplex- ja kaksisuuntaisen tiedonsiirron.
- Ne muodostavat pysyvän yhteyden HTTP-kättelyn jälkeen.
- Selaimen
WebSocket-rajapinnan avulla voit muodostaa yhteyksiä sekä lähettää ja vastaanottaa viestejä. - WebSocketit sopivat erinomaisesti sovelluksiin, jotka tarvitsevat välittömiä ja jatkuvia päivityksiä.
Seuraavaksi tutustut WebRTC:n datakanavien käytännön sovelluksiin!
Opi Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data) 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
- 12
- Oppitunnit
- 48
Usein kysytyt kysymykset
Onko oppitunti ”WebSockets kaksisuuntaiseen tiedonsiirtoon” ilmainen?
Kyllä – oppitunnin ”WebSockets kaksisuuntaiseen tiedonsiirtoon” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-kurssin, päivitä CoddyKit PROhon. Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”WebSockets kaksisuuntaiseen tiedonsiirtoon”?
Toteuttakaa WebSockets ja ymmärtäkää ne täysdupleksisena viestintäprotokollana, joka soveltuu ihanteellisesti reaaliaikaiseen kaksisuuntaiseen tiedonsiirtoon asiakkaan ja palvelimen välillä. Harjoittelet Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”WebSockets kaksisuuntaiseen tiedonsiirtoon”-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ä Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-oppitunnilla?
Kyllä. Jokainen Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-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
- Reaaliaikainen data ja perinteinen HTTP
- WebSockets kaksisuuntaiseen tiedonsiirtoon
- Server-Sent Events (SSE) yksisuuntaiseen työntöön
- Pitkäkysely ja siirtyminen kohti suoratoistoa