Menetapkan satu koneksi dua arah antara klien dan server, yang berarti bahwa klien hanya perlu mengirim permintaan ke server, dan server akan memprosesnya. Dapat sambil menunggu waktu ini untuk terus melakukan pekerjaan lain, seluruh proses tidak sinkron. Dalam seri tutorial ini, pengguna akan dipandu untuk menggunakan Parsing JSON API yang baru (JSR-353) di Java EE 7 di Container Glassfish 4, dan gunakan jQuery dan bootstrap dalam kombinasi. Artikel ini mengharuskan pembaca untuk memiliki pengetahuan prinsip dasar tertentu tentang html 5 Websocket.
Diagram reproduksi
Pertama -tama mari kita lihat rendering setelah menyelesaikan tutorial ini, seperti yang ditunjukkan di bawah ini:
Persiapan
Kami menggunakan JDK 7 dan MAVN 3 untuk membangun perpustakaan.
<Properties> <sendorsed.dir> $ {Project.build.directory}/didukung </endorsed.dir> <proyent.build.sourceencoding> UTF-8 </project.build.se urceencoding> </ Properties> <Dependencies> <dependency> <GroupId> javax </groupid> <ArTifactId> javaee-api </stifactid> <version> 7.0 </version> <scope> disediakan </seupope> </dependency> </de pendencies> <build> <buile> Plugins> <lugin> <Groupid> org.apache.maven.plugins </proupid> <ArtiFacTid> Maven-Compiler-Plugin </artifactid> <version> 3.1 </version> <Configuration> <sou rCE> 1.7 </source > <target> 1.7 </target> <compilerArguments> <dendorseddirs> $ {endorsed.dir} </dideorseddirs> </compilerArguments> </configuration> </lugin> <lugin> <groupid> org.apache.maven.plugins> </groupid> <ArTifactId> Maven-war-plugin </artifactid> <version> 2.3 </version> <configuration> <agailonmissingwebxml> false </failonmissingwebxml> </configurati on> </plugin> <lugin> <groupid> org.apache.Pada saat yang sama, untuk menggunakan GlassFish 4, plug-in berikut perlu ditambahkan:
Plugin> <GroupId> org.glassfish.embedded </groupid> <ArTifactId> maven-embbedded-glassfish-plugin </artifactid> <version> 4.0 </version> <confi guration> <ealsprefix> embedded-glassfish </goardprefix> <p App> $ {berbasis}/target/$ {Project.ARTIFACTID}-$ {Project.Version} .war </app> <AtoDelete> true </ autodelete> <port> 8080 </port> <name> $ { Project .ArtiFacTID} </name> <contextroot> hascode </contextroot> </configuration> <sekutif> <Ececution> <ject> <eals> Menyebarkan </ject> </ject> </sece cution> </eksekusi> </lugin>Menyiapkan titik akhir Websocket
Mari pertama -tama lihat kode server Websocket sebagai berikut, dan kemudian lakukan analisis lebih lanjut:
Paket Com.hascode.Tutorial; WebSocket .onopen; decoders = chatmessagedecoder.class) kelas publik chatendpoint {private final logger = logger.getLogger (getClass (). getName ()); {Log. String room = (string) session.getUserProperties (). Get ("room"); coba {for (session s: sesi ) .get (Room "))) {s.getBasicremote (). SendObject (ChatMessage); }}Berikut menganalisis kode di atas:
Gunakan @ServerEndPoint untuk menentukan titik akhir baru, di mana nilainya menentukan URL dan dapat menggunakan parameter PathParams, seperti yang digunakan dalam JAX-RS.
Oleh karena itu, nilai "/chat/{room}" memungkinkan pengguna untuk terhubung ke ruang obrolan melalui url berikut: ws: //0.0.0.0: 8080/hascode/chat/java
Nilai dalam kawat gigi (mis. Kamar) dapat disuntikkan sebagai parameter dalam metode panggilan balik siklus hidup titik akhir dengan menggunakan javax.websocket.server.pathparam.
Selain itu, kami ingin menggunakan kelas yang dikodekan dan diterjemahkan karena kami menggunakan kelas DTO yang digunakan untuk mentransfer data di sisi server dan klien.
Ketika pengguna terhubung ke server untuk pertama kalinya dan memasuki nomor kamar untuk memasuki ruang obrolan, nomor kamar akan disuntikkan ke dalam pengiriman dalam bentuk parameter, dan nilainya disimpan di peta properti pengguna menggunakan sesi. GetUserProperties.
Ketika peserta obrolan mengirim informasi ke server melalui koneksi TCP, ia meluncur melalui semua sesi terbuka, setiap sesi terikat ke ruang obrolan yang ditentukan, dan menerima informasi yang dikodekan dan diterjemahkan.
Jika kami ingin mengirim informasi teks sederhana atau informasi dalam format biner, kami dapat menggunakan session.getbasicremote (). SendBinary () atau session.getbasicremote (). Sendtext ()
Selanjutnya, mari kita lihat kode yang digunakan untuk mewakili entitas transfer informasi (DTO: objek transfer data), sebagai berikut:
Paket Com.hascode.Tutorial;
Konversi pesan obrolan
Dalam aplikasi ini, kelas pengkodean dan decoding akan ditulis untuk mengonversi antara informasi obrolan dan format JSON.
Pertama -tama mari kita lihat implementasi kelas decoding, yang akan mengonversi informasi obrolan yang diteruskan ke server ke kelas entitas chatmessage. Di sini, spesifikasi Java API untuk pemrosesan JSON (JSR353) digunakan untuk mengubah informasi format JSON menjadi kelas entitas.
Paket Com.hascode.Tutorial; impor javax.websocket.endpointconfig; Lempar DecodeException {ChatMessage ChatMessage = ChatMessage baru (); getString (pengirim "));Mari kita lihat kode kelas encoding.
paket com.hascode.tutorial; void init (final endpointconfig config) {} @Override public void dashare () {} @Override Public String Encode (Final ChatMessage ChatMessage) melempar Enco deexception {return json.createObjectBuilder () .Add ("Message", ChatMessage.getMessage () ).Di sini Anda dapat melihat kekuatan yang kuat dari JSR-353.
Bangun klien sederhana melalui bootstrap dan javacsript
Akhirnya, kami secara komprehensif menggunakan Bootstrap, JQuery Framework, dan JavaScript yang terkenal untuk merancang klien sederhana. Kami membuat file index.html baru di direktori src/main/weapp, dan kodenya adalah sebagai berikut:
<! Doctype html> <html lang = "en"> <adap> [..] <script> var wsocket; Var $ pesan; ); // API asli var $ messageline = $ ('<tr> <td>' + msg.Received + '</td> <td>' + msg.sender + '</td> <td>' + msg .Message + '</td> </tr>'); $ chatwindow.append ($ messageline); "" ConnectToServer () {Room = $ ('#Chatroom Opsi: Dipilih'). Val (); $ chatwindow.empty (); function () {$ nickName = $ ('#nickname'); ; + nickname.val () + "@" + ruang); }); ) ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::: Formulir> <h2> masuk obrolan di </h2> <label untuk = "nickname"> nama julukan </label> <input type = "text" placeholder = "nickname" id = "nickname"> <Div> <label for = = "chatroom"> chatroom </ label> <pilih size = "1" id = "chatroom"> <pection> arduino </ :::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::: Option> <pection> java </tiption> <pection> groovy </pection> <pection> scala </pection> </dect> </div> <typute type = "kirim" id = "enterroom "> Masuk </button> </form> </div> <!-/container-> <ver> <form id =" do-chat "> <h2> </h2> <table id =" Respons "> </able> <fieldset> <segend> Masukkan pesan Anda .. </tegend> <vert> <input type =" text "placeholder =" pesan Anda ... "id =" pesan "style =" height : 60px "/> <input type =" kirim "value =" kirim pesan "/> <typute type =" tombol "id =" cuti "> ruang meninggalkan </button> </div> </fieldset> < /Form> </div> </body> </html>Dalam kode di atas, harap perhatikan poin -poin berikut:
Jika Anda ingin menghubungi WebSocket di sisi JavaScript, Anda harus memulai koneksi dengan cara berikut: ws: // ip: port/context_path/endpoint_url mis.
Metode membuat koneksi WebSocket sangat sederhana, menggunakan var wsocket = WebSocket baru ('ws: //0.0.0.0: 8080/hascode/chat/java');
Untuk mendapatkan informasi yang dikembalikan dari server, Anda hanya perlu mengatur metode yang sesuai untuk mendapatkan informasi pengembalian dalam fungsi callback wsocket.onmessage.
Kirim pesan WebSocket ke server, menggunakan wsocket.send (), di mana pesan yang dapat dikirim dapat berupa data teks atau biner.
Untuk menutup koneksi, wsocket.close () digunakan.
Akhirnya, kami menggunakan kode melalui paket MVN Embedded-Glassfish: Run, dan kemudian kami dapat melihat efek tangkapan layar di awal artikel ini.
Di atas adalah ruang obrolan yang diimplementasikan menggunakan Javaee7, WebSockets dan GlassFish4.