Kata pengantar
HTML5 Websocket mengimplementasikan komunikasi dua arah antara server dan browser. Komunikasi dua arah membuat pengembangan Pesan Server Push lebih sederhana. Yang paling umum adalah komunikasi instan dan aplikasi yang membutuhkan informasi berkualitas tinggi secara real-time. Sebagian besar pesan server sebelumnya mendorong teknologi "polling" dan "koneksi panjang", yang keduanya akan menimbulkan overhead yang cukup besar di server, dan kinerja real-time tidak terlalu tinggi. Teknologi Websocket hanya akan menimbulkan overhead kecil dan sangat tinggi secara real time. Mari kita mulai dengan menjelaskan cara menggunakan teknologi WebSocket untuk mengembangkan ruang obrolan. Dalam contoh ini, server Tomcat7 digunakan. Setiap server memiliki implementasi WebSocket yang berbeda, sehingga contoh ini hanya dapat dijalankan di server Tomcat. Namun, Spring telah meluncurkan API Websocket, yang kompatibel dengan implementasi setiap server. Anda dapat berkonsultasi dengan informasi yang relevan untuk dipahami. Saya tidak akan memperkenalkannya di sini. Gambar berikut adalah rendering ruang obrolan:
Dalam contoh ini, dorongan pesan waktu nyata diimplementasikan, dan pemberitahuan online dan offline pengguna obrolan juga diimplementasikan. Mari kita mulai menjelaskan secara rinci cara mengimplementasikannya.
Pemrosesan backend
Tomcat terutama mengimplementasikan WebSocket dengan mengandalkan kelas org.apache.catalina.websocket.messageInbound. Kelas ini ada di {tomcat_home} /lib/catalina.jar, jadi ketika Anda mengembangkan, Anda perlu memperkenalkan catalina.jar dan tomcat-coyote.jar. Kode berikut terpapar ke alamat servlet klien:
paket com.ibcio; impor javax.servlet.annotation.webservlet; impor javax.servlet.http.httpservletRequest; impor org.apache.catalina.websocket.streaminBound; @Webservlet (urlpatterns = {"/pesan"}) // Jika Anda ingin menerima permintaan dari protokol WS: // browser, Anda harus mengimplementasikan WebSocketSerVlet kelas publik WebsocketMessageServlet org.apache.catalina.websocket.websocketserVlet {private static.catalina.websocket.websocketserver {private static.catalina.websocket.websocketservlet {private static.catalversion. public static int online_user_count = 1; Public String getUser (permintaan httpservletRequest) {return (string) request.getSession (). getAttribute ("user"); } // Tidak seperti servlet biasa, CreatewebsocketInbound perlu diimplementasikan, dan objek koneksi WebSocket khusus diinisialisasi di sini @Override dilindungi streaminbound creathewebsocketinbound (string subprotocol, httpservletrequest) {return newetmessagein (this. }} Servlet ini agak berbeda dari servlet biasa. Ini mewarisi kelas WebSocketServlet dan perlu mengesampingkan metode kreatewebsocketinbound. Atribut pengguna dalam sesi di kelas ini diatur ketika pengguna memasukkan index.jsp, dan merekam nama panggilan pengguna saat ini. Berikut ini adalah kode kelas WebSocketMessageInbound yang diimplementasikan sendiri:
paket com.ibcio; impor java.io.ioException; impor java.nio.bytebuffer; impor java.nio.charbuffer; impor net.sf.json.jsonobject; impor org.apache.catalina.websocket.messageInbound; impor org.apache.catalina.websocket.wsoutbound; Kelas Publik WebSocketMessageInbound Extends MessageInbound {// Nama pengguna koneksi saat ini adalah pengguna string akhir pribadi; WebSocketMessageInbound publik (string user) {this.user = user; } public string getUser () {return this.user; } // acara yang dipicu dengan membuat koneksi @Override dilindungi void onopen (wsoutbound outbound) {// memicu acara koneksi dan menambahkan koneksi di kumpulan koneksi hasil JSONObject = new jsonObject (); result.element ("type", "user_join"); result.element ("pengguna", this.user); // tekan pesan bahwa pengguna saat ini online untuk semua pengguna online WebSocketMessageInboundpool.sendMessage (result.toString ()); hasil = jsonobject () baru; result.element ("type", "get_online_user"); hasil. // Tambahkan objek koneksi saat ini ke koneksi WebSocketMessageInboundpool.addmessageInbound (ini); // Kirim daftar pengguna online saat ini ke koneksi saat ini WebSocketMessageInboundpool.sendmessageTouser (this.user, result.toString ()); } @Override Protected void Onclose (status int) {// Memicu acara penutupan dan menghapus koneksi dari koneksi WebSocketMessageInboundpool.removemessageInbound (ini); JSONObject hasil = jsonObject () baru; result.element ("type", "user_leave"); result.element ("pengguna", this.user); // Kirim pesan ke pengguna online bahwa pengguna saat ini keluar dari WebSocketMessageInboundpool.sendMessage (result.toString ()); } @Override Protected Void OnBinaryMessage (pesan BYTEBUFFER) melempar IoException {Throw New UnsupportedOperationException ("Pesan biner tidak didukung."); } // Acara ini dipicu ketika klien mengirim pesan ke server @Override dilindungi void ontextMessage (charbuffer pesan) melempar ioException {// kirim pesan ke semua pengguna online WebSocketMessageInboundpool.sendMessage (message.tostring ()); }} Kode ini terutama mengimplementasikan metode OnOpen, Onclose, dan OnTextMessage, yang masing -masing menangani pengguna secara online, offline, dan mengirim pesan. Ada kelas pool koneksi WebSocketMessageInboundPool di kelas ini. Kelas ini digunakan untuk mengelola koneksi pengguna online saat ini. Berikut ini adalah kode kelas ini:
paket com.ibcio; impor java.io.ioException; impor java.nio.charbuffer; impor java.util.hashmap; impor java.util.map; impor java.util.set; Kelas Publik WebSocketMessageInboundPool {// Simpan wadah peta untuk koneksi peta akhir statis privat <string, WebSocketMessageInbound> Connections = new HashMap <String, WebSocketMessageInbound> (); // Tambahkan koneksi ke kumpulan koneksi public static void addMessageInbound (WebSocketMessageInbound inbound) {// Tambahkan koneksi System.out.println ("pengguna:" + inbound.getUser () + "gabungkan .."); connections.put (inbound.getUser (), inbound); } // Dapatkan semua pengguna online set statis public <string> getOnlineSer () {return connections.keyset (); } public static void removemessageInbound (WebSocketMessageInbound inbound) {// hapus koneksi System.out.println ("user:" + inbound.getUser () + "keluar .."); connections.remove (inbound.getUser ()); } public static void sendMessageTouser (string user, string pesan) {coba {// kirim data ke sistem pengguna tertentu.out.println ("Kirim pesan ke pengguna:" + user + ", konten pesan:" + pesan); WebSocketMessageInbound inbound = connections.get (pengguna); if (inbound! = null) {inbound.getWsoutbound (). writeTextMessage (charbuffer.wrap (pesan)); }} catch (ioException e) {E.PrintStackTrace (); }} // Kirim pesan ke semua pengguna public static void sendMessage (string message) {coba {set <string> keyset = connections.keyset (); untuk (tombol string: keyset) {WebSocketMessageInbound inbound = connections.get (key); if (inbound! = null) {System.out.println ("Kirim pesan ke pengguna:" + key + ", konten pesan:" + pesan); inbound.getWsoutbound (). writeTextMessage (charbuffer.wrap (pesan)); }}} catch (ioException e) {E.PrintStackTrace (); }}} Tampilan Meja Depan
Kode di atas adalah kode backend ruang obrolan, yang terutama terdiri dari 3 objek, servlet, objek koneksi, dan kumpulan koneksi. Berikut ini adalah kode meja depan. Kode meja depan terutama mengimplementasikan koneksi dengan server dan menampilkan daftar pengguna dan daftar informasi. Tampilan meja depan menggunakan kerangka kerja EXT. Siswa yang tidak terbiasa dengan EXT dapat memiliki pemahaman awal tentang EXT. Berikut ini adalah kode index.jsp:
<%@ page language = "java" pageEncoding = "UTF-8" Impor = "com.ibcio.websocketMessageServlet"%> <%string user = (string) session.getAttribute ("user"); if (user == null) {// menghasilkan nama panggilan untuk pengguna pengguna = "tamu" + WebSocketMessageServlet.online_user_count; WebSocketMessageServlet.online_user_count ++; session.setAttribute ("pengguna", pengguna); } pagecontext.setAttribute ("user", user); %> <html> <head> <title>WebSocket Chat Room</title> <!-- Introduce CSS files--> <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css"> <link rel="stylesheet" type="text/css" href="ext4/shared/example.css" /> <link rel = "stylesheet" type = "text/css" href = "css/websocket.css"/> <!- Paket pengembangan JS input Ext dan Webscoket yang diimplementasikan sendiri. -> <script type = "text/javaScript" src = "ext4/ext-all-debug.js"> </script> <script type = "text/javascript" src = "WebSocket.js"> </script> <script type = "text/javascript"> var user = "$ {User}"; </script> </head> <body> <h1>WebSocket Chat Room</h1> <p>The API provided by the HTML5 standard is combined with the Ext rich client framework to implement the chat room, which has the following characteristics: </p> <ul style="padding-left: 10px;"> <li>Retrieve data in real time, push it by the server, realizing instant communication</li> <li>Use WebSocket Untuk menyelesaikan komunikasi data, yang berbeda dari teknologi seperti polling dan koneksi panjang, dan menyimpan sumber daya server </li> <li> Dikombinasikan dengan ext for page display </li> <li> Pengguna online dan notifikasi offline </li> </ul> <div id = "WebSocket_Button"> </div> </bod> </html> Websocket_button "> </div> </bod> </html> websocket_button"> </div> </bod> </html> Tampilan halaman terutama dikendalikan di WebSocket.js. Berikut ini adalah kode WebSocket.jsd:
// Digunakan untuk menampilkan informasi obrolan pengguna ext.define ('messageContainer', {extend: 'ext.view.view', trackover: true, multiselect: false, itemcls: 'l-im-message', itemselector: 'div.l-imsage', overitemcls: 'l-im-over-over-over-over-over-mess: {overflow: Auto ', BackgroundColor:' #FFF '}, TPL: [' <SEV> Jangan mempercayai pengiriman uang, pemenang informasi, atau panggilan telepon yang tidak dikenal selama percakapan. " '<v> {content} </div>', '</div>', '</tpl>'], pesan: [], initComponent: function () {var me = this; Me.messageModel = ext.data.mod, ',', ',', ',', ',', ',' Ext.data. 'Sumber']}); pesan ['timestamp'] = ext.date.format (tanggal baru (pesan ['timestamp']), 'h: i: s'); if (message.from == user) {message.source = 'self'; } else {message.source = 'remote'; } me.store.add (pesan); if (me.el.dom) {me.el.dom.scrolltop = me.el.dom.scrollheight; }}}); Kode ini terutama mengimplementasikan wadah yang menampilkan pesan. Berikut ini adalah kode yang mulai dieksekusi setelah halaman dimuat:
Ext.onready (function () {// Buat kotak input pengguna var input = ext.create ('ext.form.field.htmleditor', {region: 'selatan', tinggi: 120, enableFont: false, enableSouredit: false, enableAnegnments: false, pendengar: {initialize: function () {ext.event. function (E) {if (e.ctrlkey === True && E.KeyCode == 13) {E.PreventDefault () Ext.create ('ext.panel.panel', {region: 'center', tata letak: 'border', item: [input, output], tombol: [{text: 'send', handler: send}]}); WebSocket (Encodeuri ('WS: // LocalHost: 8080/WebSocket/Message')); } websocket.onclose = function () {// koneksi terputus win.settitle (title + '(terputus)'); } // Pesan Resepsi Websocket.onMessage = fungsi (pesan) {var message = json.parse (message.data); // menerima pesan yang dikirim oleh pengguna if (message.type == 'pesan') {output.receive (pesan); } else if (message.type == 'get_online_user') {// Dapatkan daftar pengguna online var root = onlineuser.getrootnode (); Ext.each (message.list, function (user) {var node = root.createNode ({id: user, text: user, iconcls: 'user', leaf: true}); root.appendChild (node);}); } else if (message.type == 'user_join') {// pengguna menggunakan root var online = onlineUser.getrootnode (); var user = message.user; var node = root.createNode ({id: user, text: user, iconcls: 'user', Leaf: true}); root.AppendChild (node); } else if (message.type == 'user_leave') {// pengguna pergi offline var root = onlineUser.getrootnode (); var user = message.user; var node = root.findChild ('id', user); root.removechild (node); }}}}}; // Pohon pengguna online var onlineUser = ext.create ('ext.tree.panel', {title: 'online', rootVisible: false, region: 'east', width: 150, lines: false, useArrows: true, autoscroll: true, true: iconcls: 'user-online', store: ext.create ('{{ext. User ', diperluas: true, anak -anak: []}})}); var title = 'welcome:' + user; // Tampilan jendela var win = ext.create ('ext.window.window', {title: title + '(tidak terhubung)', tata letak: 'border', iconCls: 'win-win', Minwidth: 650, MinHeight: 460, Width: 650, animateTarget: 'WebSocket_BUTTON', LEIGHT: LIGHT: 650, dialog: 'WebSocket_BUTTON', '460: 650:' 460: 650: '460: 650:' 460: 650: '460, 650: 650:' 460, 650: 650: '460, 650: 650:' 460, 650: '460, 650:' 460, 650: '460: 650, {render: function () {initwebsocket (); win.show (); // Kirim fungsi pesan kirim () {var message = {}; if (websocket! = null) {if (input.getValue ()) {ext.Apply (pesan, {dari: user, konten: input.getValue (), timestamp: new date (). getTime (), type: 'pesan'}); websocket.send (json.stringify (pesan)); //output.receive(message); input.setValue (''); }} else {ext.msg.alert ('tip', 'Anda telah terputus dan tidak dapat mengirim pesan!'); }}}});Kode di atas adalah kode yang secara otomatis terhubung ke server setelah halaman dimuat dan membuat antarmuka tampilan.
Melihat
Dua poin yang perlu diperhatikan: Setelah penyebaran selesai, Catalina.jar dan tomcat-coyote.jar di direktori LIB di direktori aplikasi Tomcat perlu dihapus. Misalnya, direktori LIB proyek adalah D:/Workspace/Websocket/Webroot/Web-Inf/Lib, dan Direktori Lib Aplikasi yang digunakan adalah D: /Tools/apache-tomcat-7.0.32/webapps/websocket/web-intinf/lib. Cukup hapus direktori LIB dari direktori penempatan dan hubungkan dua stoples. Jika tidak, kesalahan mungkin tidak diinisialisasi. Ingat.
Jika koneksi masih belum memungkinkan, silakan unduh tomcat terbaru. Lupa bahwa versi TomcatCreateWebsocketinbound tidak memiliki parameter permintaan. Kode saat ini memiliki parameter ini. Versi 7.0.3xx semuanya datang dengan parameter ini, ingat.
Meringkaskan
Menggunakan WebSocket untuk mengembangkan dorongan server sangat nyaman. Ini adalah aplikasi sederhana. Bahkan, itu juga dapat menggabungkan WEBRTC untuk mewujudkan obrolan video dan obrolan suara.
Contoh Unduh
Download Address: Demo
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.