Hacki na…

').append(img);

var text= $('

').html($.trim(item.text));

div.append(text);

div.attr('class','tweet');

$('#listDiv').append(item.from_user);

$('#list').append(div);

}

}

Ale wyprzedzamy siebie, więc najpierw wyślijmy prośbę do Twittera z poziomu naszego pracownika. Nasz skrypt roboczy jest dość prosty. Musimy skonfigurować funkcję zwrotną, którą przekażemy w ramach naszego żądania do Twittera. W ramach naszego wywołania zwrotnego po prostu przekażemy obiekt z powrotem do głównego wątku, aby zbudować interfejs użytkownika. Później zbadamy niektóre możliwości przetwarzania danych z Twittera, ale na razie po prostu przekażemy pełny obiekt z powrotem do głównego wątku.

var callback = function (obj) {

if (obj.hasOwnProperty("results")) {

// process the data

postMessage(obj);

} else {

postMessage("No results.");

}

};

Zgłoszenie żądania jest proste i obejmuje połączenie JSONP i importScripts ().

JSONP

JSONP lub JSON z dopełnieniem to technika używana do obejścia tej samej zasady pochodzenia przeglądarki w celu pobierania kodu JavaScript z innej domeny. Serwer API JSONP odczyta parametr żądania wywołania zwrotnego i zawinie odpowiedź w formacie JSON w ramach tej funkcji. Technika następnie wykorzystuje sposób, w jaki przeglądarka interpretuje i wykonuje JavaScript, gdy tag skryptu jest generowany dynamicznie i dołączany do DOM. Jak wspomniałem w innych hackach dotyczących pracowników sieci Web, nasz wątek roboczy jest ograniczony, ponieważ nie mamy dostępu do DOM, ale mamy dostęp do specjalnej funkcji importScripts (). Zadzwońmy więc do interfejsu API Twittera, aby uzyskać 100 najnowszych tweetów z html5 jako zapytaniem. Zwróć uwagę na parametr callback i odwołanie do funkcji callback.

importScripts ("http://search.twitter.com/search.json?

q = html5 & rpp = 100 & since_id = 1 & callback = callback ");

Oto ostateczny kod pracownika sieci:

var callback = function (obj) {

if (obj.hasOwnProperty("results")) {

// process data

postMessage(obj);

} else {

postMessage("No results.");

}

};

importScripts("http://search.twitter.com/search.json?

q=html5&rpp=100&since_id=1&callback=callback");

Jak wspomniałem wcześniej, jest to bardzo prosty przykład. Takie podejście może być bardzo wydajne w przypadku przetwarzania danych API w ramach pracownika internetowego. Często programiści będą chcieli zmienić format danych w pliku roboczym, a następnie przekazać złożone lub nawet mniejsze części oryginalnych danych z powrotem do głównego wątku. Teraz Ty też możesz.

Hack No.70

Połącz się ze współdzielonymi pracownikami jednocześnie z wielu okien przeglądarki

Dedykowani pracownicy sieciowi są bezpośrednio powiązani z ich odpowiednimi skryptami startowymi, ale współużytkowani pracownicy sieciowi pozwalają dowolnej liczbie kontekstów okien przeglądarki na jednoczesną komunikację z jednym pracownikiem. Jak zobaczysz w tym hacku, współdzieleni pracownicy implementują nieco inny interfejs API, ale ogólnie koncepcje są bardzo podobne. Podobnie jak dedykowani pracownicy, aby utworzyć współużytkowanego pracownika WWW, przekazujesz nazwę pliku JavaScript do swojej instancji Worker, z tym wyjątkiem, że tym razem używasz obiektu SharedWorker. W przeciwieństwie do dedykowanych pracowników sieci Web, pracownicy współużytkowani wprowadzają koncepcję obiektu portu, który musi zostać wyznaczony wraz z dołączoną procedurą obsługi zdarzeń komunikatów. Następnie wywołujemy metodę start () portu. I wreszcie, jesteśmy gotowi użyć naszego standardowego postMessage ():

var worker = new SharedWorker('javascripts/shared-simple.js');

var log = document.getElementById('log');

worker.port.addEventListener('message', function(e) {

log.textContent += '\n' + e.data;

if (e.data.charAt(0) == '#'){

document.body.style.background = e.data;

}

}, false);

worker.port.start();

Ponieważ wszystkie istniejące skrypty strony, a nawet skrypty w innych oknach, mogą komunikować się ze współużytkowanym pracownikiem sieciowym, utworzymy trzy elementy iframe, aby zademonstrować komunikację w kontekstach okien przeglądarki:

< pre id="log" >Log:< /pre >

< iframe src="/shared-simple-inner.html" >< /iframe >

< iframe src="/shared-simple-inner2.html" >< /iframe >

< iframe src="/shared-simple-inner3.html" >< /iframe >

W każdym dokumencie ładowanym do elementów iframe utworzymy wystąpienie nowych obiektów SharedWorker, które będą wskazywać na ten sam zewnętrzny skrypt. Program obsługi zdarzeń onmessage będzie oczekiwał w odpowiedzi dwóch pozycji: liczby utrzymywanej przez licznik z wątkiem roboczym oraz losowo wygenerowanego koloru, który zostanie ustawiony jako kolor tła dokumentu, który zrodził pracownika.

< !DOCTYPE HTML >

< title >HTML5 Hacks: Shared Worker< /title >

< pre id=log >Log:< /pre >

< script >

var worker = new SharedWorker('javascripts/shared-simple.js');

var log = document.getElementById('log');

worker.port.onmessage = function(e) {

log.textContent += '\n' + e.data;

if (e.data.charAt(0) == '#'){

document.body.style.background = e.data;

}

}

< /script >

W ramach naszego pracownika będziemy utrzymywać licznik, który będzie się zwiększał wraz z każdym podłączonym klientem. Numer jest wysyłany z powrotem do głównego wątku, który spowodował powstanie tej konkretnej instancji pracownika. Następnie wygenerujemy losowy kolor i prześlemy go z powrotem w tym samym kontekście.

var count=0;

onconnect = function(e) {

count++;

var port = e.ports[0];

port.postMessage('Established connection: ' + count);

var randomColor = '#'+(0x1000000+(Math.random())*0xffffff).to

String(16).substr(1,6);

port.postMessage(randomColor);

}

Teraz, gdy odświeżymy stronę, zobaczymy, że cztery niezależne skrypty startowe otrzymują asynchroniczne odpowiedzi z wątku roboczego. Nie tylko tła są generowane losowo, ale każdy skrypt odradzający łączy się za każdym razem w nieco innej kolejności.

Hack No.71

Użyj zdalnego serwera WebSocket firmy Kaazing, dla echo prostych wiadomości z przeglądarki

Serwer echo to oparty na sieci Web serwer gniazd stworzony przez firmę Kaazing i hostowany w witrynie websocket.org. Demonstruje możliwości protokołu WebSocket poprzez echo komunikatów wysyłanych z przeglądarki. Otwórzmy plik HTML i zacznijmy od utworzenia podstawowej klasy WebSocketDemo w języku JavaScript. Ponieważ JavaScript nie jest oparty na klasach, będziemy postępować zgodnie z bardzo popularnym wzorcem pseudoklas do zarządzania naszym kodem. Podstawową strukturę naszych tagów JavaScript przedstawiłem w poniższym kodzie:

< script language="javascript" type="text/javascript" >

WebSocketDemo = function(){

return {

// public methods go here.

}

}();

WebSocketDemo.init("ws://echo.websocket.org/");

< /script >

Musimy również dodać znacznik DIV z id = "wyjście". Będzie to miejsce, w którym będziemy rejestrować nasze wiadomości.

< h2 > Test WebSocket < /h2 >

< div id = "output" > < /div >

Klasa WebSocketDemo ma cztery publiczne metody-init(), onOpen(), onClose() i onMessage() - oraz jedna właściwość publiczna, ws. Właściwość ws będzie przechowywać instancję naszego nowego obiektu WebSocket. Przyjrzyjmy się teraz metodzie init(). W WebSocketDemo.init() jako jedyny parametr podajemy adres URL. Następnie jest przekazywany do tworzenia wystąpienia nowego WebSocket. Zauważ, że nasz adres URL używa przedrostka ws: //. Protokół WebSocket definiuje ws: // dla podstawowego połączenia z gniazdem internetowym i wss: // dla bezpiecznego połączenia z gniazdem internetowym. W przypadku tego hacka będziemy trzymać się podstaw i używać połączenia ws: //.

WebSocketDemo = function(){

return {

ws: null,

init: function(url){

this.ws = new WebSocket(url);

}

}

}();

WebSocketDemo.init("ws://echo.websocket.org/");

Teraz stwórzmy metodę o nazwie onOpen(), aby opakować nasze wywołanie metody send() i nasłuchiwać zdarzenia uruchamianego po nawiązaniu połączenia:

WebSocketDemo = function(){

return {

ws: null,

init: function(url){

this.ws = new WebSocket(url);

this.onOpen();

},

onOpen: function(){

this.ws.onopen = function(evt) {

console.log('CONNECTED: ' + evt.type);

WebSocketDemo.ws.send('html5 hacks');

};

}

}

}();

WebSocketDemo.init ("ws: //echo.websocket.org/");

W ramach metody onOpen () zawarliśmy również console.log, który będzie rejestrował typ zdarzenia. Aby nawiązać połączenie WebSocket, klient i serwer dokonują aktualizacji z protokołu HTTP do protokołu WebSocket podczas wstępnego uzgadniania. Istnieje kilka mechanizmów uzgadniania, ale jeśli nie piszesz implementacji gniazd po stronie serwera, interfejs API WebSocket JavaScript zaimplementowany w przeglądarce usunie te szczegóły z dala od Ciebie. Żądanie uzgadniania jest tak sformatowane (pokazane są tylko podstawowe nagłówki):

GET /demo HTTP/1.1

Host: echo.websocket.org

Connection: Upgrade

Upgrade: WebSocket

Origin: null

Oto odpowiedź typu handshake (ponownie pokazane są tylko podstawowe nagłówki):

HTTP/1.1 101 WebSocket Protocol Handshake

Upgrade: WebSocket

Connection: Upgrade

Server: Kaazing Gateway

Korzystając z narzędzi programistycznych Google Chrome, możesz sprawdzić interakcję klient / serwer. Kliknij kartę Sieć i wybierz "echo.websocket.org" po lewej stronie, aby wyświetlić informacje w nagłówku żądania i odpowiedzi. Zauważysz w nagłówkach żądań, że istnieje nagłówek Connection: Upgrade. Zobaczysz również, że typ jest wskazany w nagłówku Upgrade, a hostem odbierającym jest echo.websocket.org. W odpowiedzi widzimy, że został zwrócony nagłówek Upgrade, a odpowiadająca mu wartość to WebSocket. To informuje przeglądarkę klienta, że żądany typ uaktualnienia był dostępny i trwałe połączenie zostało otwarte. Teraz rozwińmy nieco nasz kod i zacznijmy dodawać kilka innych metod publicznych, które ujawnią więcej zdarzeń związanych z połączeniami, skutecznie demonstrując wewnętrzne funkcje komunikacji gniazda: onClose() i onMessage().

onClose: function(){

this.ws.onclose = function(evt) {

console.log('CLOSED: ' + ': ' + evt.type);

};

},

onMessage: function(msg){

this.ws.onmessage = function(evt) {

console.log('RESPONSE: ' + ': ' + evt.data);

WebSocketDemo.ws.close();

};

}

}

}();

