Maitiro eWebSockets Simba Chaiyo-Nguva Mapurogiramu

Nhanganyaya: Kana HTTP Isina Kukwana

Pamwe chete, Bert naErnie, shamwari mbiri dziri kushanda padivi purojekiti yezviroto zvavo: yekutaura app inogonesa hurukuro dzenguva dzezvikwata zvinoshanda kure. Iyo yekumberi-yekupedzisira coder Bert haakwanise kuzvibata sezvo achigovana zvinopenya zvitsva neshamwari yake yekumashure nyanzvi. “Tarirai! Ndinogona kunyora meseji, uye inotumirwa kuseva, uye ndinoona mhinduro ichibuda ipapo ipapo! ” Ernie, the backend guru, anofinyamisa kumeso. “Asi munogadzirisa sei nyaya yevanhu vaviri vari kuedza kukurukura panguva imwe chete? App yako inoramba ichizorodza peji pane kukuita kuti 'uone' hurukuro, izvo zvinoita kuti zvisaite kutaura munguva chaiyo. "

Dambudziko nderekuti app yaBert inoshanda paHTTP umo mutengi anofanira kukumbira kutorwa kubva kuseva. Ernie anopfupisa achiti: “Zvinoita sekuti shamwari dzako dzese dziri kukutumira mameseji, asi wozongoerekana watadza kuona chero mhinduro kutozosvikira wazorodza kuona kana paine meseji nekuti hadzisi kuona meseji yako yekupedzisira kutozosvikira waizorodza uye ndiwo mashandiro anoita HTTP!

Heinoi chikamu chakanakisa: kune yakazara-stack maapuro anoshanda munguva-chaiyo, kune WebSockets. Ichi chikamu chinonakidza kwazvo, saka ngatibatanei naErnie naBert uye tizive kuti WebSockets inoshanda sei, maitiro avo ekuita, kufunga kuseri kwekukosha kwavo, nezvimwe zvakawanda.

Chii chinonzi WebSockets? Kuparadzana Kwevanotanga

WebSockets akafanana nekuenderera kufona pakati pemutengi (web browser) uye sevha. Vanosiyana neHTTP protocol inoshanda nenzira yekuti, "tumira tsamba, mirira mhinduro." NeWebSockets, mapato ese ari maviri anogona kutaura akasununguka sezvaanoda. Zvimiro zveWebSockets zvinosanganisira zvinotevera:

• Yakazara-duplex: Zvinogoneka kuti vese mutengi uye server vatumire data panguva imwe chete.
• Low latency: Hapana kubatwa maoko kwakawandisa kunodzokororwa; data inogona kuyerera zvakasununguka.
• Huremu: Mharidzo idiki iyo inoderedza kushandiswa kwebandwidth.

Muenzaniso: Fungidzira bhodhi remitambo rinogara richivandudza. NeHTTP, mutengi anogara achifanirwa kutumira sevha sekondi yega yega, "Chero chibodzwa chinoshanduka?" NeWebSockets, sevha inozivisa, "GOAL!" pakarepo zvinoitika.

WebSockets vs. HTTP: Chii Chitsva Chitsva?

Bert anogara kumashure ndokukwenya musoro wake. "Asi HTTP inoshanda zvakanaka kune akawanda maapplication. Sei uchifambisa zvibodzwa?" Ernie anoseka zvinyoro nyoro, otora chiratidzo, otanga kunyora chimwe chinhu pabhodhi chena.

“Ngatitangei kubva kumusoro,” anodaro. “Ngatitii zvigadziriso zvehupenyu chaihwo, sezvibodzwa zvemitambo. Vatengi vanofanira kubvunza sevha sekondi yega yega kuti: 'Pane chimwe chinhu chandinofanira kuziva here?' Ndiko kuvhota, saka mumasekonzi makumi matatu oga oga, unofanira kubvunza kuti, 'Tiri kusangana here?' Zvinoseka, kwete? Inoshandisawo bandwidth yakawanda. "

