html5 server push_motic node java college finishing

Untuk aplikasi web umum, sebagian besar pengembang tidak asing. Dalam aplikasi Web, mode permintaan/ respons interaktif digunakan antara browser dan server. Browser mengeluarkan permintaan, dan server menghasilkan respons yang sesuai sesuai dengan permintaan. Browser diproses ke respons penerima kepada pengguna. Format respons mungkin html, xml, atau json. Dengan gaya arsitektur lainnya dan popularitas AJAX, server menggunakan JSON sebagai lebih banyak format data respons. Aplikasi Web menggunakan objek XMLHTTPREQUEST untuk mengirim permintaan dan secara dinamis memperbarui konten halaman sesuai dengan data yang dikembalikan oleh server. Secara umum, operasi pengguna di halaman, seperti mengklik atau memindahkan mouse, akan memicu acara yang sesuai. Permintaan dikeluarkan oleh objek XMLHTTPREQUEST, dan halaman memiliki pembaruan lokal setelah server merespons. Kekurangan metode ini adalah bahwa data yang dihasilkan oleh server tidak dapat diberitahu tentang browser tepat waktu, tetapi perlu diperoleh oleh browser sampai permintaan berikutnya dikirim. Untuk beberapa aplikasi dengan persyaratan data waktu tinggi, penundaan ini tidak dapat diterima. Untuk memenuhi kebutuhan aplikasi tersebut, ada kebutuhan untuk beberapa cara untuk mendorong data dari server ke browser untuk memastikan bahwa data berubah di sisi server dapat diberitahukan kepada pengguna pada pertama kalinya. Ada banyak solusi umum, yang dapat dibagi menjadi dua kategori. Perbedaan antara kedua metode ini adalah apakah didasarkan pada protokol HTTP. Praktik tidak menggunakan protokol HTTP adalah menggunakan spesifikasi Websocket baru dari HTML 5, dan metode menggunakan protokol HTTP termasuk rotasi sederhana, teknologi COMET, dan acara dorong server HTML 5 yang dijelaskan dalam artikel ini. Teknologi ini akan diperkenalkan di bawah ini.

Sebelum memperkenalkan acara Push Server HTML 5, pertama -tama perkenalkan beberapa jumlah teknologi dorongan data server yang disebutkan di atas. Yang pertama adalah Websocket. Spesifikasi Websocket adalah bagian penting dari HTML 5. Telah didukung oleh banyak browser utama, dan banyak aplikasi yang dikembangkan berdasarkan Websocket. Sama seperti namanya diungkapkan, WebSocket menggunakan koneksi jaket, berdasarkan protokol TCP. Setelah menggunakan WebSocket, itu sebenarnya membangun satu set koneksi kata antara server dan browser, yang dapat ditransmisikan dalam dua data jalan. Fungsi Websocket sangat kuat, dan fleksibel untuk digunakan, yang dapat cocok untuk skenario yang berbeda. Namun, teknologi Websocket juga relatif rumit, termasuk implementasi server dan sisi browser berbeda dari aplikasi web biasa.

Kecuali untuk WebSocket, metode implementasi lainnya didasarkan pada protokol HTTP untuk mencapai efek dorongan waktu nyata. Metode pertama adalah rotasi sederhana, yaitu, browser mengirimkan permintaan ke server dari waktu ke waktu untuk menanyakan apakah ada pembaruan data. Pendekatan ini relatif sederhana dan dapat menyelesaikan masalah sampai batas tertentu. Namun, dengan hati -hati mempertimbangkan interval waktu rotasi. Jika interval antara rotasi terlalu lama, itu akan menyebabkan pengguna tidak menerima data yang diperbarui dalam waktu;

