onko HTML5: ssä mahdollista luoda vuorovaikutteinen verkkosivusto useille käyttäjille?
HTML itse ei siihen pysty. Suurin ongelma on, että vaikka vedät pois liikkuvat asiat noin selaimessa (joka saatat pystyä tekemään vain HTML ja CSS, vaikka jos onnistut tekemään sen, se olisi melko eksoottinen käyttö CSS), ei ole mitään keinoa kiertää sitä, että sivustosi jotenkin tarvitsee saada, että tiedot yhdeltä asiakkaalta muille – eli jos siirrän laatikko tietokoneellani, tietokoneen on tiedettävä. Eikä HTML itsessään pysty siihen yksin.
lyhyesti sanottuna tarvitset jonkinlaisen palvelimen; ja tarvitset myös jonkin verran client-side scripting, kanonisesti tehty JavaScript, väline tietojen vaihto asiakkaan puolella asioita.
on monia tapoja suunnitella tämä, ja yksityiskohdat vaihtelevat rajusti, mutta pähkinänkuoressa, mitä sinun täytyy tehdä on tämä:
tilaajalle:
-
käytä JavaScript salpa päälle siirtää tapahtumia näiden laatikoiden.
-
kun laatikko on siirtynyt, lähetä palvelimelle sopiva viesti.
-
Kuuntele samalla palvelimelta tulevia viestejä ja siirrä ruutuja vastaavasti.
kanoninen tekniikka käyttää puhua palvelimelle olisi websockets, mutta jos vaadit, voit myös tehdä sen tavallinen AJAX pyyntöjä, se on vain vähemmän tehokas ja kömpelömpi, koska et voi ”kuunnella” viestejä vain HTTP, sinun täytyy pitää gallups palvelimen. (Eli se on ” do you have a message for me? entä nyt? entä nyt? entä nyt? …”vs.” tell me when you have a message for me, I ’ll wait”).
viestin formaatin pitäisi todennäköisesti perustua JSONIIN – se on rakennettu selaimen Javascriptiin, se ei tunnetusti aiheuta ongelmia johdossa, ja se on yleisimmin käytetty formaatti, joten siellä on hyvä tuki riippumatta siitä, minkä teknologian valitset lopuille pinoillesi. Se ei ole tehokkain sarjatuotantomuoto, mutta emme puhu massiivisista tietomääristä.
varsinaiseen ”moving boxes around” – osaan voisi käyttää joko jotain frontend-kehystä, kuten Reactia, Vueta jne., mutta tällainen asia, mielestäni se on helpompi vain käyttää suoraa DOM manipulointi kautta sisäänrakennettu selain Dom API.
palvelimella:
-
ylläpitää jaettua tietorakennetta, joka kuvaa, missä kukin lohko on.
-
Kuuntele websocket-yhteyksiä.
-
kun uusi asiakas muodostaa yhteyden, lähetä kaikkien lohkojen kannat, pidä yhteys auki.
-
kun asiakas lähettää block position-päivityksen, Päivitä jaettu tietorakenteesi ja lähetä päivitys kaikille yhdistetyille asiakkaille.
sillä ei ole paljon väliä, mitä kieltä ja pino käytät palvelimelle, kunhan siellä on hyvä websocket tuki.
itse asiassa tämä on lähinnä verkkokeskustelu, paitsi että ” chat-viestisi ”ovat laatikkopaikkoja tekstin sijaan, ja sillä käänteellä, että säilytät” keskusteluhistoriaa ”pakatussa muodossa (”nykyinen tilanne” tietorakenne) loputtomiin.
totta kai piru on yksityiskohdissa. Olet tekemisissä jaetun tietorakenteen kanssa, jota käytetään samanaikaisesti, joten sinun on suojattava se kisaolosuhteilta (esim., kun uusi asiakas muodostaa yhteyden, ja toinen asiakas lähettää päivityksen, kun lähetät nykyisen tilan uudelle asiakkaalle, mutta ennen kuin aloitat päivitysten lähettämisen uuteen asiakkaaseen, uusi asiakas ei saa kyseistä päivitystä, ja heidän tilanteensa on ristiriidassa muun verkon kanssa), sinun täytyy huolehtia katkaisuista (ja automaattisesti muodostaa yhteys), sinun täytyy aikakatkaisuja yhteyksissäsi, jotta et vuoda aktiivisia yhteyksiä (ts., sinun täytyy poistaa irrotetut ja ajastetut asiakkaat Palvelimella olevien asiakkaiden luettelosta), sinun täytyy todentaa, sinun täytyy HTTPS (mukaan lukien WebSockets yli HTTPS), sinun täytyy ottaa käyttöön koko asia jonnekin, jne. jne.