React Academy · Oppitunti

Socket.IO:n käyttäminen Reactin kanssa

Yhdistäkää React Socket.IO-palvelimeen, kuunnelkaa tapahtumia ja lähettäkää viestejä hookeista.

Oppitunti 2/413 vaihetta

Socket.IO:n käyttäminen Reactin kanssa on ilmainen React Academy-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 React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Miksi Socket.IO?

Socket.IO lisää WebSocketien päälle huoneet, nimiavaruudet, automaattisen uudelleenyhdistämisen ja tapahtumapohjaisen viestinnän sekä varmistaa toiminnan HTTP:n long polling -varamenetelmällä — se on huomattavasti helppokäyttöisempi kuin raaka WebSocket.

Asiakkaan asentaminen

Asentakaa Socket.IO-asiakasohjelman paketti.

npm install socket.io-client

Socket-instanssin luominen

Kutsukaa io(url)-funktiota React-komponenttien ulkopuolella, jotta yhteys jaetaan eikä sitä luoda uudelleen jokaisella renderöintikerralla. Viekää se singleton-instanssina.

// src/lib/socket.ts
import { io } from 'socket.io-client';

export const socket = io('https://api.example.com', {
  autoConnect: false, // connect manually
  withCredentials: true,
});

Yhdistäminen useEffect-funktiossa

Muodostakaa yhteys komponentin liittämisen yhteydessä ja katkaiskaa se komponentin poiston yhteydessä, jotta käyttämättömiä yhteyksiä ei jää avoimiksi.

useEffect(() => {
  socket.connect();

  return () => {
    socket.disconnect();
  };
}, []);

Tapahtumien kuunteleminen

Tilatkaa tapahtuman kuuntelijaksi socket.on('event', handler). Poistakaa kuuntelija cleanup-funktiossa, jotta uudelleenrenderöinti ei lisää päällekkäisiä käsittelijöitä.

useEffect(() => {
  function onMessage(data) {
    setMessages(prev => [...prev, data]);
  }

  socket.on('message', onMessage);

  return () => {
    socket.off('message', onMessage);
  };
}, []);

Tapahtumien lähettäminen

Lähettäkää tietoja palvelimelle kutsumalla socket.emit('event', data)-funktiota. Viimeisenä argumenttina voidaan halutessanne antaa callback-funktio (kuittaus).

function sendMessage(text) {
  socket.emit('message', { text, timestamp: Date.now() }, (ack) => {
    console.log('Server acknowledged:', ack);
  });
}

Mukautettu useSocket-hook

Koostakaa socket-yhteyden logiikka mukautettuun hookiin, jotta sitä voidaan käyttää uudelleen eri komponenteissa.

function useSocket(event, handler) {
  useEffect(() => {
    socket.on(event, handler);
    return () => socket.off(event, handler);
  }, [event, handler]);
}

// Usage:
useSocket('message', (data) => setMessages(m => [...m, data]));

Huoneet ja nimiavaruudet

Liittykää huoneeseen lähettämällä join-tapahtuma (palvelin käsittelee sen). Nimiavaruuksilla (io('/chat')) socket-liikenne voidaan jakaa yhteystasolla erillisiin osiin.

// Join a room
socket.emit('join-room', 'room-123');

// Connect to a namespace
const chatSocket = io('https://api.example.com/chat');

Yhteyden tila

Seuratkaa yhteyden tilaa connect-, disconnect- ja connect_error-tapahtumien avulla.

const [isConnected, setIsConnected] = useState(socket.connected);

useEffect(() => {
  socket.on('connect', () => setIsConnected(true));
  socket.on('disconnect', () => setIsConnected(false));
  return () => {
    socket.off('connect');
    socket.off('disconnect');
  };
}, []);

Volatile-tapahtumat

Käyttäkää socket.volatile.emit()-funktiota viesteille, joiden satunnainen menettäminen on hyväksyttävää (esimerkiksi kohdistimen sijainnit tai pelin tila).

// Position updates — OK to lose some
function onMouseMove(e) {
  socket.volatile.emit('cursor', { x: e.clientX, y: e.clientY });
}

Socket.IO ja raaka WebSocket

Socket.IO lisää WebSocketin päälle huoneiden hallinnan, nimiavaruudet, automaattisen uudelleenyhdistämisen ja binäärituen. Käyttäkää raakaa WebSocketia, jos tarvitsette mahdollisimman vähän ylimääräistä kuormaa tai palvelin ei tue Socket.IO:ta.

Pikatarkistus

Miksi Socket.IO-tapahtumien kuuntelijat pitäisi poistaa useEffectin cleanup-funktiossa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Luokaa singleton-socket-instanssi käyttämällä io(url, { autoConnect: false })-rakennetta. Yhdistäkää ja katkaiskaa yhteys useEffect-funktiossa, poistakaa kuuntelijat aina cleanup-funktiossa ja lähettäkää tapahtumia socket.emit()-funktiolla. Koostakaa logiikka mukautettuun hookiin uudelleenkäyttöä varten.

Aloita maksutta

Opi React 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: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Socket.IO:n käyttäminen Reactin kanssa” ilmainen?

Kyllä – oppitunnin ”Socket.IO:n käyttäminen Reactin kanssa” 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 React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Socket.IO:n käyttäminen Reactin kanssa”?

Yhdistäkää React Socket.IO-palvelimeen, kuunnelkaa tapahtumia ja lähettäkää viestejä hookeista. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Socket.IO:n käyttäminen Reactin kanssa”-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ä React Academy-oppitunnilla?

Kyllä. Jokainen React 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

WebSocketien perusteet selaimessa
Socket.IO:n käyttäminen Reactin kanssa
Reaaliaikaisen chat-komponentin rakentaminen
Uudelleenyhdistäminen, virheenkäsittely ja siivous

← Takaisin: React Academy