WebSockets shandura izvi:

• Real-time Updates: Data pane server inotumirwa nguva yainochinja; hapana kuvhota kunodiwa.
• Chat application: Hapana kuzorodza peji inodiwa. Mameseji akazara paunonyora.
• Multiplayer vhidhiyo mitambo: Hapasisina stuttery mafambiro. Zviito zvinoratidzwa pamasikirini zvisina musono.

"HTTP yakanyatso hunhu pakubata nezvinhu zvakamira senge blog kana peji yechigadzirwa. Kana zvasvika pakurarama kudyidzana zvakadaro, kubatana kunoenderera kunodiwa. WebSockets. "

Kugadzira A Chaiyo-Nguva Chat App: Izvo Zvakanaka Zvinhu Zvinotanga

Ernie anochenesa magirazi ake. "Saka, ngatiitei chat application yakapusa," Ernie anodaidzira. "Tichava neNode.js server yekumashure uye React app yekumberi. Wagadzirira?"

1. Gadzira Socket.IO Backend

"Bata sevha yeNode.js nekuti uri kuzoida yeSocket.IO chikamu," Ernie anodaro achinyora nekukurumidza:

 npm init -y npm install express socket.io

Sevha kodhi (server.js) :

 const express = require('express'); const http = require('http'); const { Server } = require('socket.io'); const app = express(); const server = http.createServer(app); const io = new Server(server); // Serve static files (like React's build folder) app.use(express.static('public')); // Handle WebSocket connections io.on('connection', (socket) => { console.log('New user connected:', socket.id); // Listen for Incoming messages from the socket socket.on('sendMessage', (message) => { console.log('Received:', message); // Broadcast the message to everyone io.emit('receiveMessage', message); }); // Handle user disconnects events socket.on('disconnect', () => { console.log('User left:', socket.id); }); }); server.listen(3000, () => { console.log('Visit http://localhost:3000 on a browser, Server started successful on port 3000'); });

"Mutengi uye server vanokwanisa kutaurirana nekuda kweSocket.IO's kubata kweWebSocket kubatana. Kana mutengi achidaidza (sendMessage) basa, sevha inotumira meseji kune wese akabatana kuburikidza (io.emit). Zviri nyore, handizvo here?

2. Frontend neReact

“Yava nguva yangu. Ngatitangei kushanda paReact client,” anodaro Bert.

 npx create-react-app chat-client cd chat-client npm install socket.io-client

Chat chikamu (Chat.js) :

 import { useState, useEffect } from 'react'; import io from 'socket.io-client'; // Connect to the server const socket = io('http://localhost:3000'); function Chat() { const [message, setMessage] = useState(''); const [messages, setMessages] = useState([]); useEffect(() => { // Listen for new messages socket.on('receiveMessage', (newMessage) => { setMessages([...messages, newMessage]); }); }, [messages]); const sendMessage = () => { if (message.trim()) { socket.emit('sendMessage', message); setMessage(''); } }; return ( <div style={{ padding: '20px' }}> <div> {messages.map((msg, index) => ( <p key={index}>{msg}</p> ))} </div> <input value={message} onChange={(e) => setMessage(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && sendMessage()} /> <button onClick={sendMessage}>Send</button> </div> ); } export default Chat;

Mashandiro Azvinoita:

• Mameseji anotumirwa nesevha pamusoro peWebSocket kune chero vatengi vane hukama.
• Iyo React application ndeye peji-peji application inokwanisa kuzorodza iyo UI pasina kurodha peji.

Chiedza:

1. Kutanga sevha, isa node server.js mukoni.
2. Kutanga iyo React application, pinda npm tanga mukoni.
3. Nematabo maviri akavhurwa pabrowser, nyora meseji mune imwe tebhu uye cherechedza kuti kanenge ipapo ipapo, imwe tebhu icharatidza meseji imwechete.

Hupenyu Chaiye Hunoshandisa Mienzaniso

