Collaborazione in tempo reale sul tuo sito web con TogetherJS

Non si può negare che la collaborazione in tempo reale sia diventata una parte importante del web moderno. Google Drive è un ottimo esempio di come la collaborazione simultanea e in tempo reale sia un modo essenziale per fare lavoro online in questi giorni. Nell'applicare lo stesso concetto, Mozilla Labs ha introdotto il proprio strumento chiamato TogetherJS, una libreria JavaScript basata su HTML5 per fornire facilmente collaborazione in tempo reale tra gli utenti.

TogetherJS consente a tutti gli utenti coinvolti di vedere reciprocamente la posizione del mouse / cursore, la posizione di scorrimento e i clic . La sincronizzazione è disponibile per modificare moduli e riprodurre / mettere in pausa i video. Ai fini della comunicazione, gli utenti possono anche chattare usando testo e audio.

Dietro TogetherJS

Inizialmente, TogetherJS è iniziato come servizio per consentire agli utenti di collaborare in tempo reale a TowTruck. È stato rilasciato da Mozilla Labs nell'aprile 2013. Ma quando il prodotto è cresciuto oltre il suo concetto originale, ha deciso di cambiare il nome.

TogetherJS dipende dalla tecnologia WebSockets per la sua comunicazione interattiva tra i diversi browser utente. Esiste un server hub per la sua implementazione principale che farà eco ai messaggi ricevuti a tutti i partecipanti. Qui è dove gli utenti possono vedere i cursori degli altri e scorrere posizioni e clic. Il server hub predefinito è ospitato da Mozilla, ma se lo desideri, puoi anche ospitare il tuo.

Per le funzionalità di chat audio, WebRTC è la cosa che aiuta. Se vuoi saperne di più sulla tecnologia che c'è dietro, vai alla pagina di panoramica della tecnologia.

uso

Per mostrarti come usare TogetherJS, userò le sue app di esempio. E per mostrare questo per utenti diversi, lo dimostrerò su due diversi browser (Chrome e Firefox) contemporaneamente. Iniziamo!

La prima volta che avvii TogetherJS, ti verrà richiesto un wizard guida . Questa procedura guidata ti assiste con tutte le funzionalità disponibili prima di iniziare. Puoi sempre saltarlo in qualsiasi momento, se preferisci.

Nella procedura guidata della guida, imposta il tuo nome, carica un avatar e cambia il colore del tuo profilo. Questo è facoltativo, in quanto è possibile farlo anche successivamente nel pannello TogetherJS.

Sul lato destro, dovresti vedere il pannello TogetherJS . In questo pannello puoi aggiornare il tuo profilo, ottenere il link per la tua collaborazione e chattare con testo o audio. Per invitare un amico, fai clic sul menu "Aggiungi un amico" (come mostrato sotto), copia il link e invialo al tuo amico.

Gli amici che si uniranno a te avranno i loro avatar visualizzati nella parte inferiore del pannello. Da qui, tutto ciò che tu o i tuoi amici digitate, fate clic, spostate o scorrete verranno sincronizzati con la vostra vista.

Come puoi vedere qui di seguito, ogni volta che i tuoi amici cliccano o spostano il mouse, questo verrà mostrato sulla tua pagina con un'animazione del cursore che ha il loro nome accanto.

Quando i tuoi amici scorrono la loro pagina, il loro cursore sarà rivolto verso il basso, come nel seguente screenshot (solo su Chrome però).

Per comunicare con il tuo amico, puoi utilizzare le funzioni di chat: chat basate su testo o audio. Ma tieni presente che la funzione di chat audio è ancora in fase sperimentale.

Installazione

Per installare TogetherJS, devi solo aggiungere un paio di linee di codice al tuo codice HTML. Innanzitutto, includi il seguente snippet prima del tag di chiusura del tuo body :

Puoi anche scaricare l'origine e ospitarla nel tuo server, se lo desideri.

Questo è tutto! Ora hai TogetherJS sul tuo sito e sarà attivo dopo che il browser ha terminato di ricaricare la pagina. Ad ogni modo, questo funziona solo dopo che gli utenti fanno clic sul pulsante. Basta aggiungere il codice qui sotto dove vuoi:

 Inizia insiemeJS 

Per configurazioni più avanzate e altre configurazioni, visita la pagina della documentazione.

Conclusione

TogetherJS è utile per coloro che hanno bisogno di funzionalità collaborative per la loro pagina web o progetto web per mantenere i loro collaboratori online sulla stessa pagina. Il fatto che TogetherJS consenta a questa funzionalità di essere disponibile su qualsiasi sito e su più browser è una funzione potente di cui possiamo trarre vantaggio. Ci sono buoni esempi della sua implementazione a JSFiddle e Pixelreka che puoi verificare per vedere il suo potenziale.

Come personalizzare Windows 10 Startup / Welcome Sound

In un post precedente, ho evidenziato alcuni modi con cui è possibile gestire i programmi di avvio in Windows. Ma lo sapevate che è possibile personalizzare il jingle di avvio di Windows con un messaggio personalizzato ? Se no, allora questo post ti dirà come farlo.Puoi impostare un messaggio di benvenuto personalizzato, un promemoria importante, un messaggio motivazionale o persino fare scherzi a tuo fratello impostando un messaggio personalizzato sul suo PC. Q

(Consigli tecnici e di design)

5 suggerimenti per irrigidire la sicurezza di accesso WordPress

Indipendentemente dalle dimensioni del tuo sito web, perdere i dati del tuo sito o non poter accedere al tuo sito web può essere un'esperienza snervante. WordPress, che alimenta oltre il 25% del Web, è uno dei siti Web più mirati per gli hacker.Nei nostri post precedenti, ti abbiamo mostrato una serie di suggerimenti e trucchi che già coprivano quasi tutto per proteggere il tuo sito Web WordPress . Tu

(Consigli tecnici e di design)