Teknologi komet telah meningkatkan kekurangan rotasi sederhana, menggunakan pertanyaan roda yang telah lama. Setiap permintaan untuk rotasi lama, server akan menjaga koneksi dalam periode pembukaan untuk jangka waktu tertentu, daripada menutupnya segera setelah respons selesai. Keuntungan dari ini adalah bahwa dalam periode waktu ketika koneksi dibuka, pembaruan data yang dihasilkan oleh server dapat dikembalikan ke browser tepat waktu. Ketika koneksi panjang ditutup, browser akan segera membuka koneksi panjang baru untuk melanjutkan permintaan. Namun, implementasi teknologi COMET membutuhkan dukungan dari perpustakaan pihak ketiga di server dan sisi browser. Singkatnya, empat teknologi berbeda yang disebutkan di atas tidak disarankan untuk digunakan karena cacatnya. Teknologi komet bukan bagian dari standar HTML 5. Spesifikasi WebSocket dan Teknologi Dorong Server adalah bagian dari standar HTML 5. Namun, spesifikasi WebSocket lebih rumit dan cocok untuk adegan yang perlu rumit dan komunikasi data dua arah. Untuk skenario dorongan data server sederhana, itu cukup untuk menggunakan peristiwa dorong server.

Dalam hal dukungan browser, acara dorong server telah didukung di sebagian besar desktop dan browser seluler kecuali IE. Peramban dan versi acara Push Support Server meliputi: Firefox 6.0+, Chrome 6.0+, Safari 5.0+, Opera 11.0+, iOS Safari 4.0+, Opera Mobile 11.1+, Chrome untuk Android 25.0+, Firefox untuk Andr Andr OID 19.0 + dan BlackBerry Browser 7.0+ et al. Dukungan IE memiliki pengantar terperinci dalam bab -bab berikut.

Spesifikasi berikut dari spesifikasi acara Push Server ditentukan.

Spesifikasi Acara yang Sent Server adalah bagian integral dari spesifikasi HTML 5. Spesifikasi ini relatif sederhana, terutama terdiri dari dua bagian: Bagian pertama adalah protokol komunikasi antara server dan sisi browser, dan bagian kedua adalah objek Eventource yang digunakan oleh browser untuk menggunakan JavaScript. Protokol komunikasi adalah protokol sederhana berdasarkan teks murni. Konten respons di server adalah teks/event-stream. Isi teks respons dapat dianggap sebagai aliran acara, yang terdiri dari berbagai peristiwa. Setiap acara terdiri dari dua bagian: jenis dan data, dan setiap acara dapat memiliki pengidentifikasi opsional. Isi berbagai peristiwa dipisahkan oleh garis kosong (/r/n) yang hanya mencakup mobil masuk dan simbol kerajaan. Data setiap peristiwa dapat terdiri dari beberapa baris. Daftar Kode 1 memberikan contoh respons server -side.

 Data: First EventData: Second EventID: 100Event: MyEventData: Third EventID: 101: Ini adalah komentar Data: Fouteh EventData: Fours Event Lanjutkan

Seperti yang ditunjukkan pada Daftar 1, setiap acara dipisahkan oleh garis kosong. Untuk setiap baris, usus besar (:) adalah jenis garis sebelumnya, dan nilai yang sesuai di belakang usus besar. Jenis yang mungkin termasuk:

1. Jenisnya kosong, menunjukkan bahwa garis tersebut adalah komentar dan akan diabaikan selama pemrosesan.
2. Jenisnya adalah data, yang berarti bahwa garis berisi data. Ini dapat muncul berkali -kali di awal data. Semua baris ini adalah data dari insiden tersebut.
3. Jenisnya adalah peristiwa, menunjukkan bahwa bank digunakan untuk menyatakan jenis acara. Saat menerima data, browser akan menghasilkan jenis acara yang sesuai.
4. Jenisnya adalah ID, menunjukkan bahwa garis digunakan untuk mendeklarasikan pengidentifikasi acara.
5. Jenisnya coba lagi, menunjukkan bahwa saluran digunakan untuk mendeklarasikan waktu tunggu sebelum browser terhubung setelah koneksi terputus.

Dalam kode di atas, acara pertama hanya berisi acara First Data, yang akan menghasilkan acara default; Acara ini adalah acara Fours/nfounth Eovent. Ketika ada beberapa baris data, data aktual dihubungkan oleh data untuk perubahan saluran.

