Sebelum memperkenalkan teks utama, izinkan saya memperkenalkan latar belakang dan prinsip Websocket kepada Anda:
latar belakang
Hanya komunikasi satu arah yang dapat dicapai melalui HTTP di browser. Comet dapat mensimulasikan komunikasi dua arah sampai batas tertentu, tetapi efisiensi rendah dan membutuhkan dukungan yang baik dari server; Socket dan XMLSocket di Flash dapat mewujudkan komunikasi dua arah yang sebenarnya, dan kedua fungsi ini dapat digunakan dalam JavaScript melalui Flex Ajax Bridge. Dapat diperkirakan bahwa jika WebSocket diimplementasikan di browser, itu akan menggantikan dua teknologi di atas dan banyak digunakan. Menghadapi situasi ini, HTML5 mendefinisikan protokol WebSocket, yang dapat menyimpan sumber daya dan bandwidth server dengan lebih baik dan mencapai komunikasi waktu nyata.
Protokol Websocket juga diimplementasikan di Javaee7.
prinsip
Protokol Websocket.
Saat ini, untuk mewujudkan komunikasi instan, banyak situs web menggunakan jajak pendapat. Polling adalah untuk mengirim permintaan HTTP ke server pada interval waktu tertentu (seperti setiap 1 detik), dan server mengembalikan data terbaru ke browser klien. Pola permintaan HTTP tradisional ini membawa kerugian yang jelas. Browser perlu terus membuat permintaan ke server. Namun, header permintaan HTTP sangat panjang, dan data yang berguna yang terkandung di dalamnya mungkin hanya nilai kecil, yang akan menempati banyak bandwidth.
Efek teknologi yang lebih baru untuk melakukan pemungutan suara adalah bahwa Comet menggunakan AJAX. Namun, meskipun teknologi ini dapat mencapai komunikasi dupleks penuh, masih membutuhkan permintaan.
Di Websocket API, browser dan server hanya perlu berjabat tangan, dan kemudian saluran cepat terbentuk antara browser dan server. Data dapat ditransmisikan langsung di antara keduanya. Dalam protokol Websocket ini, kami memiliki dua manfaat utama untuk menerapkan layanan instan:
1. Header
Header yang berkomunikasi satu sama lain sangat kecil - mungkin hanya 2 byte
2. Server Push
Saat mendorong oleh server, server tidak lagi secara pasif menerima permintaan browser sebelum mengembalikan data, tetapi secara aktif mendorongnya ke browser ketika data baru tersedia.
1. PENDAHULUAN PROYEK
Websocket adalah protokol baru di HTML5. Ini mengimplementasikan komunikasi dupleks penuh antara browser dan server. Di sini, Websocket akan digunakan untuk mengembangkan ruang obrolan web. Kerangka kerja front-end akan menggunakan Amazeui, Java di latar belakang, dan uMeditor di editor.
2. Melibatkan Poin Pengetahuan
Web Front-end (HTML+CSS+JS) dan Java
3. Lingkungan Perangkat Lunak Tomcat 7 JDK 7 ECLIPSE Javaee Modern Browser
4. Tangkapan layar efek
Efek 1
Efek 2
5. Proyek Praktis Tempur
1. Buat proyek baru
Open Eclipse JavaEE, create a new Dynamic Web Project named Chat, and then import the packages required to process JSON format strings, place commons-beanutils-1.8.0.jar, commons-collections-3.2.1.jar, commons-lang-2.5.jar, commons-logging-1.1.jar, ezmorph-1.0.6.jar and json-lib-2.4-jdk15.jar and Paket lain ditempatkan di direktori WebContent/Web-INF/LIB, dan akhirnya mempublikasikan proyek ke server Tomcat. Pada titik ini, proyek kosong selesai.
2. Tulis halaman front-end
Buat halaman baru bernama Index.jsp di direktori WebContent. Kerangka kerja Amazeui digunakan di sini. Ini adalah kerangka kerja front-end adaptif lintas layar. Kotak input pesan menggunakan Umeditor, yang merupakan editor online teks kaya yang dapat membuat konten pesan kami berwarna -warni.
Pertama, unduh paket terkompresi dari situs web resmi AmazeUI, dan kemudian unzip folder aset dan salin direktori konten web, sehingga kami dapat menggunakan Amazeui.
Kemudian unduh versi Mini Paket Kompresi Versi JSP dari situs web resmi Uediter, unzip seluruh direktori ke dalam direktori konten web, dan kemudian Anda dapat menulis kode front-end, kodenya adalah sebagai berikut (Anda dapat menulisnya sesuai dengan preferensi Anda):
<%@ page language = "java" contentType = "text/html; charset = utf-8" pageEncoding = "utf-8"%> <! Doctype html> <html lang = "zh"> <pead> <meta charset = "utf-8"> <meta http http- "contentp =" uvat "> <-meta-compon"> <-meta-compon "> <-meta-compon"> <-meta-compon "> <meta-compon"> <-meta-compon "> <meta-compon"> <meta-compon "> <meta-compon"> <meta-compon "> <meta-compon"> <meta-compon "> <meta-compon" oMEV = "uGTP-" uTPEIBE = " name = "viewport" content = "width = device-width, skala awal = 1, skala maksimum = 1, skala pengguna = tidak"> <itement> obrolan shiyanlou </iteme> <!-atur mesin render untuk 360 browser-> <meta name = "renderer" content = "webkit"> <!-tidak ada conceP-complu = "renderer" webkit "> <!-tidak ada baidu-complu =" renderer "webkit"> <!-Tidak ada baidUpp = "content" content = "Webkit"> <! konten = "no-siteApp"/> <tautan rel = "ikon alternatif" href = "aset/i/favicon.ico"> <tautan rel = "stylesheet" href = "aset/css/amazeui.min.min.css"> <link = "stylesheet" href = "assets/css"> <link = "stylesheet" href = "assets/css /ss"> href = "uMeditor/tema/default/css/uMeditor.css" rel = "styleSheet"> <tyle> .title {text-align: center;}. chat-content-container {height: 29rem; overflow-y: gulir; Perbatasan: 1px Solid Silver;} </tyle> </head> <hody> <!-Judul Mulai-> <div> <viv> <viv> <viv> <h1> SHIYANLOU CHAT </h1> </div> </div> </Div> </Div> <! Obrolan Konten Mulai-> <!-Input Pesan Mulai-> <div> <div> <corm> <div> <script type = "text/polos" id = "myEditor"> </script> </div> </form> </div> </div> <v div> <div> <div> <div id = "message-input-nickname"> <Div> <piv> <div> <Div ID = "Message-Input-nickname"> <Div> <pan> <iPet> </span </span = "Input = ID </iD = i id =" input> </span> </span> </iD = " type = "text" placeholder = "Harap masukkan nama panggilan"/> </div> </div> <div> <script src = "aset/js/jQuery.min.js"> </script> <!-<!-[jika LTE IE 8]> <skrip src = "http://libs.baidu.com/jQuery/1.11.1/jquery.min.js"> </script> <!-<!-<!-[jika lte IE 8]> <script src = "http://libs.baidu.com/jQuery/1.11.11.1/" Umeditor JS-> <skrip charset = "utf-8" src = "uMeditor/uMeditor.config.js"> </script> <skrip charset = "utf-8" src = "uMeditor/uMeditor.min.js"> </skrip> <script src = "uMeditor/lang/lang/zh-cn." {// inisialisasi kotak input pesan var um = uM.getEditor ('myEditor'); // buat kotak julukan dapatkan fokus $ ('#nickname') [0] .focus (); }); </script> </body> </html>Setelah menulis, mulailah server Tomcat, lalu kunjungi http: // localhost: 8080/chat/index.jsp dan Anda akan melihat antarmuka berikut.
3. Tulis kode latar belakang
Buat paket baru com.shiyanlou.chat, buat kelas yang disebut ChatServer di paket. API Websocket telah disatukan sejak Javaee 7. Oleh karena itu, tidak peduli server apa itu, kode yang ditulis dalam Java adalah sama, dan kodenya adalah sebagai berikut:
Paket com.shiyanlou.chat; impor java.text.simpledateFormat; impor java.util.date; impor javax.websocket.onclose; impor javax.websocket.onerror; impor javax.websocket.onmessage; impor javax.websocket; javax.websocket.server.ServerEndpoint;import net.sf.json.JSONObject;/** * Chat Server Class* @author shiyanlou * */@ServerEndpoint("/websocket")public class ChatServer { private static final SimpleDateFormat DATE_FORMAT = new SimpleDateFormat("yyyy-MM-dd HH:mm");// Date formatting @OnOpen public void open(Session session) { // Add initialization operation} /** * Accept the client's message and send the message to all connected sessions* @param message Message from the client* @param session The client's session*/ @OnMessage public void getMessage(String message, Session session) { // parse the client's message into a JSON object JSONObject jsonObject = JSONObject.fromObject(message); // Tambahkan tanggal kirim dalam pesan jsonobject.put ("date", date_format.format (new date ())); // Kirim pesan ke semua sesi yang terhubung untuk (sesi opensession: session.getopensessions ()) {// Tambahkan bendera apakah pesan ini adalah sesi saat ini sendiri jsonobject.put ("isself", opensession.equals (sesi)); // Kirim pesan yang diformat JSON yang diformat opensession.getAsyncremote (). SendText (jsonobject.toString ()); }} @Onclose public void close () {// Tambahkan operasi saat menutup sesi} @onerror kesalahan public void (Throwable t) {// Tambahkan operasi untuk menangani kesalahan}}4. Interaksi Depan dan Backstage
Setelah menulis latar belakang, meja depan perlu menggunakan WebSocket untuk terhubung ke latar belakang. Anda perlu membuat objek WebSocket baru, dan kemudian Anda dapat berinteraksi dengan server, mengirim pesan dari browser ke server, dan pada saat yang sama memverifikasi apakah konten kotak input kosong, kemudian terima pesan yang dikirim oleh server, tambahkan secara dinamis ke kotak konten obrolan,
var um = uM.getEditor ('myEditor'); $ ('#nickname') [0] .focus (); // Buat objek WebSocket baru, dan WebSocket terakhir/baru sesuai dengan sisi server @ServerendPoint ("/WebSocket") var socket = New Socket = Websocket ('ws: // $ {pagecontext.Request.getServerName ()}: $ {pagecontext.Request.getServerport ()} $ {pagecontext.Request.contextPath}/WebSocket'); // Proses data yang dikirim oleh server-side socket.onMessage = function (event) {addMessage (event.data); }; // action $ ('#kirim'). On ('click', function () {var nickname = $ ('#nickname'). Val (); if (! UM.hascontents ()) {// tentukan apakah kotak input pesan-contass ('-contass'). setTimeout ("$ ('. Edui-Container'). Removeclass ('AM-animation-shake')", 1000); $ ('#pesan-input-nickname'). AddClass ('AM-animation-shake'); // Kotak Input Pesan Um.setContent (''); // tambahkan pesan ke obrolan fungsi konten addMessage (pesan) {message = json.parse (pesan); var messageItem = '<li>' + '<a href = "javascript: void (0)"> <img src = "aset/gambar/' + (pesan.isself? 'self.png': 'Other.jpg') + '" // </a>' + '<div> <ideader> <dv> " +' + 'haP =" a heP = "a header> <a header> <a header> <a header> <a header> <a. message.nickname + '</a> <lime>' + message.date + '</time> </div> </header>' + '<verv>' + message.content + '</div> </div> </li>'; $ (MessageItem) .AppendTo ('#pesan pesan'); // Gulir scrollbar ke bagian bawah $ (". CHAT-Content-Container"). Scrolltop ($ (". CHAT-Content-Container") [0] .scrollheight); }Pada titik ini, ruang obrolan web sederhana selesai. Anda dapat membuka beberapa jendela lagi atau mengundang teman untuk menguji bersama di LAN.
6. Ringkasan
Kelas proyek ini menggunakan WebSocket untuk mengimplementasikan ruang obrolan web sederhana. Faktanya, Websocket tidak hanya dapat diterapkan ke browser, tetapi juga untuk klien desktop.
7. Pertanyaan berpikir
Kelas proyek ini hanyalah implementasi sederhana dari ruang obrolan. Bahkan, ada banyak fungsi yang dapat ditambahkan, seperti fungsi unggahan avatar, fungsi obrolan satu-ke-satu, dll. Mari kita tingkatkan ruang obrolan bersama.
Apakah Anda ingin segera mencobanya jika Anda melihat ini? Klik di sini --- Berikan Anda lingkungan kompilasi online gratis sehingga Anda tidak perlu lagi khawatir membangun lingkungan
Di atas adalah pengetahuan yang relevan tentang penggunaan Java dan Websocket untuk mengimplementasikan kode contoh ruang obrolan web yang diperkenalkan kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!