WebTeil Studio - Tvorba moderných webov

Predpoklady

Skôr než začneme, uistite sa, že máte vo svojom systéme nainštalovaný nasledujúci softvér. Tieto nástroje sú nevyhnutné na vývoj a spustenie aplikácie, ktorú budeme vytvárať:

Node.js: Runtime prostredie potrebné na spúšťanie JavaScriptu na strane servera. Stiahnite si ho z oficiálnej stránky Node.js.
NPM: Správca balíkov pre Node.js, ktorý sa používa na inštaláciu knižníc ako React. Je súčasťou Node.js.
Vite: Build nástroj, ktorý uľahčuje vytvorenie (scaffolding) nových projektov a ich lokálne spúšťanie. Nainštalujte ho globálne príkazom npm install -g create-vite.
Visual Studio Code: Ľahký, ale výkonný editor zdrojového kódu pre desktop. Stiahnite si ho z oficiálnej stránky Visual Studio Code.
Zdrojový kód: Zdrojové súbory k tomuto tutoriálu nájdete na GitHub.

Vytvorenie servera s Express.js a Socket.io

Socket.io je JavaScript knižnica, ktorá umožňuje real-time, obojsmernú a eventovo riadenú komunikáciu medzi webovými klientmi a servermi. Je postavená nad protokolom WebSockets a poskytuje jednoduché API na odosielanie a prijímanie správ medzi klientmi a servermi.

Express.js je minimalistický a flexibilný Node.js framework pre webové aplikácie, ktorý poskytuje robustnú sadu funkcií pre webové aj mobilné aplikácie. Je navrhnutý tak, aby zjednodušil a zrýchlil tvorbu webových aplikácií a API.

Začnite tým, že vytvoríte nový priečinok server a inicializujete nový npm projekt:

mkdir server
cd server
npm init -y  # Automatically agree to default settings

Nainštalujte potrebné balíky príkazom: npm install express socket.io cors nodemon.

Express: Framework pre web server.
Socket.io: Umožňuje real-time obojsmernú komunikáciu.
CORS: Middleware, ktorý umožňuje cross-origin požiadavky.
Nodemon: Vývojový nástroj, ktorý automaticky reštartuje server pri zmenách v kóde.

Vytvorte súbor index.js s nasledujúcim nastavením servera:

const express = require("express");
const cors = require("cors");
const app = express();
const port = 3000;
const messages = ["Initial message from server"]; // Holds the messages on the server

// Enabling CORS for any unknown origin
app.use(cors());

const server = app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

const io = require("socket.io")(server, { cors: { origin: "*" } });

// Listen for new connection
io.on("connection", (socket) => {
  console.log(`User connected ${socket.id}`);

  // Send the messages to the client
  socket.emit("messages", { messages }); // First parameter is the event name, second is the data

  // Listen for new message from the client
  socket.on("newMessage", (data) => {
    messages.push(data);
    io.emit("messages", { messages }); // Send the updated messages to all clients
  });

  // Listen for disconnection
  socket.on(,  {
    .();
  });
});

Socket.io vyžaduje HTTP server (napríklad Express.js) a bude na ňom bežať.

CORS je nakonfigurovaný tak, aby povoľoval požiadavky z ľubovoľného originu, čo je užitočné vo vývojovom prostredí, kde klient a server bežia oddelene.

Server počúva na pripojenie klienta. Keď sa klient pripojí, server mu odošle všetky správy uložené na serveri pomocou eventu messages.

Keď server prijme správu od klienta s eventom newMessage, uloží ju a následne aktualizuje všetkých klientov (opäť cez messages).

Keď máte všetko pripravené, môžete spustiť serverovú časť aplikácie príkazom nodemon index.js.

Server môžete otestovať cez Postman tak, že zvolíte protokol SocketIO a nastavíte názvy eventov. Server beží na adrese http://localhost:3000.

Vytvorenie klienta s React

React je populárna JavaScript knižnica na tvorbu používateľských rozhraní. Umožňuje vývojárom vytvárať znovupoužiteľné UI komponenty a efektívne spravovať stav aplikácie.

Po nastavení servera môžeme prejsť na vytvorenie klienta v Reacte. Na scaffolding projektu použijeme Vite, pretože je rýchly a jednoduchý na použitie. Spustite npm create vite@latest client -- --template react, čím vytvoríte nový projekt v priečinku client. V tomto priečinku potom spustite npm install, aby ste nainštalovali všetky závislosti. Následne doinštalujte Socket.io klienta npm install socket.io-client a komponentovú knižnicu Chakra UI npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion, aby aplikácia vyzerala lepšie. Vite scaffolding obsahuje predvolené CSS, ktoré nahradíme vlastným v App.js:

import { useEffect, useState } from "react";
import "./App.css";
import openSocket from "socket.io-client";
import {
  Container,
  Text,
  Input,
  Button,
  ChakraProvider,
  Flex,
  Stack,
} from "@chakra-ui/react";

function App() {
  const [newMessage, setNewMessage] = useState("");
  const [messages, setMessages] = useState([]);
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const socketInstance = openSocket("http://localhost:3000"); // Connect to the server
    setSocket(socketInstance);

    socketInstance.on("connect", () => {
      console.log("Connected to server");
    });

    socketInstance.on("messages", (data) => {
      setMessages(data.messages);
    });

    return () => {
      socketInstance.disconnect(); // Clean up the socket connection
    };
  }, []);

  const handleSendMessage = () => {
    socket.(, newMessage);
    ();
  };

   (
    
  );
}

  ;

V useEffect() hooku sa pripájame na server a počúvame správy. Keď sa komponent odmountuje, odpojíme sa od servera.

Keď používateľ klikne na tlačidlo Send, správa sa odošle na server s eventom newMessage. Správa sa uloží na serveri a všetci klienti sa aktualizujú novým zoznamom správ.

Teraz sme pripravení spustiť aplikáciu príkazom npm run dev, ale predtým sa uistite, že beží aj server. Môžete si otvoriť viac kariet v prehliadači na http://localhost:5173/ a uvidíte, že správy sa aktualizujú real-time pri každej zmene.

Broadcastovanie správ

Broadcastovanie správ je dôležitý koncept v Socket.io. Rozdiel medzi socket.emit(), io.emit() a io.on(), socket.on() spočíva najmä v rozsahu (scope) odosielania a počúvania správ.

io.on() počúva eventy na globálnom objekte io, najmä na spracovanie nových pripojení. Používa sa na širšie serverové udalosti.

socket.on() počúva eventy na konkrétnom socket spojení. Používa sa v kontexte jedného konkrétneho klienta pripojeného na server.

io.emit() odošle správu všetkým klientom pripojeným na server. Používa sa vtedy, keď chcete broadcastovať správu všetkým súčasne.

socket.emit() odošle správu iba konkrétnemu klientovi pripojenému cez daný socket. Je to užitočné, keď chcete komunikovať priamo s jedným klientom.

Záver

V tomto tutoriáli sme si ukázali, ako vytvoriť jednoduchú real-time chat aplikáciu pomocou Socket.io, Reactu a Express.js. Prešli sme si nastavenie servera s Express a Socket.io, vytvorenie klienta v Reacte a základy broadcastovania správ.

Ak vám bol tento tutoriál užitočný, pokojne ho zdieľajte s ďalšími, ktorým by mohol pomôcť. A ako vždy, ak potrebujete pomoc alebo máte návrhy, zanechajte komentár alebo otázku nižšie.