Jika data yang dikembalikan oleh server berisi pengidentifikasi acara, browser akan merekam pengidentifikasi acara yang baru saja diterima. Jika koneksi ke server terganggu, ketika ujung browser terhubung lagi, logo terakhir kali acara diperoleh oleh head-event-id http. Server dapat ditentukan oleh pengidentifikasi acara yang dikirim oleh sisi browser untuk menentukan acara mana yang mulai melanjutkan koneksi.

Untuk respons yang dikembalikan oleh sisi server, sisi browser perlu menggunakan objek Eventource di JavaScript untuk diproses. Eventsource menggunakan metode pemantauan acara standar, yang hanya perlu menambahkan metode pemrosesan acara yang sesuai ke objek. Eventsource menyediakan tiga acara standar, seperti yang ditunjukkan pada Tabel 1.

Seperti yang disebutkan sebelumnya, server dapat mengembalikan acara tipe khusus. Untuk acara ini, Anda dapat menggunakan metode AddEventListener untuk menambahkan metode pemrosesan acara yang sesuai. Daftar Kode 2 memberikan contoh objek EventSource.

 var es = eventsource baru ('peristiwa'); data);});

Seperti yang ditunjukkan di atas, setelah membuat objek EventSource secara khusus, metode pemrosesan acara dapat ditambahkan melalui metode OnMessage dan AddEventListener. Ketika server memiliki acara baru, metode pemrosesan acara yang sesuai akan dipanggil. Peran properti OnMessage dari objek EventSource mirip dengan AddEventListener ('pesan'), tetapi atribut OnMessage hanya mendukung satu metode pemrosesan acara. Setelah memperkenalkan konten spesifikasi dari acara Push Server, implementasi server diperkenalkan di bawah ini.

Dapat dilihat dari deskripsi protokol komunikasi di bagian sebelumnya bahwa acara Push Server adalah protokol yang lebih sederhana. Implementasi sisi server relatif sederhana. Berbagai teknologi server -side yang berbeda dapat ditemukan di komunitas open source. Tidak sulit untuk berkembang dengan sendirinya. Artikel ini menggunakan Java sebagai bahasa implementasi server. Dengan demikian, mengimplementasikan proyek berbasis sumber-sumber-servlet terbuka, lihat Sumber Daya Referensi. Berikut ini adalah contoh spesifik untuk menggambarkan cara menggunakan proyek jetty-eventsource-servlet. Contoh ini digunakan untuk mensimulasikan gerakan acak suatu objek dalam ruang terbatas. Objek dimulai dari posisi acak, dan kemudian secara acak memilih satu arah dari atas, bawah, kiri, dan arah kanan, dan menggerakkan jarak acak ke arah ini. Server terus -menerus mengubah posisi objek dan mendorong informasi lokasi ke browser, yang ditampilkan oleh browser.

服务器端的实现由两部分组成 ： 一部分是用来产生数据的 org.eclipse.jetty.servlets.eventsource 接口的实现 ， 另一部分是作为浏览器访问端点的继承自 org.eclipse.jetty.servlets.eventsourceservlet 类的Implementasi Servlet. Kode berikut memberikan kelas implementasi antarmuka eventsource.