A w naszym init() wykonajmy nasze nowe metody:

nit: function(url){

this.ws = new WebSocket(url);

this.onOpen();

this.onMessage();

this.onClose();

},

Teraz, jeśli odświeżymy przeglądarkę, powinniśmy zobaczyć nowe dzienniki konsoli pochodzące z naszych nowych metod zdarzeń. Wywołanie send w ramach onOpen() przekazuje komunikat "html5 hacks" do zdalnego serwera echa, a serwer wysyła odpowiedź. Zdarzenie onMessage() rejestruje komunikat i wywołuje onClose. W najnowszej wersji Chrome w wersji Canary otrzymaliśmy również nową kartę w narzędziach deweloperskich, która pozwala nam przeglądać ruch przesyłany między przeglądarką a zdalnym serwerem. Aby skorzystać z tej możliwości, najpierw musisz getCanary. Teraz wykonaj następujące kroki:

1. Przejdź do właśnie utworzonego pliku index.html.

2. Włącz narzędzia Chrome Developer Tools lub naciśnij Apple + Shift + I (Mac OS X) lub Ctrl-Shift-I (Windows i Linux).

3. Kliknij kartę Sieć i kliknij opcję Gniazda sieciowe, tak jak to zrobiliśmy w poprzednim przykładzie.

4. Wybierz "echo.websocket.org".

5. Wybierz kartę Ramki WebSocket.

Podane informacje są bardzo przydatne i zapobiegają konieczności instalowania narzędzia innej firmy:

Number : to jest licznik, aby zademonstrować kolejność komunikatów.

Arrow: To jest kierunek wiadomości.

Timestamp: jest to godzina zainicjowania lub odebrania wiadomości.

Op-code: Kody operacyjne są podzielone na trzy kategorie: kontynuacja, brak kontroli i kontrola. Kody operacji kontynuacji i braku kontroli wskazują, że komunikaty użytkownika i ramki sterujące są używane do konfiguracji samego protokołu: 1 oznacza wiadomość tekstową, a 8 oznacza zamknięte połączenie.

Length: jest to liczba znaków w ładunku.

Contents : to są rzeczywiste dane w ładunku WebSocket.

Dla jasności podsumujmy interakcję:

1. Przeglądarka klienta tworzy instancję nowego obiektu WebSocket i przekazuje mu adres URL przy użyciu protokołu ws: //.

2. Następnie przeglądarka klienta wysyła żądanie HTTP do zdalnego serwera z żądaniem aktualizacji połączenia WebSocket.

3. Serwer odpowiada nagłówkami odpowiedzi wskazującymi Połączenie: Upgrade typu Upgrade: WebSocket.

4. To uruchamia zdarzenie onopen.

5. Za pomocą metody onOpen () przeglądarka klienta wywołuje metodę send() i przekazuje ładunek. 6. Serwer odpowiada echem tego samego ładunku, wyzwalając zdarzenie onmessage.

7. Metoda zdarzenia onMessage () rejestruje ładunek w konsoli klienta, a następnie wywołuje metodę close().

8. Metoda zdarzenia onClose () jest wyzwalana i rejestruje "ZAMKNIĘTE" i typ zdarzenia w konsoli

Oto ostateczny kod w całości. To dopiero początek dobrze zorganizowanej biblioteki JavaScript WebSocket. Weź to i zacznij własne hacki!

< html >

< head >

< meta charset="utf-8" / >

< title >WebSocket Test< /title >

< script language="javascript" type="text/javascript" >

WebSocketDemo = function(){

return {

ws: null,

init: function(url){

this.ws = new WebSocket(url);

this.onOpen();

this.onMessage();

this.onClose();

},

doSend: function(msg){

this.ws.send = function(evt) {

console.log(evt.timeStamp)

};

},

onOpen: function(){

this.ws.onopen = function(evt) {

console.log('CONNECTED: ' + evt.type);

WebSocketDemo.ws.send('html5 hacks');

};

},

onClose: function(){

this.ws.onclose = function(evt) {

console.log('CLOSED: ' + ': ' + evt.type);

};

},

onMessage: function(msg){

this.ws.onmessage = function(evt) {

console.log('RESPONSE: ' + ': ' + evt.data);

WebSocketDemo.ws.close();

};

}

}

}();

WebSocketDemo.init("ws://echo.websocket.org/");

< /script >

< /head >

< body >

< h2 >WebSocket Test< /h2 >

< div id="output" >< /div >

< /body >

< /html >

Hack No.72

Zbuduj niesamowicie szybki serwer WebSocket za pomocą Node.js i modułu ws

Moduł ws Node.js to łatwa w użyciu, niezwykle szybka i aktualna implementacja gniazda sieciowego, której można użyć do szybkiego skonfigurowania i uruchomienia gniazd internetowych. Jest również dostarczany z wscat, narzędziem poleceń, które może działać jako klient lub serwer. W tym hacku zbadamy najszybszy serwer WebSocket, jaki udało mi się znaleźć. Odkryłem moduł ws dla Node.js. Tak się składa, że ws jest nie tylko niesamowicie szybki, ale także dość prosty w konfiguracji. Prostota jego implementacji sprawi, że ten hack będzie idealnym wprowadzeniem do gniazd sieciowych. Moduł ws jest zgodny z aktualnymi wersjami roboczymi protokołu HyBi i może wysyłać i odbierać tablice o określonych typach (ArrayBuffer, Float32Array itp.) Jako dane binarne. Więc chociaż może to być proste, to nie jest zabawka.

ws jest również dostarczany z ładnym klientem wiersza poleceń o nazwie wscat, który daje nam narzędzie do tworzenia i odbierania żądań bez korzystania z przeglądarki.

Instalowanie Node.js.

W sieci jest już mnóstwo świetnej dokumentacji dotyczącej instalowania i uruchamiania Node.js, więc nie będę jej tutaj ponownie tworzyć. Dobry punkt wyjścia można znaleźć na GitHub. Możesz także po prostu kliknąć przycisk Instaluj na środku ekranu na stronie nodejs.org.

Używanie klienta wscat do wywoływania serwera Kaazing Echo.

Po skonfigurowaniu i zainstalowaniu Node.js powinieneś być w stanie otworzyć wiersz poleceń i użyć Node Package Manager (NPM), aby zainstalować moduł ws:

$ npm install -g ws

Ponieważ jest to biblioteka gniazd i klient wiersza poleceń, dodamy parametr -g, aby zainstalować skrypty globalnie. W ten sposób możemy często korzystać z tej biblioteki i do wielu różnych zastosowań. Teraz patrz, jak NPM pobiera i instaluje moduł ws oraz wszystkie niezbędne elementy zależności. W tym momencie powinniśmy być w stanie natychmiast użyć wscat do wysłania żądania do zdalnego serwera echa hostowanego przez Kaazing:

$ wscat -c ws: //echo.websocket.org

Mamy to. Nasze narzędzie wiersza poleceń jest gotowe i działa. Możemy działać jak przeglądarka i wysyłać wiadomości do zdalnego serwera sieciowego.

Tworzenie prostego serwera i łączenie się z nim za pomocą wscat

Teraz, gdy nasze narzędzia są już gotowe, zbudujmy własny prosty serwer z gniazdami. Przejdź do katalogu projektu, otwórz plik i nadaj mu nazwę server.js:

$ cd /your-app-directory

$ touch server.js

To był jeden ze sposobów tworzenia pliku. Możesz bardzo łatwo zrobić to na swój własny sposób. Jeśli wolisz korzystać z GUI swojego systemu operacyjnego w celu uzyskania dostępu do systemu plików, przejdź do pustego katalogu, otwórz prosty edytor tekstu i utwórz plik o nazwie server.js. W pliku server.js użyj require (), aby dołączyć bibliotekę ws i utworzyć instancję nowego serwera WebSocketServer działającego na porcie 8080:

var WebSocketServer = require('ws').Server

, wss = new WebSocketServer({port: 8080});

