Dalam sebuah proyek baru -baru ini, saya perlu menggunakan fitur baru Java Websocket, jadi saya mempelajarinya dan merasa bahwa teknologi ini cukup menyenangkan. Saya langsung tahu bagaimana layanan pelanggan online di halaman web dilakukan.
Mari kita lihat gambarnya dulu:
Komunikasi real-time antara banyak klien direalisasikan.
Mari kita lihat Diagram Struktur Proyek Kode: Sangat sederhana, hanya 1 kelas dan 1 halaman
Kemudian lihat kode tertentu
Lihat kode backend terlebih dahulu
Paket com.main; impor java.io.ioException; impor java.util.concurrent.copyonwriteArrayset; import javax.websocket.*; import javax.websocket.server.serverendpoint;/*** @serverendpoint Annotasi adalah penjelasan kelas. Fungsinya terutama untuk mendefinisikan kelas saat ini sebagai sisi server WebSocket. * Nilai anotasi akan digunakan untuk mendengarkan koneksi pengguna ke alamat URL akses terminal. Klien dapat terhubung ke sisi server WebSocket melalui URL*/@ServerEndPoint ini ("/WebSocket") kelas publik H5ServerServerSocket {// variabel statis yang digunakan untuk merekam jumlah koneksi online saat ini. Itu harus dirancang agar aman. private static int onlinecount = 0; // Kumpulan paket bersamaan yang aman digunakan digunakan untuk menyimpan objek myWebsocket yang sesuai dari setiap klien. Untuk menyadari bahwa server berkomunikasi dengan satu klien, Anda dapat menggunakan peta untuk menyimpannya, di mana kunci dapat mengidentifikasi pengguna private static copyOnWriteArrayset <H5ServletServerCocket> WebSocketSet = new copyOnWriteArrayset <H5ServerServerSocket> (); // Sesi koneksi dengan klien tertentu perlu mengirim data ke sesi sesi pribadi klien; /** * Metode untuk berhasil memanggil pembentukan koneksi * * @param sesi * parameter opsional. Sesi adalah sesi koneksi dengan klien, dan perlu mengirim data ke klien melalui itu*/ @onopen public void onopen (sesi sesi) {this.Session = sesi; websocketset.add (ini); // addonlinecount () di set; // Tambahkan 1 nomor online System.out.println ("Ada koneksi baru untuk bergabung! Jumlah orang online saat ini adalah" + getOnlinecount ()); } / *** Metode untuk menghubungkan panggilan penutupan* / @onclose public void onClose () {WebSocketset.remove (ini); // hapus subonlinecount () dari set; // hapus subonlinecount () dari set; // Hapus nomor online dengan 1 nomor online System.out.println ("Ada koneksi yang ditutup! Jumlah orang online saat ini adalah" + getOnlinecount ()); } / *** Metode dipanggil setelah menerima pesan klien** @param pesan* pesan yang dikirim oleh klien* @param sesi* parameter opsional* / @onmessage public void onMessage (pesan string, sesi sesi) {system.out.println ("pesan dari klien:" + pesan); // Pesan Bulk untuk (H5ServerServerSocket Item: WebSocketset) {coba {item.sendMessage (pesan); } catch (ioException e) {e.printstacktrace (); melanjutkan; }}}} / ** * dipanggil saat kesalahan terjadi * * @param sesi * @param error * / @onerror public void onError (sesi sesi, kesalahan throwable) {system.out.println ("kesalahan terjadi"); error.printstacktrace (); } /*** Metode ini berbeda dari metode di atas. Tidak ada anotasi, itu adalah metode yang ditambahkan sesuai dengan kebutuhan Anda. * * @param pesan * @throws ioException */ public void sendMessage (string message) melempar ioException {this.session.getBasicRemote (). sendText (pesan); // this.session.getAsyncremote (). sendText (pesan); } public static sinkronisasi int getOnlinecount () {return onlinecount; } public static static void addonlinecount () {h5servletserverCocket.onlinecount ++; } public static static void subonlinecount () {h5servletserverCocket.onlinecount--; }}Berikutnya adalah kode halaman front-end:
<%@ halaman bahasa = "java" import = "java.util.*" pageEncoding = "UTF-8"%> <%string path = request.getContextPath (); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%><!DOCTYPE HTML><html><head><base href="<%=basePath%>"><title>My WebSocket</title></head><body> Welcome to the chat room<div id="message" style="color: blue">【Status】</div> <br /> Nickname<input id="username" type="text" required="required"/> <br> Content<input id="text" type="text" /> <br /> <button onclick="send()">Send</button> <button onclick="closeWebSocket()">Close</button></body><script type = "Text/JavaScript"> var WebSocket = null; // menilai apakah browser saat ini mendukung WebSocket if ('WebSocket' di jendela) {WebSocket = WebSocket baru ("WS: //10.1.1.106: 8080/Socket/WebSocket"); } else {alert ('WebSocket tidak didukung!')} // metode panggilan balik untuk kesalahan dalam koneksi WebSocket.onerror = function () {setMessageInnerHtml ("error"); }; // Metode Callback Untuk Koneksi Sukses Websocket.onopen = Function (Event) {setMessageInnerHtml ("Ruang obrolan diaktifkan"); } // metode panggilan balik untuk menerima pesan WebSocket.onMessage = function () {setMessageInnerHtml (event.data); } // koneksi metode panggilan balik tertutup websocket.onclose = function () {setMessageInnerHtml ("Ruang obrolan tutup"); } // Dengarkan acara penutupan jendela. Ketika jendela ditutup, secara aktif tutup koneksi WebSocket untuk mencegah jendela dari tutup sebelum koneksi terputus, dan sisi server akan melempar pengecualian. window.onbeforeunload = function () {websocket.close (); } // Tampilkan pesan pada fungsi halaman web setMessageInnerHtml (innerHtml) {document.getElementById ('pesan'). InnerHtml + = innerHtml + '<br/>'; } // Tutup fungsi koneksi closeWebsocket () {WebSocket.close (); } // Kirim fungsi pesan mengirim () {var username = document.geteLementById ('username'). Value; var message = document.geteLementById ('text'). value; var msg = "【" + username + "] berbicara:" + pesan WebSocket.send (msg); } </script> </html>Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.