Eventsource Interface Implementasi Kelas Gerakan Sumber

 Public GovernedEventSource mengimplementasikan Eventsource {private int width = 800; Logger .getLogger (getSclass (). getName ()); .nextint (lebar); (LastEventID); // Perbarui Kueri Posisi Mulai (Emitter); .split (,); POS [1], 10);} Catch (NumberFormatException E) {} if (isValidMove (xpos, ypos)) {x = xpos; Informasi.); .data (id) Menurut lokasi; // Kirim Data Informasi Posisi Coba {thread.sleep (2000);} catch (InterruptedException e) {Logger.log (level.warning, /utas permintaan gerakan terputus. Tutup koneksi. , E); MOVE = GetMove (); Menilai apakah posisi gerakan saat ini legal. xdir = int} baru; )};}}

Gerakan Muncul Sumber untuk mengimplementasikan metode OnOpen, OnResume dan Onclose dari Eventsource Interface. Baik metode OnOpen dan OnResume memiliki parameter antarmuka eventsource.emitter, yang dapat digunakan untuk mengirim data. Metode yang terkandung dalam antarmuka eventSource.emitter mencakup data, peristiwa, komentar, ID, dan tutup, yang masing -masing sesuai dengan berbagai jenis peristiwa dalam protokol komunikasi, masing -masing. Metode OnResume juga berisi parameter tambahan LastEventID, yang menunjukkan pengidentifikasi peristiwa terbaru yang dikirim oleh header Event-ID terakhir.

Logika utama peristiwa yang dihasilkan dalam peristiwa di kelas Gerakan Sumber Sumber adalah dalam metode kueri. Metode ini berisi siklus tanpa batas yang mengubah posisi setiap 2 detik, dan pada saat yang sama mengirim posisi yang diperbarui ke ujung browser melalui metode data dari posisi pembaruan melalui metode data dari antarmuka eventsource.emitter. Setiap peristiwa memiliki pengidentifikasi yang sesuai, dan nilai pengidentifikasi adalah posisi itu sendiri. Jika browser dihubungkan kembali setelah koneksi terputus, objek dapat dipindahkan dari posisi terakhir.

Sangat mudah untuk mengimplementasikan layanan layanan -yang sesuai dengan kelas Gerakan Sumber Daya. Dalam implementasi metode newEventSource, kelas Sumber MoventsEvents perlu dikembalikan, seperti yang ditunjukkan di bawah ini. Setiap kali browser ditetapkan, layanan ini membuat objek kelas Gerakan Baru untuk menangani permintaan tersebut.

 Public Class Movementservlet ExtendSorceservlet {@Override Protected Eventsource NewsSource (httpservletRequest, String clientId) mengembalikan Gerakan baru Source (800, 600, 20);}}