Teraz możemy użyć metody on () do nasłuchiwania zdarzenia połączenia. Po uruchomieniu zdarzenia połączenia wywoływana jest funkcja zwrotna zawierająca inną zagnieżdżoną funkcję, która nasłuchuje zdarzenia komunikatu od wszystkich połączonych klientów. Następnie uruchamiamy metodę send (), przekazując ładunek z ciągiem "'I am a message sent from a ws server".

wss.on('connection', function(ws) {

ws.on('message', function(message) {

console.log('received: %s', message);

});

ws.send('I am a message sent from a ws server');

});

Teraz zapisujemy plik i uruchamiamy serwer:

$ node server.js

W innym oknie terminala możemy użyć klienta wscat, aby uzyskać dostęp do naszego własnego serwera działającego na porcie 8080. I otrzymujemy naszą wiadomość.

$ wscat -c ws://localhost:8080 -p 8

connected (press CTRL+C to quit)

< I am a message sent from a ws server

>

I wreszcie możemy wysłać wiadomość z powrotem na serwer, ręcznie wpisując testowanie w interfejsie wiersza poleceń. Teraz przejdź z powrotem do innej karty, na której działa serwer, aby zobaczyć wiadomość od klienta.

Serwer gniazda nasłuchuje i rejestruje testy:

$ node server.js

Wiadomość została odebrana od klienta WS: testing

Tworzenie prostego klienta

Zamiast wchodzić w interakcje z naszym serwerem WebSocket za pośrednictwem interfejsu wiersza poleceń wscat, napiszmy skrypt, który zajmie się tą interakcją za nas. Najpierw wymagaj biblioteki ws i utwórz nową instancję WebSocket. Następnie skonfiguruj dwie procedury obsługi oneevent: jedną do nasłuchiwania zdarzenia open dla połączenia i drugą do nasłuchiwania wszelkich komunikatów przychodzących. Użyjemy poręcznego serwera echo echo.websocket.org, aby odzwierciedlić odpowiedź na nasze żądanie.

var WebSocket = require ('ws')

, ws = new WebSocket ('ws: //echo.websocket.org ');

ws.on ('open', function () {

ws.send ('Jestem otwartym zdarzeniem z klienta ws');

});

ws.on ('wiadomość', funkcja (wiadomość) {

console.log ("otrzymano:% s", wiadomość);

});

Zacznijmy klienta:

$ node client.js

otrzymano: Jestem otwartym WYDARZENIEM od klienta ws

W otwartym zdarzeniu komunikat "Jestem otwartym WYDARZENIEM od klienta ws" jest wysyłany do zdalnego serwera echa. Serwer zdalny zwraca następnie wiadomość. Klient nasłuchuje komunikatów i rejestruje odpowiedź z komunikatem "Otrzymano: Jestem otwartym ZDARZENIEM od klienta ws".

Masz to. Masz teraz doskonały przykład serwera WebSocket działającego lokalnie oraz interfejs wiersza poleceń do tworzenia i nasłuchiwania komunikatów gniazda sieciowego bez przeglądarki.

Hack No.73

Zbuduj termometr darowizn za pomocą gniazd internetowych, interfejsu API Pusher i PHP

Termometry darowizn są używane podczas wielu imprez charytatywnych i witryn darowizn, ale zwykle aktualizują się tylko po odświeżeniu strony. Aktualizowanie tych termometrów w czasie rzeczywistym jest teraz łatwiejsze niż kiedykolwiek, gdy ktoś przekaże darowiznę, korzystając z gniazd internetowych HTML5. Obecnie dostępnych jest wiele usług i rozwiązań w czasie rzeczywistym. W przypadku termometru darowizny użyjemy Pushera, który korzysta z gniazd internetowych HTML5, aby dodać do widżetu funkcjonalność w czasie rzeczywistym. Ta funkcjonalność w czasie rzeczywistym nie tylko zapewni natychmiastową poprawną wartość darowizny, ale także zwiększy poziom ekscytacji, który może skutkować "lepkością", która przykuwa uwagę użytkownika.

Progresywne ulepszanie

Dostępność jest zawsze ważna, ale potencjalnie bardziej ważna w przypadku organizacji charytatywnych, dlatego ważne jest, aby widżet termometru darowizny przynajmniej wyświetlał coś, nawet jeśli JavaScript nie jest włączony. Dlatego będziemy stopniowo ulepszać widżet. Aplikacje są stopniowo ulepszane, najpierw definiując strukturę za pomocą statycznego kodu HTML. Następnie stosowany jest CSS, aby interfejs użytkownika był bardziej atrakcyjny wizualnie. Następnie JavaScript jest używany do dodawania interaktywnych funkcji i potencjalnie niektórych ulepszeń wizualnych. Funkcjonalność czasu rzeczywistego można dodać dokładnie w ten sam sposób. W przypadku widżetu wykonamy następujące czynności:

1. Wygeneruj HTML widżetu na serwerze za pomocą PHP.

2. Wystylizuj go za pomocą CSS.

3. Dostosuj interfejs użytkownika za pomocą JavaScript i jQuery.

4. Użyj funkcji Pusher, aby aktualizować widżet w czasie rzeczywistym, gdy pojawią się nowe darowizny.

Tworzenie kodu HTML termometru

Ze względu na dostępność dobrze jest mieć pewne wartości tekstowe, więc w przypadku HTML skupimy się na tym, dodając kilka elementów do wyświetlania wizualnego.

< div class="thermometer-widget" >

< div class="title" >Donation Thermometer< /div >

< div class="cause" >A Good Cause< /div >

< div class="figures" >

< div class="goal" >

< span class="label" >Our Goal< /span >

£5,000< /span >

< /div >

< div class="current_total" >

< span class="label" >Raised so far< /span >

< span class="value" >£3,000< /span >

< /div >

< /div >

< /div >

Nie jest to zbyt ekscytujące, ale wyświetla proste wartości.

Dodawanie widźetu do termometru za pomocą CSS

Następnym etapem stopniowego ulepszania jest użycie CSS, więc zamierzamy dodać kilka dodatkowych elementów do HTML (w idealnym świecie nie dodawałbyś znaczników do stylizacji, ale jeszcze nie jesteśmy w tym świecie) . Nie wpływa to na wygląd widżetu, jeśli CSS nie jest dostępny; pozwala nam tylko dodać naszą wizualizację termometru do wyświetlacza.

< div class="thermometer-widget" >

< div class="title" >Donation Thermometer< /div >

< div class="cause" >A Good Cause< /div >

< div class="figures" >

< div class="goal" >

< span class="label" >Our Goal< /span >

< span class="value" >£5,000< /span >

< /div >

< div class="current_total" >

< span class="label" >Raised so far< /span >

£3,000< /span >

< /div >

< /div >

< div class="display" >

< div class="thermometer" >

< div class="top" >< /div >

< div class="middle" >

< div class="value" >< /div >

< /div >

< div class="base current_total" >

< div class="value" >£3,000< /div >

< /div >

< /div >

< /div >

< /div >

Warto podać trochę informacji dotyczących struktury HTML:

.figures: Widzieliśmy to wcześniej. Zawiera kluczowe wartości widżetu.

.display: To jest wizualny wyświetlacz termometru.

.display .thermometer: Ma następujące wartości:

.base: Jest to okrągła żarówka na dole termometru.

.base .value: można użyć do pokazania wartości tekstowej funduszy, które zostały zebrane.

. middle: jest to zewnętrzna część szyjki termometru.

.middle .value: Wypełni się w zależności od podniesionej kwoty. Na razie nie ma wysokości.

.top: To jest po prostu zakrzywiona górna część termometru.

Jest do tego sporo CSS, więc nie zamierzam go tutaj umieszczać. Możesz wyświetlić surowy plik CSS na GitHub.

Być może zauważyłeś podczas naszej dyskusji na temat struktury HTML, że żadna wysokość nie została zastosowana do .middle .value wizualizacji termometru, więc nie przekazuje ona poprawnie podniesionej kwoty. Ponieważ nie możemy jeszcze używać JavaScript, musimy wygenerować wartość wysokości na serwerze i zastosować wysokość do elementu. Aby to zrobić, musimy obliczyć procent celu, który został podniesiony, a następnie wyliczyć wysokość w pikselach, aby zastosować ją do wartości. Oto przykład robienia tego w PHP:

< ?php

$goal = 5000;

$current_total = 3000;

$current_percent_fraction = $current_total/$goal; // 0.6 = 60% full

$middle_height = 165;

$middle_height_value = $middle_height * $current_percent_fraction;

? >

Kiedy generujemy kod HTML, możemy umieścić w elemencie styl wbudowany. Kod HTML będzie wyglądał następująco:

< div class="middle" >

< div class="value" style="height: 99px" >< /div >

< /div >

Poprawianie interfejsu użytkownika za pomocą JavaScript

JavaScript został udostępniony w przeglądarkach internetowych, dzięki czemu możemy wzbogacić stronę internetową lub aplikację. W tym przypadku chcemy zastosować pewne efekty wizualne, które w innym przypadku spowodowałyby bardzo dużą ilość znaczników HTML. Zrobimy to za pomocą jQuery, więc pamiętaj o dołączeniu biblioteki jQuery:

< script src = http://code.jquery.com/jquery-1.7.2.min.js > < /script>

Znaczniki pomiarowe

Możemy użyć JavaScript do ulepszenia widżetu na kilka sposobów. Najpierw możemy poprawić ogólny wygląd termometru, dodając znaczniki pomiarowe do środkowej części termometru. Gdybyśmy to zrobili za pomocą HTML, znaczniki stałyby się bardzo brzydkie, bardzo szybko. W poniższym kodzie odwołujemy się do .middle i .middle .value, a d pobiera ich wysokość. Uzyskujemy dostęp do kwoty celu charytatywnego i bieżącej sumy z interfejsu użytkownika i analizujemy wartości za pomocą funkcji getNumericVal. Korzystając z tych wszystkich informacji, wiemy, ile znaków dodamy do elementu .middle. Następnie dodajemy elementy, które reprezentują znaki. Jest tu trochę konfiguracji, aby uzyskać dostęp do elementów i wartości oraz obliczyć, ile znaków musimy narysować. Z tego powodu i ponieważ chcemy użyć tego ponownie w poniższych przykładach, zawarłem to w funkcji setUp. Teraz możemy skoncentrować się tylko na ulepszeniu interfejsu użytkownika.