Izvi ndizvo zvakarongerwa naBert kuvaka zvichibva pachishandiswa, asi Ernie anoti, "Zvizhinji zvehupenyu chaihwo zvinoda kukanganisa kubata uye nzira yekuwedzera hurongwa hwebudiriro." Ngationei mamwe matambudziko angangoitika.

1. Mutsara Wekubatanidza Inomira

Shandisa nzira yekubatanidzazve muReact mutengi.

 socket.on('disconnect', () => { console.log('Disconnected. Trying to reconnect...'); socket.connect(); // Auto-reconnect });

2. User Identity

Chengetedza WebSocket uchishandisa akatendeseka eJWT tokens.

 // On login, send a token socket.emit('authenticate', { token: 'USER_JWT' }); // Server verifies token socket.on('authenticate', ({ token }) => { if (isValidToken(token)) { socket.authenticated = true; } else { socket.disconnect(); } });

3. Kuyera neRedis

Tanga kutumira mameseji pakati pemaseva akasiyana uchishandisa Redis.

 npm install redis

Server code:

 const redis = require('redis'); const subscriber = redis.createClient(); subscriber.subscribe('chat-channel'); subscriber.on('message', (channel, message) => { io.emit('receiveMessage', message); });

Beyond Chat: Kugadzirisa gwaro rakagovaniswa

Iyi ipfungwa inotevera yaBert - mupepeti akafanana neGoogle Docs. Ernie anoti, "Unogona kushandisa zvigadziko zvewebhu kuti uteerere shanduko dzinoitwa nevanhu vakasiyana uye kuvabatanidza."

Semuyenzaniso :

• Mushandisi A mhando: "Mhoro"

• Mushandisi B anobvisa "o" uye anowedzera ", Nyika"

• Sevha inoteerera kune yega yega keystroke uye inoiparadzira kune vese vatengi, kune avo vakasiyana vatengi kuti vape gwaro RAVAKADZIDZWA.

  
  

Code Snippet :

 // Client sends keystrokes textarea.addEventListener('input', (e) => { socket.emit('textChange', e.target.value); }); // Server broadcasts changes socket.on('textChange', (text) => { io.emit('updateText', text); });

Security Issues

Ernie anotiyambira kuti: "Haufanire kushandisa WebSockets pasina HTTPS/WSS!"

1. Shandisa WSS (WebSocket Yakachengeteka):

 const io = new Server(server, { cors: { origin: "https://yourdomain.com" }, });

2. Simbisa zvese zvinopinda kuitira kuti uchenese chero data rinogona kutungamira kukurwisa kweXSS.

   
   

3. Shandisa muganho wechiyero kune vashandisi vane spamming maitiro.

FAQs

Mubvunzo: Iko kumhanya kweWebSockets kuri nani kupfuura iyo yeHTTP?

A: Hongu! Zvekushandisa ipapo ipapo, maWebSockets ndiwo akanakisa nekuti anobvisa kudiwa kwekuvhota.

Mubvunzo: Zvinoita here kushandisa REST APIs pamwe chete neWebSockets?

A: Hongu, zvirokwazvo! Shandisa WebSockets ine zvigadziriso zvepamoyo uye REST yekuita CRUD mashandiro.

Mubvunzo: Ndinoita sei nekuparara kwe server?

A: Vatengi vanogona kubatana zvakare (ona yekubatanidza pfungwa pamusoro).

Mashoko Okupedzisira

Bert's chat app ikozvino inotamba nechaiyo-nguva runako uye Ernie anonyemwerera nekugutsikana. WebSockets haisi yekutaura chete, asi zvakare inoshandira chinangwa chehupenyu dashboards, mitambo yemitambo, IoT, nezvimwe.

Chijana Chako: Enda mberi uye edza mienzaniso, uiparadze, uye gadzira chimwe chinhu chitsva. Yako chaiyo-nguva mapurogiramu akamirira!