Dalam implementasi server, perlu dicatat bahwa dukungan filter server yang sesuai harus ditambahkan. Ini adalah persyaratan dari kerangka kerja kontinuasi dermaga yang diandalkan oleh proyek Jetty-Eventsource-Servlet, jika tidak, akan ada kesalahan dalam kasus ini. Metode menambahkan filter adalah menambahkan konten konfigurasi seperti yang ditunjukkan di bawah ini dalam file web.xml.

 <nilter> <filter-name> Continuate </tilter-name> <nilter-class> org.eclipse.jetty.continuation.continuationFilter </tilter-class> </tilter> <filter-ma pping> <nilter-name> Lanjutan </filter-name> <RURL-PATERS>/SSE/*</RURL-PATERS> </TERFERTER-MAPPING>

Implementasi sisi browser relatif sederhana. Kode berikut memberikan implementasi yang sesuai. Gunakan kuadrat pada halaman untuk mewakili suatu objek. Ketika acara baru diterima, posisi blok ada di halaman sesuai dengan informasi koordinat yang diberikan dalam data acara.

 var es = eventsource baru ('sse/moving'); [1];

Setelah memperkenalkan sisi server dasar dan akhir browser, dukungan IE yang lebih penting diperkenalkan di bawah ini.

Masalah besar menggunakan objek Sumber Daya Asli Browser adalah IE tidak memberikan dukungan. Untuk memberikan dukungan yang sama pada IE, umumnya ada dua cara. Cara pertama adalah menggunakan objek Eventsource asli di browser lain, saat menggunakan rotasi sederhana atau teknologi komet pada IE; . Artikel ini menggunakan teknologi Polyfill, hanya memuat perpustakaan JavaScript -Party ketiga di halaman. Menerapkan kode sisi browser tidak perlu diubah. Secara umum disarankan untuk menggunakan metode kedua, karena dengan cara ini, hanya satu teknologi implementasi yang diperlukan di sisi server.

Tidak mudah untuk memberikan objek Eventsource utama yang serupa di IE. Secara teori, hanya objek XMLHTTPRequest yang diperlukan untuk mendapatkan konten respons dari sisi server, dan melalui analisis teks, peristiwa yang sesuai dapat diekstraksi dan metode pemrosesan acara yang sesuai dapat dipicu. Masalahnya adalah bahwa objek XmlHttpRequest pada IE tidak mendukung konten respons dari bagian yang diperoleh. Hanya setelah respons selesai dapat diperoleh. Karena acara server dorong menggunakan koneksi yang panjang. Ketika koneksi selalu terbuka, peristiwa yang sesuai tidak dapat dipicu melalui objek XmlHttpRequest, dan peristiwa yang sesuai tidak dapat dipicu. Lebih khusus lagi, ketika readystate dari objek XMLHTTPREQUEST adalah 3 (ReadyState_Interactive), atribut responseText -nya tidak dapat diperoleh.

Untuk menyelesaikan masalah objek XMLHTTPREQUEST pada IE, Anda perlu menggunakan objek XDomainRequest yang diperkenalkan di IE 8. Peran objek XdomainRequest adalah mengirim permintaan Ajax silang -Domain. Objek XDomainRequest menyediakan acara OnProgress. Ketika peristiwa OnProgress terjadi, beberapa konten respons dapat diperoleh melalui properti responsetext. Ini adalah perbedaan terbesar antara objek XdomainRequest dan objek XMLHTTPREADEST. Setelah menggunakan objek XDomainRequest untuk membuka koneksi ke sisi server, ketika data baru dihasilkan di server, itu dapat diproses dengan acara OnProgress dari objek XDomainRequest.

Namun, karena tujuan awal dari objek XDomainRequest adalah untuk mengeluarkan permintaan AJAX Cross -Domain. Pembatasan ini akan memengaruhi implementasinya sebagai objek sumber daya. Pembatasan dan solusi spesifik ditunjukkan di bawah ini:

1. Respons server perlu berisi kepala akses-kontrol-kontrol-asal, yang digunakan untuk menyatakan apa yang diizinkan URL dari domain mana yang diizinkan. *Ini berarti memungkinkan akses dari domain apa pun, dan nilai ini tidak disarankan. Umumnya menggunakan domain yang sama dengan aplikasi saat ini, hanya membatasi akses dari domain depan.
2. Permintaan dari objek XdomainRequest tidak dapat berisi kepala http khusus, yang membatasi pengidentifikasi browser yang baru -baru ini diterima oleh browser. Pengidentifikasi ini hanya dapat dilewatkan melalui cara -cara lain dari permintaan HTTP, seperti parameter yang diminta oleh GET atau badan konten dari permintaan POST.
3. Jenis konten (tipe konten) dari objek XDomainRequest hanya dapat berupa teks/polos. Ini berarti bahwa ketika permintaan pos digunakan, kerangka kerja yang digunakan oleh server, seperti layanan, tidak akan secara otomatis menganalisis konten permintaan pos. Konten permintaan asli hanya dapat diuraikan pada server untuk mendapatkan nilai parameter.
4. Permintaan yang dikeluarkan oleh objek XDomainRequest tidak termasuk informasi yang terkait dengan otentikasi pengguna, termasuk cookie. Ini berarti bahwa jika server perlu diautentikasi, metode permintaan HTTP lain untuk meneruskan informasi otentikasi pengguna, seperti ID Sesi.

Karena pembatasan ini pada objek XDomainRequest, implementasi server juga perlu membuat perubahan yang sesuai. Perubahan ini termasuk pengembalian kepala akses-kontrol-origin;

Perpustakaan Polyfill yang digunakan dalam artikel ini adalah proyek Eventource yang dikembangkan oleh Yaffle di GitHub. Setelah menggunakan pustaka Polyfill dan memodifikasi implementasi sisi server, Anda dapat menggunakan server untuk mendorong acara di browser IE 8 dan di atas. Jika Anda perlu mendukung IE 7, Anda hanya dapat menggunakan Teknologi Pertanyaan Sederhana atau Komet. Lihat sumber daya referensi dalam kode contoh artikel ini.

Jika Anda perlu mendorong data dari server ke browser, teknologi yang dapat digunakan berdasarkan standar spesifikasi HTML 5 termasuk acara WebSocket dan server dorong. Pengembang dapat memilih teknologi yang tepat sesuai dengan kebutuhan spesifik aplikasi. Jika Anda hanya perlu mendorong data dari server, standar acara Push Server lebih sederhana dan lebih mudah dicapai. Artikel ini telah memperkenalkan konten standar dari acara Push Server, implementasi server dan sisi browser secara rinci, dan juga menganalisis cara mendukung browser IE.