function getNumericVal(el, selector) {

var el = el.find(selector);

var val = el.text();

val = parseInt(val.replace(/\D/g, ''), 10);

return val;

}

function setUp(thermometerSelector) {

var config = {};

config.el = $(thermometerSelector);

config.middleEl = config.el.find('.display .middle');

config.middleValueEl = config.middleEl.find('.value');

config.currentTotalEl = config.el.find('.current_total .value');

config.numberOfMarks = parseInt(config.middleEl.height()/10, 10);

config.goalValue = getNumericVal(config.el,

'.figures .goal .value');

config.currentTotalValue = getNumericVal(config.el, '.figures .current_total .value');

config.pixelsPerValue = config.middleValueEl.height()/config.current TotalValue;

config.valuePerMark = config.goalValue/config.numberOfMarks;

return config;

}

Teraz, gdy mamy już wszystkie odniesienia do elementów i ustawione wartości, możemy dodać znaczniki do termometru:

function addThermometerMarks(middleEl, numberOfMarks, valuePerMark) {

for(var i = 1; i <= numberOfMarks; ++i) {

var amount = parseInt(valuePerMark * i);

var markEl = $('

');

markEl.css({'position': 'absolute', 'bottom': (i*10) + "px"});

markEl.attr('title', '?' + amount);

var tooltip = $('');

markEl.append(tooltip);

middleEl.append(markEl);

}

}

$(function() {

var config = setUp('.thermometer-widget');

addThermometerMarks(config.middleEl, config.numberOfMarks, config.valuePerMark);

});

Wartości znaczników, wyróżnienia najechania kursorem i wskazówki narzędzi.

Oznaczenia termometru nie są zbyt przydatne, jeśli nie wiemy, jakie wartości reprezentują, więc wyświetlmy wartości, gdy użytkownik najedzie kursorem na elementy znacznika, wyświetlając podpowiedź. Dodamy również mały efekt podświetlenia. Na podstawie poprzedniego fragmentu kodu zobaczysz, że mamy już elementy podpowiedzi, więc teraz musimy je tylko pokazać po najechaniu kursorem. Robimy to poprzez dodanie klasy do znacznika, który zmienia display: none style to display: block, gdy użytkownik najedzie myszką na element.

function addMarkHighlights(middleEl) {

middleEl.find('.mark').hover(function() {

var el = $(this);

el.addClass('mark-selected');

},

function() {

var el = $(this);

el.removeClass('mark-selected');

});

}

$(function() {

var config = setUp('.thermometer-widget');

addThermometerMarks(config.middleEl, config.numberOfMarks,

config.valuePerMark);

addMarkHighlights(config.middleEl);

});

Animowanie zmian wartości

Końcowym efektem, który możemy dodać, jest animacja wysokości .środkowej .value termometru i wartości tekstowych poprzez zwiększenie ich od 0 do bieżącej sumy. Usuńmy z drogi funkcję użytkową. Poniższy tekst dodaje przecinki do wartości:

function addCommas(number) {

var number = number+''; var l = number.length; var out = '';

var n = 0;

for (var i=(l-1);i>=0;i--) {

out = ''+number.charAt(i)+''+out;

if ((l-i)%3 == 0 && i != 0) {

out = ','+out;

}

n++;

}

return out;

}

Następnie animujmy tekst. To naprawdę jest tylko wizualna rzecz. Nie musi to być zbyt sprytne, więc będziemy po prostu zwiększać wartość co 50 ms o obliczoną wartość. Zamierzamy również zwrócić identyfikator setInterval, aby w razie potrzeby można go było wyczyścić w innym miejscu.

function animateText(el, fromValue, toValue) {

var total = fromValue;

var interval = setInterval(function() {

if(total < toValue) {

// 2000ms for the animation, we update every 50ms

total += parseInt((toValue-fromValue) / (2000/50));

total = Math.min(total, toValue);

el.html('£' + addCommas(total));

}

else {

clearInterval(interval);

}

}, 50);

return interval;

}

Teraz animujmy wizualizację termometru. Jest to bardzo łatwe dzięki funkcji jQuery.animate:

function animateThermometer(valueEl, fromHeight, toHeight, totalEl, totalValue, callback) {

// animate down really quickly. If a users sees it then it

// won't look too bad.

valueEl.animate({'height': fromHeight + 'px'}, 'fast',

function() {

// animate back up slowly. Cool!

valueEl.animate({'height': toHeight}, '2000', function() {

totalEl.html('£' + addCommas(totalValue));

callback();

});

});

}

Na koniec połączmy wszystkie te funkcje i w pełni stylizujmy i animujmy termometr. Przeniesiemy również niektóre wywołania konfiguracji komentarzy do funkcji addBehaviours.

function animateValues(valueEl, totalEl, fromValue, toValue, goalValue, pixelsPerValue) {

var fromHeight = pixelsPerValue*fromValue;

var toHeight = Math.min(pixelsPerValue*toValue,

pixelsPerValue*goalValue);

var interval = animateText(totalEl, fromValue, toValue);

animateThermometer(valueEl, fromHeight, toHeight, totalEl, toValue, function() {

clearInterval(interval);

});

return interval;

};

function addBehaviours(config, setInitialValues) {

setInitialValues = (setInitialValues === undefined?

true: setInitialValues);

addThermometerMarks(config.middleEl, config.numberOfMarks,

config.valuePerMark);

addMarkHighlights(config.middleEl);

if(setInitialValues) {

animateValues(config.middleValueEl, config.currentTotalEl, 0,

config.currentTotalValue, config.goalValue,

config.pixelsPerValue);

}

}

$(function() {

var config = setUp('.thermometer-widget');

addBehaviours(config);

});

Jeśli teraz wyświetlisz widżet, zobaczysz animację wartości i paska termometru, co jest miłym małym efektem.

Dodawanie aktualizacji w czasie rzeczywistym

Wydaje się, że musieliśmy ciężko pracować, aby dojść tak daleko. Ale niesamowitą wiadomością jest to, że dodawanie aktualizacji w czasie rzeczywistym do widżetu termometru charytatywnego jest bardzo łatwe. Najpierw dodajmy bibliotekę Pusher JavaScript do strony:

< script src = http://js.pusher.com/1.12/pusher.min.js > < /script >

Łączymy się z usługą Pusher, tworząc nową instancję Pusher i przekazując klucz aplikacji (aby go uzyskać, musisz założyć bezpłatne konto Pusher). Zasubskrybujemy również publiczny kanał darowizn, z którym będzie powiązane wydarzenie new_donation. To zdarzenie zostanie uruchomione za każdym razem, gdy zostanie przekazana nowa darowizna na cel. Samo wydarzenie powie nam, kto przekazał darowiznę, ile przekazał i jaka jest nowa suma. JSON do tego będzie wyglądał następująco:

{

"who": "Phil Leggetter",

"howMuch": "20",

"newTotal": "3020"

}

Teraz, gdy już to wiemy, możemy również utworzyć funkcję o nazwie animateDonation, która wywołuje naszą funkcję animateValues ze zaktualizowanymi wartościami, aby wyświetlić naszą aktualizację w czasie rzeczywistym. Kod do tego wszystkiego jest następujący:

function animateDonation( middleValueEl, currentTotalEl, currentTotal, newTotal, pixelsPerValue, goalValue ) {

var newHeightPixels = parseInt(pixelsPerValue * newTotal, 10);

return animateValues(middleValueEl, currentTotalEl,

currentTotal, newTotal, goalValue, pixelsPerValue);

};

$(function() {

var config = setUp('.thermometer-widget');

addBehaviours(config, false);

var pusher = new Pusher("006c79b1fe1700c6c10d");

var channel = pusher.subscribe('donations-channel');

var animateInterval = null;

channel.bind('new_donation', function(data) {

if(animateInterval) {

clearInterval(animateInterval);

}

var newTotal = data.newTotal;

var currentTotalValue = getNumericVal(config.el,

'.figures .current_total .value');

animateInterval = animateDonation(config.middleValueEl,

config.currentTotalEl, currentTotalValue, newTotal,

config.pixelsPerValue, config.goalValue);

});

});

Funkcja animateDonation zwraca interwał animacji, co daje nam możliwość anulowania trwającej animacji, jeśli pojawi się nowa aktualizacja. To zatrzymuje dwie animacje działające w tym samym czasie, w których możemy zobaczyć naprawdę szalone rzeczy. Jesteśmy teraz gotowi do utworzenia kodu, który wyzwala aktualizację. W tym celu zamierzamy użyć PHP i biblioteki Pusher PHP firmy Squeeks, ale to samo można osiągnąć w innych językach przy użyciu jednej z bibliotek Pusher Server. Zamierzamy stworzyć usługę internetową, która umożliwia przekazywanie darowizn. Będzie składał się tylko z parametrów kto i jak_dużo. Będziemy przechowywać te dane w bazie danych MySQL (ale nie będziemy tutaj omawiać szczegółów konfiguracji) i zaktualizować sumę bieżącą. Oto kod, zanim dodamy kod Pusher:

< ?php

require('config.php');

$con = mysql_connect("localhost", $db_username, $db_password);

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

mysql_select_db($db_name, $con);

$who = mysql_real_escape_string($_GET['who']);

$how_much = mysql_real_escape_string($_GET['how_much']);

if( !$who || !how_much || !is_numeric($how_much) ) {

die('unsupported who and how_much values');

}

$running_total = 0;

$last_update = "SELECT *

FROM $db_tablename ORDER BY id DESC LIMIT 1";

$result = mysql_query($last_update);

if($result) {

$row = mysql_fetch_array($result);

$running_total = $row['running_total'];

}

$running_total = $running_total + $how_much;

$insert_query = "INSERT INTO $db_tablename (who, how_much, running_total) ";

$insert_query .= sprintf( "VALUES('%s', %f, %f)", $who, $how_much, $running_total );

$insert_result = mysql_query($insert_query);

if(!$insert_result) {

die('insert query failed' . mysql_error());

}

mysql_close($con);

? >

Teraz dodajmy magię czasu rzeczywistego. Wszystko, co musimy zrobić, to dołączyć bibliotekę Pusher PHP, utworzyć instancję Pusher, umieścić dane, które chcemy wysłać do tablicy i wywołać zdarzenie, wywołując $ pusher-> trigger(). Zmienne przekazywane do konstruktora Pusher są zdefiniowane w config.php.

require('Pusher.php');

$pusher = new Pusher($pusher_key, $pusher_secret, $pusher_app_id);

$channel_name = 'donations-channel';

$values = array('who' ⇒ $who, 'howMuch' ⇒ $how_much, 'newTotal' ⇒

$running_total);

$pusher→trigger($channel_name, 'new_donation', $values);

Otóż to! Naprawdę tak łatwo jest wywołać zdarzenie w czasie rzeczywistym. A ponieważ wykonaliśmy całą ciężką pracę na kliencie, termometr organizacji charytatywnej w czasie rzeczywistym aktualizuje się w czasie rzeczywistym. Ponieważ PHP pobiera wartości z żądania GET, możemy przetestować tę funkcję, przechodząc do naszego pliku PHP, który nazwiemy donate.php, przekazując wymagane parametry ciągu zapytania GET:

donate.php? who = Phil & how_much = 100

Oto przykład formularza, który można przesłać do właśnie utworzonego pliku PHP. Dostarczono również trochę JavaScript, co oznacza, że formularz jest przesyłany za pomocą Ajax.

< form id="donate_form" action="donate.php" >

< label for="who" >Name< /label >< input type="text" value="Anon" name="who" / >

< label for="how_much" >How Much< /label >< input type="number" value="100.00" name="how_much" / >< br />

< label for="reset_total" >Reset?< /label >< input name="reset_total" type="checkbox" value="1" / >

< input type="submit" value="Donate!" / >

< /form >

< script >

$(function() {

$( '#donate_form' ).submit(function() {

var form = $(this);

var values = form.serialize();

$.ajax({

url: 'donate.php',

data: values

});

return false;

});

});

< /script >

Podsumowanie

Więc co osiągnęliśmy?

* Stopniowo ulepszany widget, który zaczyna swoje życie jako statyczny, nudny HTML

* Dodano CSS i kilka dodatkowych elementów HTML, w które można zamienić widżet w coś bardziej atrakcyjnego wizualnie

* Użyłem JavaScript do dalszej aktualizacji interfejsu użytkownika, dodając znaczniki, które zmieniłyby HTML w bałagan, i dodając animacje

* Używany Pusher do dodawania aktualizacji w czasie rzeczywistym do widżetu, dzięki czemu za każdym razem, gdy pojawia się nowa darowizna, aktualizuje się wartości

Naprawdę interesujące jest to, że dodawanie komponentów czasu rzeczywistego do widżetu zajęło ułamek czasu, który wymagał wszystkiego innego. Tak więc, jeśli masz już aplikację dynamiczną, naprawdę łatwo jest dodać odrobinę magii czasu rzeczywistego, aby jeszcze bardziej ją ulepszyć i uczynić ją bardziej wciągającą.

Hack No.74

Twórz wtyczki dla jWebSocket

jWebSocket to wieloplatformowa platforma komunikacji w czasie rzeczywistym składająca się z serwera i klientów stacjonarnych i mobilnych, internetowych i natywnych. Dzięki niemu możesz tworzyć oparte na HTML5 aplikacje do przesyłania strumieniowego i komunikacji w Internecie. jWebSocket ma własne implementacje serwerowe, ale także bezproblemowo integruje istniejące serwery, takie jak Tomcat, Glassfish i Jetty. Oprócz klienta JavaScript dla aplikacji internetowych czasu rzeczywistego opartych na przeglądarce, dostępne są również klienty dla urządzeń mobilnych z systemem Android, iOS, Windows Phone, BlackBerry i Java ME. W przypadku urządzeń stacjonarnych jWebSocket obsługuje Java SE, C # i Python. jWebSocket jest darmowy i open source. Jedną z jego głównych zalet jest to, że jest wyposażony w potężny rdzeń, który można łatwo rozszerzyć za pomocą wtyczek i aplikacji gniazd internetowych do setek tysięcy równoczesnych połączeń. Szyfrowanie SSL i system filtrów wiadomości zapewniają wysoki poziom bezpieczeństwa. Dzięki standaryzacji IETF i W3C, gniazda sieciowe zapewniają wysoki poziom ochrony inwestycji oraz łatwość utrzymania kodu na wszystkich nowoczesnych platformach. Korzystanie przez nich ze stałych, pełnodupleksowych połączeń TCP zamiast półdupleksowych połączeń HTTP zapewnia znaczny wzrost szybkości Twojej aplikacji, a także zwiększona odpowiedzialność i większe zadowolenie użytkowników. jWebSocket jest przeznaczony do tworzenia innowacyjnych aplikacji do przesyłania strumieniowego i komunikacji w Internecie opartych na HTML5. Gniazda sieciowe HTML5 zastąpią istniejące podejście XHR, a także usługi Comet, nową, elastyczną i ultraszybką dwukierunkową technologią komunikacyjną TCP. Funkcje rezerwowe zapewniające kompatybilność wsteczną zapewniają, że aplikacja nadal działa w sposób przezroczysty nawet w starszych środowiskach. jWebSocket jest przeznaczony do zastosowań, takich jak gry online, współpraca online oraz usługi przesyłania strumieniowego i przesyłania wiadomości w czasie rzeczywistym. Stanowi doskonałą podstawę dla złożonych klastrów obliczeniowych, architektur zorientowanych na usługi i wszelkiego rodzaju interfejsów między nową a już istniejącą technologią. Dzięki dużej liczbie wtyczek dostarczanych z pakietami instalacyjnymi, jWebSocket jest odpowiedni do zaspokojenia wszystkiego, od prostych potrzeb komunikacyjnych po złożone, heterogeniczne rozwiązania do przesyłania wiadomości w czasie rzeczywistym i synchronizacji danych. Wtyczki są gotowe do użycia, ale można je również rozszerzyć w celu dostosowania do indywidualnych wymagań. W tym hacku pokażę, jak skonfigurować serwer, użyć bibliotek klienta do nawiązania komunikacji i rozszerzyć jWebSocket zarówno o wtyczki po stronie klienta, jak i po stronie serwera.

Uruchamianie serwera jWebSocket

Serwer jWebSocket jest w całości napisany w Javie, więc działa na prawie wszystkich systemach operacyjnych, w tym Windows, Mac OS X i Linux. Jest to oprogramowanie typu open source i bezpłatne do pobrania. Aby to uzyskać, po prostu pobierz pakiet serwera jWebSocket, jWebSocketServer- .zip, z obszaru pobierania witryny jWebSocket. Zawiera plik jWebSocketServer- .jar, wszystkie wymagane biblioteki oraz skrypty jWebSocketServer- .bat i .sh do uruchomienia serwera. Rozpakuj archiwum do wybranego folderu (np. / Etc dla systemów Unix / Linux, / Applications dla środowisk Mac OS X lub c: \ program files \ dla środowisk Windows). Archiwum zawiera folder jWebSocket- , który jest folderem głównym serwera jWebSocket Server. Plik jWebSocketServer- .jar w folderze / bin zawiera wszystkie wymagane biblioteki i zapewnia gotową do użycia strukturę folderów. Można go łatwo uruchomić z powłoki lub okna wiersza poleceń bez żadnej instalacji lub specjalnej konfiguracji.

• W systemie Windows: jWebSocketServer.bat

• W systemie Linux: jWebSocketServer.sh

• W przypadku systemu Mac OS X: jWebSocketServer.command

Podobnie jak w przypadku zwykłych aplikacji komputerowych, serwer jest wyłączany po wylogowaniu z systemu. Dlatego w przypadku systemów produkcyjnych zaleca się korzystanie z usługi jWebSocket (dla systemu Windows) lub aplikacji internetowej jWebSocket (dla wszystkich systemów operacyjnych). W pakiecie instalacyjnym znajdują się odpowiednie skrypty do zainstalowania i odinstalowania usługi.

Wymagania wstępne na serwerze

Ponieważ serwer jWebSocket jest oparty na czystej technologii Java, upewnij się, że na serwerze jest zainstalowane środowisko Java Runtime Environment (JRE) 1.6 lub nowsze oraz że zmienna środowiskowa JAVA_HOME odnosi się do folderu głównego tej instalacji Java. Do zmiennej środowiskowej PATH należy dodać ścieżkę do pliku wykonywalnego Java. W przeciwnym razie może być konieczne dostosowanie dostarczonej partii początkowej lub skryptu.

jWebSocket "Hello World" dla przeglądarek

Utworzenie od podstaw pierwszego klienta jWebSocket "Hello World" jest proste. Nawet jeśli Twój serwer jWebSocket jeszcze nie działa, do pierwszych testów możesz użyć serwera live jWebSocket pod adresem ws: //jwebsocket.org: 8787.

Zasadniczo klient inicjuje komunikację przez gniazdo sieciowe między nim a serwerem. Po ustanowieniu połączenia klient wysyła wiadomości do serwera lub do innych klientów za pośrednictwem serwera. W przeciwnym kierunku serwer wysyła wiadomości do klienta przy użyciu tego samego połączenia. O ile połączenie nie zostanie przerwane ani przez serwer, ani przez klienta, obaj partnerzy mogą wymieniać dowolne komunikaty dwukierunkowo. To prawie wszystko, czego potrzebujesz, aby rozpocząć swój pierwszy projekt jWebSocket.

Osadzanie skryptu jWebSocket

Jedyną rzeczą, którą musisz zrobić, aby używać jWebSocket na swoich stronach internetowych i otworzyć swoją witrynę na świat dwukierunkowych aplikacji czasu rzeczywistego, jest umieszczenie pojedynczego tagu skryptu w sekcji head kodu HTML:

< script type = "text / javascript" src = "< path_to_jWebSocket.js > /jwebsocket.js" >

< /script >

Dzięki temu jWebSocket będzie dostępny dla Twojej strony. Możesz użyć pełnego, udokumentowanego kodu źródłowego w wierszu jWebSocket.js, który jest najlepszym wyborem do nauki jWebSocket, lub wersji zminimalizowanej w jWebSocket_min.js zalecanej dla twojego systemu produkcyjnego.

Tworzenie instancji jWebSocketClient

jWebSocket udostępnia klasę jWebSocketJSONClient w ramach przestrzeni nazw specyficznej dla jWebSocket jws. Ta klasa udostępnia metody łączenia i rozłączania, a także wymiany wiadomości z serwerem przy użyciu protokołu JSON. Przestrzeń nazw pozwala uniknąć konfliktów nazewnictwa z innymi strukturami.

// jws.browserSupportsWebSockets sprawdza, czy gniazda sieciowe są dostępne

// natywnie, przez FlashBridge lub przez ChromeFrame.

if (jws.browserSupportsWebSockets ()) {

jWebSocketClient = new jws.jWebSocketJSONClient ();

// Opcjonalnie włącz sterowanie GUI tutaj

} else {

// Opcjonalnie wyłącz kontrolki GUI tutaj

var lMsg = jws.MSG_WS_NOT_SUPPORTED;

alert (lMsg);

}

Łączenie i logowanie

Aby zainicjować połączenie od klienta do serwera, możesz skorzystać z metody logowania jWebSocketClient. Ta metoda łączy się z serwerem i przekazuje nazwę użytkownika i hasło do uwierzytelnienia za jednym razem.

log( "Connecting to " + lURL + " and logging in as '" + gUsername + "'..." );

var lRes = jWebSocketClient.logon( lURL, gUsername, lPassword, {

// OnOpen callback

OnOpen: function( aEvent ) {

log( "< font style='color:#888'>jWebSocket connection established.

< /font >" );

},

// OnMessage callback

OnMessage: function( aEvent, aToken ) {

log( "jWebSocket '" + aToken.type

+ "' token received, full message: '" + aEvent.data + "'" );

},

// OnClose callback

OnClose: function( aEvent ) {

log( "< font style='color:#888' >jWebSocket connection closed.

< /font >" );

}

});

Serwer przypisuje klientowi unikalny identyfikator, dzięki czemu do konkretnego klienta można zawsze adresować unikalne adresy, nawet jeśli ten sam użytkownik loguje się w wielu instancjach przeglądarki.

Wysyłanie i nadawanie tokenów

Jeśli połączenie zostało pomyślnie nawiązane, klient wysyła swoje komunikaty metodą wysyłania do innego klienta lub rozgłasza je do wszystkich połączonych klientów za pomocą metody rozgłaszania jWebSocketClient.

// lMsg is a string

if( lMsg.length > 0 ) {

var lRes = jWebSocketClient.broadcastText(

"", // broadcast to all clients (not limited to a certain pool)

lMsg // broadcast this message

);

if( lRes.code != 0 ) {

// display error

}

}

Wysyłanie wiadomości jest zawsze nieblokujące - to znaczy zarówno wysyłanie, jak i rozgłaszanie nie czekają, aż zostanie zwrócony potencjalny wynik. Opcjonalny wynik jest zwracany asynchronicznie, zgodnie z opisem poniżej.

Przetwarzanie wiadomości przychodzących

Wiadomości z serwera do klienta są przekazywane asynchronicznie. Dlatego klasa jWebSocketClient udostępnia zdarzenie OnMessage. Jak już pokazano w metodzie logowania, aplikacja po prostu dodaje odbiornik do tego zdarzenia i przetwarza wiadomość zgodnie z potrzebami.

// OnMessage callback

OnMessage: function( aEvent, aToken ) {

log( "< font style='color:#888' >jWebSocket '" + aToken.type + "' token received, full message: '" + aEvent.data + "'< /font >"

); } Pełne odniesienie do zestawu tokenów jWebSocket znajdziesz w przewodniku dla programistów online.

Wylogowywanie i rozłączanie

Na żądanie zarówno serwer, jak i klient mogą zakończyć istniejące połączenie. Po stronie klienta odbywa się to za pomocą metody close jWebSocketClient

if (jWebSocketClient) {

jWebSocketClient.close ();

}

Serwer automatycznie przerywa połączenie po pewnym okresie braku aktywności na linii. W takim przypadku wyzwalane jest zdarzenie OnClose, które może być obsługiwane przez odpowiednie wywołanie zwrotne, jak pokazano wcześniej w metodzie logowania. Limit czasu można skonfigurować i opcjonalnie można uruchomić funkcję utrzymywania aktywności lub ponownego połączenia

Rozszerzenie jWebSocket za pomocą wtyczek

Jedną z najpotężniejszych funkcji jWebSocket jest możliwość rozbudowy za pomocą wtyczek. Wtyczki rozszerzają funkcjonalność serwera jWebSocket Server, udostępniając metody przetwarzania wiadomości przychodzących od klientów, a także innych zdarzeń, takich jak połączenie klienta lub odłączenie klienta. Wiadomości przychodzące są filtrowane przez łańcuch filtrów jWebSocket, dzięki czemu zapewniają wysoki poziom bezpieczeństwa. Wtyczki można ładować programowo przez kod - szczególnie w celach programistycznych - lub dynamicznie w czasie wykonywania, po prostu odwołując się do niego w pliku konfiguracyjnym jWebSocket.xml, co jest zalecane w środowiskach produkcyjnych lub jeśli chcesz rozpowszechniać wtyczki. W przeciwieństwie do aplikacji WebSocket, wtyczki mają implementować usługi ogólne, a nie logikę specyficzną dla aplikacji. Główną zaletą wtyczek jest to, że są one traktowane jako oddzielne, samowystarczalne fragmenty oprogramowania, które można nawet dystrybuować oddzielnie - o otwartym lub zamkniętym kodzie źródłowym - albo udostępniać w wielu aplikacjach. Utworzenie pierwszej wtyczki i udostępnienie jej funkcji w witrynie jest prostym procesem:

1. Utwórz wtyczkę po stronie serwera.

2. Dodaj swoją wtyczkę do serwera jWebSocket.

3. Utwórz wtyczkę po stronie klienta (zalecane w celu utrzymania czystości modułów i przestrzeni nazw).

4. Korzystaj z funkcji wtyczek na swoich stronach internetowych.

Utwórz wtyczkę po stronie serwera

Pierwszym krokiem w celu rozszerzenia funkcjonalności serwera jWebSocket jest utworzenie wtyczki po stronie serwera. Wtyczka jest zwykle implementowana jako potomek klasy TokenPlugIn, która jest zawarta w jWebSocket. Aby opracować własne wtyczki, zaleca się tworzenie ich w osobnych pakietach. Ułatwi to późniejsze rozpowszechnianie ich jako pojedynczych plików .jar, które można dodać do każdej instancji serwera jWebSocket Server. Poniższa lista przedstawia prostą wtyczkę z pojedynczym "poleceniem" requestServerTime:

public class SamplePlugIn extends TokenPlugIn {

private static Logger log = Logging.getLogger(SamplePlugIn.class);

// if namespace changed update client plug-in accordingly!

private static String NS_SAMPLE = JWebSocketConstants.NS_BASE + ".plugins.sample";

private static String SAMPLE_VAR = NS_SAMPLE + ".started";

public SamplePlugIn() {

if (log.isDebugEnabled()) {

log.debug("Instantiating sample plug-in...");

}

// specify default name space for sample plugin

this.setNamespace(NS_SAMPLE);

}

@Override

public void connectorStarted(WebSocketConnector aConnector) {

// this method is called every time when a client

// connected to the server

aConnector.setVar(SAMPLE_VAR, new Date().toString());

}

@Override

public void connectorStopped(WebSocketConnector aConnector, CloseReason aCloseReason) {

// this method is called every time when a client

// disconnected from the server

}

@Override

public void engineStarted(WebSocketEngine aEngine) {

// this method is called when the engine has started

super.engineStarted(aEngine);

}

@Override

public void engineStopped(WebSocketEngine aEngine) {

// this method is called when the engine has stopped

super.engineStopped(aEngine);

}

@Override

public void processToken(PlugInResponse aResponse,

WebSocketConnector aConnector, Token aToken) {

// get the type of the token

// the type can be associated with a "command"

String lType = aToken.getType();

// get the namespace of the token

// each plug-in should have its own unique namespace

String lNS = aToken.getNS();

// check if token has a type and a matching namespace

if (lType != null && lNS != null && lNS.equals(getNamespace())) {

// get the server time

if (lType.equals("requestServerTime")) {

// create the response token

// this includes the unique token-id

Token lResponse = createResponse(aToken);

// add the "time" and "started" field

lResponse.put("time", new Date().toString());

lResponse.put("started", aConnector.getVar(SAMPLE_VAR));

// send the response token back to the client

sendToken(aConnector, lResponse);

}

}

}

}

Dodaj swoją wtyczkę do serwera jWebSocket

Poniższa lista pokazuje, jak dodać nową wtyczkę do łańcucha wtyczek serwera jWebSocket Server:

// uruchom podsystem serwera jWebSocket

JWebSocketFactory.start (...);

// dodaj swoją wtyczkę do łańcucha wtyczek serwera jWebSocket Server

TokenServer lTS = (TokenServer) JWebSocketFactory.getServer ("ts0");

SamplePlugIn lSP = nowa SamplePlugIn ();

lTS.getPlugInChain (). addPlugIn (lSP);

Klasa JWebSocketFactory ładuje i uruchamia serwer jWebSocket Server, w tym wszystkie wymagane biblioteki, domyślne wtyczki i filtry. Najpierw TokenServer jest uzyskiwany na podstawie jego identyfikatora, który jest konfigurowany w pliku konfiguracyjnym jWebSocket.xml. Następnie tworzona jest instancja nowej wtyczki i dodawana do łańcucha wtyczek TokenServer. Otóż to; wszystkie funkcje nowej wtyczki są teraz dostępne dla klientów.

Tworzenie wtyczki po stronie klienta

Ogólnie rzecz biorąc, istnieją dwa sposoby uzyskania dostępu do wtyczki po stronie serwera. Po pierwsze, możesz po prostu użyć metody sendToken biblioteki JavaScript jWebSocket.js i zaimplementować detektor do swojej metody OnMessage. Zachęcałbym jednak do dostarczenia osobnego pliku JavaScript jako wtyczki po stronie klienta, aby zachować moduł i interfejs API w czystości i ułatwić późniejszą dystrybucję pakietu w dwóch plikach (wtyczka po stronie serwera i wtyczka po stronie klienta -w). Poniższa lista przedstawia, w jaki sposób można utworzyć wtyczkę klienta jWebSocket. Dostarcza metodę requestServerTime do JavaScript jWebSocketTokenClient - a tym samym do malejącej , jWebSocketJSONClient również przez dziedziczenie.

jws.SamplesPlugIn = {

// namespace for shared objects plugin

// if namespace is changed update server plug-in accordingly!

NS: jws.NS_BASE + ".plugins.samples",

processToken: function( aToken ) {

// check if namespace matches

if( aToken.ns == jws.SamplesPlugIn.NS ) {

// here you can handle incoming tokens from the server

// directy in the plug-in if desired.

if( aToken.reqType == "requestServerTime" ) {

// this is just for demo purposes

// don't use blocking call here!

alert( "jWebSocket Server returned: " + aToken.time );

}

}

},

requestServerTime: function( aOptions ) {

var lRes = this.createDefaultResult();

if( this.isConnected() ) {

var lToken = {

ns: jws.SamplesPlugIn.NS,

type: "requestServerTime"

};

this.sendToken( lToken, aOptions );

} else {

lRes.code = ?1;

lRes.localeKey = "jws.jsc.res.notConnected";

lRes.msg = "Not connected.";

}

return lRes;

}

}

// add the jWebSocket Samples PlugIn into the TokenClient class

jws.oop.addPlugIn( jws.jWebSocketTokenClient, jws.SamplesPlugIn );

Użyj wtyczek na swoich stronach internetowych

Ostatnim działaniem mającym na celu udostępnienie funkcji wtyczki Twojej aplikacji jest dodanie łącza do nowej wtyczki klienta na stronach internetowych:

< script type="text/javascript" src="< url >/res/js/jWebSocket.js" >

< /script >

< script type="text/javascript" src="< url >/res/js/jwsSamplesPlugIn.js" >

< /script >

Dołączone wtyczki jWebSocket

jWebSocket jest już dostarczany z ogromnym i stale rosnącym zestawem gotowych do użycia wtyczek. Tabela zawiera szybki przegląd.

Wtyczki dołączone do jWebSocket

Wtyczka: Cel

Wtyczka API: publikowanie interfejsów API WebSocket, takich jak WSDL dla usług internetowych

Arduino-Plug-in: sprzętowe zdalne sterowanie i monitorowanie za pomocą Arduino

Benchmark-Plug-in: obsługa pomiaru prędkości i profilowania komunikacji

Channel-Plug-in: Implementacja modelu komunikacji opartego na kanale

Wtyczka do czatu: obsługa pokojów rozmów, czatów grupowych i prywatnych w czasie rzeczywistym

Wtyczka Events: Implementacja modelu komunikacji opartego na zdarzeniach

Wtyczka systemu plików: foldery publiczne i prywatne z powiadomieniami o aktualizacjach w czasie rzeczywistym

JCaptcha-Plug-in: obsługa Captcha

Wtyczka JDBC: dostęp do bazy danych, pamięć podręczna, synchronizacja i powiadomienia o aktualizacjach

Wtyczka JMX: interfejs WebSocket z rozszerzeniami zarządzania Java EE

Wtyczka JMS: interfejs WebSocket z usługami Java EE Messaging Services

jQuery-Plug-in: obsługa wymiany danych w czasie rzeczywistym dla jQuery i jQuery Mobile

Logging-Plug-in: debugowanie, logowanie serwera i klienta za pomocą gniazd sieciowych

Wtyczka do poczty: obsługa poczty dla SMTP, POP3 i IMAP przez gniazda sieciowe

Wtyczka do monitorowania: zdalne monitorowanie serwera za pomocą biblioteki Sigar

Wtyczka do raportowania: obsługa raportów Jasper przez gniazda sieciowe

Dodatek RPC: zdalne wywołania procedur, klient-serwer, serwer-klient, klient-klient

Sencha-Plug-in: obsługa wymiany danych w czasie rzeczywistym dla Sencha / Sencha Touch / ExtJS

Shared-Canvas-Plugin: Demo do udostępniania płótna HTML5 w czasie rzeczywistym; wirtualna tablica

Wtyczka Shared-Objects: obsługa synchronizacji danych między klientami w czasie rzeczywistym

Wtyczka SMS: obsługa dystrybucji wiadomości SMS przez różnych dostawców

Wtyczka Statistics: Dostęp i statystyki użytkownika dla usług opartych na technologii WebSocket

Wtyczka do przesyłania strumieniowego: Demo do realizacji usług przesyłania strumieniowego za pośrednictwem gniazd internetowych

Wtyczka testowa: wsparcie programistów w zakresie przetwarzania tokenu, odpowiedzi i błędów

Wtyczka Twittera: interfejs WebSocket do usług przesyłania strumieniowego na Twitterze

Wtyczka XMPP: interfejs WebSocket do usług komunikacyjnych Jabber / XMPP

Jeśli preferujesz język programowania Java, powinieneś być teraz gotowy do integracji gniazd sieciowych z aplikacjami - a jeśli naprawdę się ekscytujesz, może nawet stworzysz własną wtyczkę do jWebSocket

Hack No.75

Powiadomienia push do przeglądarki ze zdarzeniami wysłanymi przez serwer

Stworzony przez Operę, Server-Sent Events standaryzuje technologie Comet. Standard ma zapewnić natywne aktualizacje w czasie rzeczywistym za pośrednictwem prostego interfejsu API JavaScript o nazwie EventSource, który łączy się z serwerami, które asynchronicznie wysyłają aktualizacje danych do klientów za pośrednictwem przesyłania strumieniowego HTTP. Zdarzenia wysyłane przez serwer korzystają z pojedynczego, jednokierunkowego, trwałego połączenia między przeglądarką a serwerem. W przeciwieństwie do interfejsu API WebSocket, zdarzenia wysyłane przez serwer i obiekt EventSource używają protokołu HTTP do włączania funkcji wypychania serwera w czasie rzeczywistym w aplikacji. Strumieniowanie HTTP poprzedza WebSocket API i jest często określane jako Comet lub serwer push. Ekscytującą częścią jest to, że API Server-Sent Events ma na celu ujednolicenie techniki Comet, dzięki czemu jej implementacja w przeglądarce.

Co to jest przesyłanie strumieniowe HTTP?

W przypadku standardowego żądania HTTP i odpowiedzi między przeglądarką internetową a serwerem WWW, serwer zamknie połączenie po zakończeniu przetwarzania żądania. Strumieniowanie HTTP lub Comet różni się tym, że serwer utrzymuje stałe, otwarte połączenie z przeglądarką. Należy zauważyć, że nie wszystkie serwery internetowe umożliwiają przesyłanie strumieniowe. Tylko serwery zdarzeń, takie jak Node.js, Tornado i Thin, są wyposażone w obsługę pętli zdarzeń, która jest optymalna do obsługi przesyłania strumieniowego HTTP. Te nieblokujące serwery bardzo dobrze obsługują trwałe połączenia z dużej liczby równoczesnych żądań. Pełne omówienie serwerów zdarzonych i wielowątkowych wykracza poza zakres tej książki, ale biorąc to pod uwagę, w tym hacku przedstawię bardzo prosty przykład implementacji serwera eventowego, abyś mógł zacząć. Dostarczam prosty JavaScript oparty na przeglądarce do łączenia się z serwerem oraz implementację po stronie serwera przy użyciu Ruby, Thin i Sinatra. Dla przypomnienia, jest to również bardzo łatwe w przypadku Node.js. Miej oko na towarzyszące repozytoria Git, aby uzyskać aktualizację w przyszłości.

Ruby′s Sinatra

Dokumentacja Sinatra opisuje się jako "DSL do szybkiego tworzenia aplikacji internetowych w Rubim przy minimalnym wysiłku". Ten tekst koncentruje się głównie na Node.js (serwer HTTP) i Express.js (web framework aplikacji), aby szybko wygenerować implementacje po stronie serwera w celu zhakowania funkcjonalności. Byłoby źle nie wspomnieć o Rubim, Railsach i Sinatrze w tym samym lub podobnym świetle, w jakim mam Node.js w tym tekście. Chociaż nauka Ruby to kolejna krzywa uczenia się, w szerszym schemacie języków programowania jest to mniej zniechęcająca niż większość. I jak głosi większość zagorzałych rubistów, jest to prawdopodobnie najbardziej elegancki i zabawny ze wszystkich współczesnych języków programowania. Ruby on Rails i jego młodszy brat Sinatra są również świetnymi frameworkami dla aplikacji internetowych, od których możesz zacząć, jeśli jesteś nowy w tworzeniu aplikacji internetowych. Podobnie jak Node.js i Express.js, Sinatra sprawia, że tworzenie małych implementacji serwerów jest prawie trywialne. W kontekście hacków HTML5 pozwala nam to skupić się na programowaniu w przeglądarce. Na razie zbudujmy prosty serwer przesyłania strumieniowego HTTP przy użyciu Sinatry. Zacząłem od Ruby on Rails lub Sinatra, zapoznaj się ze świetną dokumentacją dostępną odpowiednio na rubyonrails.org i sinatrarb.com. Alternatywnie możesz pominąć poniższe czynności, tworząc klon Gita w repozytorium http: // github / html5hacks / Chapter9 i postępując zgodnie z instrukcjami.

Tworzenie powiadomień push

Naszym celem w tym hacku jest zbudowanie prostego serwera strumieniowego i korzystanie z EventSource, aby otworzyć trwałe połączenie z przeglądarki. Następnie będziemy przesyłać powiadomienia z jednej przeglądarki administratora do wszystkich podłączonych odbiorników. Brzmi prosto, prawda? Zacznijmy.

Prosty serwer strumieniowy http

Najpierw otworzymy plik i nadamy mu nazwę stream.rb. Następnie dodamy:

require 'json'

require 'sinatra'

Następnie skonfigurujemy folder publiczny i ustawimy serwer tak, aby używał zdarzonego serwera Ruby, Thin:

set :public_folder, Proc.new { File.join(root, "public") }

set server: 'thin'

Teraz musimy ustawić dwie trasy do obsługi naszych dwóch stron: index i admin. Użyjemy ERB jako naszego języka szablonów. Szczegóły ERB wykraczają poza zakres tej książki, ale nasze użycie jest bardzo minimalne. Więcej informacji na temat ERB można znaleźć na ruby-doc.org.

get '/' do

erb :index

end

get '/admin' do

erb :admin

end

Chcielibyśmy oznaczyć datownikiem każde powiadomienie, więc oto bardzo prosta definicja funkcji:

def timestamp

Time.now.strftime ("% H:% M:% S")

end

Chcemy również ustawić dwie puste tablice: jedną do przechowywania połączeń, a drugą do przechowywania naszych powiadomień.

connections = []

notifications = []

Teraz dla tras: kiedy nasza przeglądarka ładuje swoją stronę, mamy uruchomiony JavaScript, który użyje obiektu EventSource do połączenia się z adresem URL pod adresem http: // localhost: 4567 / connect. (Więcej o EventSource później.) Na razie możesz zobaczyć magię strumienia HTTP o zdarzeniu. Połączenie pozostaje otwarte do momentu wywołania zwrotnego w celu zamknięcia strumienia.

get '/connect', provides: 'text/event-stream' do

stream :keep_open do |out|

connections << out

#out.callback on stream close evt.

out.callback {

#delete the connection

connections.delete(out)

}

end

end

Na koniec wszelkie dane, które są publikowane na trasie / push, są wypychane do każdego podłączonego urządzenia:

post '/push' do

puts params

#Add the timestamp to the notification

notification = params.merge( {'timestamp' => timestamp}).to_json

notifications << notification

notifications.shift if notifications.length > 10

connections.each { |out| out << "data: #{notification}\n\n"}

end

Jak powiedziałem wcześniej, możesz po prostu postępować zgodnie z instrukcjami w repozytorium Git, aby ściągnąć i zbudować ten kod. Lub, jeśli śledziłeś, uruchom Terminal, przejdź do katalogu, w którym znajduje się twój kod, i wykonaj następujące czynności:

$ ruby stream.rb

W porządku, teraz mamy uruchomioną aplikację Sinatra z niestandardowymi trasami do obsługi żądań przychodzących z naszej przeglądarki. Jeśli nie ma to jeszcze pełnego sensu, po prostu się rozluźnij. W kolejnych podrozdziałach reszta elementów zacznie się układać.

Konfigurowanie stron HTML

Będziemy budować dwie strony: jedną dla administratora, aby wysyłać powiadomienia, a drugą dla podłączonych odbiorników, aby otrzymywać powiadomienia. Oba te "widoki" będą miały ten sam układ, jak pokazano tutaj:

< html >

< head >

< title >HTML5 Hacks - Server Sent Events< /title >

< meta charset="utf-8" / > < script src=http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js >

< /script >

< script src=http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js >

< /script >

< script src="jquery.notify.js" type="text/javascript" >< /script >

< link rel="stylesheet" type="text/css" href="style.css" >

< link rel="stylesheet" type="text/css" href="ui.notify.css" >

< /head >

< body >

< !-- implementaion specific here -- >

< /body >

< /html >

Strona administratora będzie zawierała tag < input > i prosty przycisk:

< div id="wrapper" >

< input type="text" id="message" placeholder=" Enter Notification Here" / >

< input type="button" id="send" data-role="button" >push< /input >

< /div >

Na naszych stronach odbiorczych będzie wyświetlany prosty fragment tekstu:

< div id="wrapper" >

< p >Don't Mind me ... Just Waiting for a Push Notification from HTML5 Hacks.< /p >

< /div >

Uruchamiając jedno okno przeglądarki na http: // localhost: 4567 / admin, powinniśmy teraz zobaczyć nasz formularz administratora.

Dodanie trochę jQuery

Musimy dodać trochę JavaScript, aby dołączyć detektor zdarzeń do przycisku wysyłania. Ten fragment kodu uniemożliwi domyślne przesłanie formularza i opublikuje obiekt powiadomienia na serwerze w formacie JSON. Zwróć uwagę na mapy URL / push do trasy, którą zdefiniowaliśmy w naszej aplikacji Sinatra:

$('#send').click(function(event) {

event.preventDefault();

var notification = { notification: $('#notification').val()};

$.post( '/push', notification,'json');

})

Teraz otwórzmy pięć okien przeglądarki: jednego administratora pod adresem http: // localhost: 4567 / admin i czterech kolejnych odbiorników pod adresem http: // localhost: 4567. Wygląda dobrze. Nadszedł czas, aby skonfigurować nasze źródło zdarzeń.

EventSource

EventSource API to bardzo prosty interfejs API JavaScript do otwierania pliku przy połączeniu ze strumieniem HTTP. Ponieważ nasze strony odbiorcze to po prostu "głupie" terminale odbierające dane, mamy idealny scenariusz dla zdarzeń po stronie serwera. Jeśli chcesz, aby komunikacja dwukierunkowa miała miejsce, w tym rozdziale znajduje się wiele przykładów protokołu WebSocket. Wcześniej, kiedy omawialiśmy aplikację Sinatra, widzieliście, jak ujawnić trasę dla przeglądarki, aby połączyć się ze strumieniem HTTP. Cóż, tutaj się łączymy!

var es = new EventSource('/connect');

es.onmessage = function(e) {

var msg = $.parseJSON(event.data);

// ... Notify

}

Teraz możemy dodać proste powiadomienie z dostępnymi danymi:

var es = new EventSource('/connect');

es.onmessage = function(e) {

var msg = $.parseJSON(event.data);

// ... Notify

}

A oto ostateczny skrypt dla administratora:

$(function() {

$('#send').click(function(event) {

event.preventDefault();

var notification = {message: $('#notification').val()};

$.post( '/push', notification,'json');

})

});

Instalowanie jQuery.notify

Do naszych powiadomień push będziemy używać świetnej wtyczki jQuery Erica Hyndsa, jQuerynotify. Aby wyświetlić powiadomienie, musimy umieścić na stronie odbiorcy pewne znaczniki:

< div id = "container" style = "display: none" >

< div id = "basic-template" >

< a class="ui-notify-cross ui-notify-close" href="#" > x < /a >

< h1 > # {title} < /h1 >

< p > # {text} < /p >

< /div >

< /div >

Spowoduje to utworzenie ukrytego znacznika DIV na dole dokumentu. Nie pokazujemy CSS, który używa "display: none", aby go ukryć, ale możesz zobaczyć więcej, badając kod źródłowy w towarzyszącym repozytorium Git. Aby jQuery.notify się zainicjował, musimy najpierw wywołać następujące czynności:

$("#container").notify({

speed: 500,

expires: false

});

Oto ostateczny skrypt dla odbiorcy:

$(function() {

$("#container").notify({

speed: 500,

expires: false

});

var es = new EventSource('/connect');

es.onmessage = function(e) {

var msg = $.parseJSON(event.data);

$("#container").notify("create", {

title: msg.timestamp,

text: msg.notification

});

}

})

To takie proste. Interfejs API EventSource jest minimalny, a podłączenie go do struktury internetowej, takiej jak Sinatra lub Node.js, jest proste. Teraz, gdy wysyłamy powiadomienia ze strony administratora, nasze strony odbiorców są aktualizowane powiadomieniami ze znacznikami czasu

[]

Ha(c)ki na… HTML 5

Hack No.46

Hack No.47

Hack No.48

Hack No.49

Hack No.50

Hack No.51

Hack No.52

Hack No.53

Hack No.54

Hack No.55

Hack No.56

Hack No.57

Hack No.58

Hack No.59

Hack No.60

Hack No.61

Hack No.62

Hack No.63

Hack No.63

Hack No.64

Hack No.65

Hack No.66

Hack No.67