序文
HTML5 WebSocketは、サーバーとブラウザー間の双方向通信を実装します。双方向の通信により、サーバーメッセージプッシュの開発が簡単になります。最も一般的なものは、高品質の情報をリアルタイムで必要とする即時通信とアプリケーションです。以前のサーバーメッセージプッシュのほとんどは、「ポーリング」と「長い接続」テクノロジーを使用しています。どちらもサーバーでかなりのオーバーヘッドが発生し、リアルタイムのパフォーマンスはそれほど高くありませんでした。 WebSocketテクノロジーは、わずかなオーバーヘッドのみが発生し、特にリアルタイムで高くなります。 Websocketテクノロジーを使用してチャットルームを開発する方法を説明することから始めましょう。この例では、TomCat7サーバーが使用されます。各サーバーにはWebSocketの実装が異なるため、このインスタンスはTomcatサーバーでのみ実行できます。ただし、SpringはWebSocket APIを起動しました。これは、各サーバーの実装と互換性があります。関連する情報を参照して理解することができます。ここでは紹介しません。次の写真は、チャットルームのレンダリングです。
この例では、メッセージのリアルタイムプッシュが実装されており、チャットユーザーのオンラインおよびオフラインの通知も実装されています。実装方法を詳細に説明しましょう。
バックエンド処理
Tomcatは、主にorg.apache.catalina.websocket.messageinboundクラスに依存してWebSocketを実装します。このクラスは{tomcat_home} /lib/catalina.jarにあるので、開発するときは、catalina.jarとtomcat-coyote.jarを紹介する必要があります。次のコードは、クライアントのサーブレットアドレスに公開されます。
パッケージcom.ibcio; javax.servlet.annotation.webservletをインポートします。 javax.servlet.http.httpservletrequestをインポートします。 org.apache.catalina.websocket.streaminboundをインポートします。 @webservlet（urlpatterns = {"/message"}）//ブラウザのws：//プロトコルからリクエストを受信する場合は、websocketservletクラスのパブリッククラスwebsocketmessageservletを実装する必要があります。 public static int online_user_count = 1; public string getUser（httpservletrequest request）{return（string）request.getSession（）。getAttribute（ "user"）; } //通常のサーブレットとは異なり、createwebsocketinboundを実装する必要があり、カスタムWebSocket接続オブジェクトは@OverrideプロテクションのStreamewSocketinbound（String Subprotocol、HttpservletRequestリクエスト）{新しいWebSocketMessageInbound（this.getuser（request））; }}このサーブレットは、通常のサーブレットとは多少異なります。 WebSocketServletクラスを継承し、createwebsocketinboundメソッドをオーバーライドする必要があります。このクラスのセッション中のユーザー属性は、ユーザーがindex.jspを入力し、現在のユーザーのニックネームを記録するときに設定されます。以下は、自分で実装されたWebSocketMessageInboundクラスのコードです。
パッケージcom.ibcio; java.io.ioexceptionをインポートします。 java.nio.bytebufferをインポートします。 java.nio.charbufferをインポートします。 net.sf.json.jsonobjectをインポートします。 org.apache.catalina.websocket.messageinboundをインポートします。 org.apache.catalina.websocket.wsoutboundをインポートします。パブリッククラスWebSocketMessageInboundはMessageInbound {//現在の接続のユーザー名はプライベート最終文字列ユーザーです。 Public WebSocketMessageInbound（String User）{this.user = user; } public string getUser（）{return this.user; } //接続を確立してトリガーされたイベント@Override保護されたvoid onopen（wsoutbound outbound）{//接続イベントをトリガーし、接続プールに接続を追加しますjsonobject result = new jsonobject（）; result.element（ "type"、 "user_join"）; result.element（ "user"、this.user）; //現在のユーザーがすべてのオンラインユーザーにオンラインであるというメッセージを押してくださいWebSocketMessageInBoundPool.SendMessage（result.toString（））; result = new jsonobject（）; result.Element（ "type"、 "get_online_user"）; result.element（ "list"、websocketmessageinboundpool.getonlineuser（））; //現在の接続オブジェクトを接続に追加します。 //現在のオンラインユーザーリストを現在の接続に送信しますWebSocketMessageInBoundPool.sendMessageTouser（this.user、result.toString（））; } @Override Protected void onclose（int status）{//クロージングイベントをトリガーし、接続から接続を削除websocketmessageinboundpool.removemessageinbound（this）; jsonObject result = new jsonobject（）; result.element（ "type"、 "user_leave"）; result.element（ "user"、this.user）; //現在のユーザーがWebSocketMessageInBoundPool.sendMessage（result.toString（））を退出するというオンラインユーザーにメッセージを送信します。 } @Override保護されたvoid onbinarymessage（bytebufferメッセージ）IoExceptionをスロー{new unsupportedoperationException（ "バイナリメッセージはサポートされていない。"）; } //イベントは、クライアントがサーバーにメッセージを送信したときにトリガーされます@Override保護されたvoid ontextMessage（charbuffer message）ioException {//すべてのオンラインユーザーにメッセージを送信するWebSocketMessageInBoundPool.sendMessage（messay.toString（））; }}このコードは、主に、ユーザーのオンライン、オフライン、およびメッセージの送信を処理するOnopen、Onclose、およびOntextMessageメソッドを実装します。このクラスには、websocketmessageinboundpool接続プールクラスがあります。このクラスは、現在のオンラインユーザーの接続を管理するために使用されます。以下はこのクラスのコードです。
パッケージcom.ibcio; java.io.ioexceptionをインポートします。 java.nio.charbufferをインポートします。 java.util.hashmapをインポートします。 java.util.mapをインポートします。 java.util.setをインポートします。パブリッククラスWebSocketMessageInBoundPool {//接続用マップコンテナを保存プライベート静的最終マップ<String、WebSocketMessageInBound> Connections = new Hashmap <String、websocketMessageInbound>（）; //接続を接続プールに追加するpublic static void addmessageinbound（websocketmessageinbound inbound）{//接続システムを追加します。 connections.put（inbound.getuser（）、inbound）; } //すべてのオンラインユーザーを取得しますpublic static set <string> getOnlineUser（）{return connections.keyset（）; } public static void removemessageinbound（websocketmessageinbound inbound）{//接続system.out.println（ "user：" + inbound.getuser（） + "exit .."） connections.remove（inbound.getuser（））; } public static void sendmessagetouser（string user、string message）{//特定のユーザーにデータを送信System.out.println（ "メッセージをユーザーに送信：" + user + "、メッセージコンテンツ：" +メッセージ）; WebSocketMessageInbound Inbound = connections.get（user）; if（inbound！= null）{inbound.getwsoutbound（）。writeTextmessage（charbuffer.wrap（message））; }} catch（ioexception e）{e.printstacktrace（）; }} //すべてのユーザーにメッセージを送信しますpublic static void sendmessage（string message）{try {set <string> keyset = connections.keyset（）; for（string key：keyset）{websocketmessageinbound inbound = connections.get（key）; if（inbound！= null）{system.out.println（ "ユーザーにメッセージを送信：" + key + "、message content：" + message）; inbound.getwsoutbound（）。writeTextmessage（charbuffer.wrap（message））; }}} catch（ioexception e）{e.printstacktrace（）; }}}フロントデスクディスプレイ
上記のコードは、主に3つのオブジェクト、サーブレット、接続オブジェクト、および接続プールで構成されるチャットルームバックエンドのコードです。以下は、フロントデスクのコードです。フロントデスクのコードは、主にサーバーとの接続を実装し、ユーザーリストと情報リストを表示します。フロントデスクの表示は、extフレームワークを使用します。 Extに精通していない学生は、Extを予備的に理解することができます。以下はindex.jspのコードです：
<％@ page Language = "java" pageEncoding = "utf-8" import = "com.ibcio.websocketmessageervlet"％> <％string user =（string）session.getattribute（ "user"）; if（user == null）{//ユーザーのニックネームを生成= "guest" + websocketmessageservlet.online_user_count; websocketMessageervlet.online_user_count ++; session.setattribute（ "user"、user）; } pageContext.setattribute（ "user"、user）; ％> <html> <head> <title> websocketチャットルーム</title> <！ - cssファイルを紹介 - > <link rel = "styleSheet" type = "text/css" ext4/resources/css/css/ext-al.css "> <link rel =" styleSheet "type =" like/css "href ="/cs "/<< rel = "styleSheet" type = "text/css" href = "css/websocket.css"/> <！ - 入力extのJS開発パッケージと独自の実装されたWebScoket。 - > <スクリプトタイプ= "text/javascript" src = "ext4/ext-all-debug.js"> </script> <script type = "text/javascript" src = "websocket.js"> </script> <script = "text/javascript"> var user = "{user}"; </script> </head> <body> <h1> WebSocketチャットルーム</h1> <p> HTML5標準が提供するAPIは、エクステリッククライアントフレームワークと組み合わせてチャットルームを実装します。これには次の特性があります。コミュニケーションは、ポーリングや長い接続などのテクノロジーとは異なり、サーバーリソースを節約します</li> <li>ページディスプレイ</li> <li>ユーザーオンラインおよびオフライン通知</li> </ul> <div id = "websocket_button"> </div> </body> </html>ページの表示は、主にwebsocket.jsで制御されています。以下は、websocket.jsdのコードです。
//ユーザーのチャット情報を表示するために使用されますext.define（ 'messagecontainer'、{extend： 'ext.view.view'、trackover：true、multiselect：false、itemcls： 'l-im-message'、itemselector： 'div.l-im-message'、overitemcls： 'l-message-overs'、selectediTemcls： 'l-messiTemcls： {Overflow： 'auto'、backgroundcolor： '#fff'}、tpl：['<div>は、会話中の馴染みのない電話を信頼していません</div>' <tpl for = "。"> '、' <div> '<div> {content} </div>'、 '</div>'、 '</tpl>']、メッセージ：[]、initcomponent：function（）{var me = ext.define（ 'leetop.im.messagemodel'、 'source']}）; store = ext.create（ext.data.store '、{letop.im.messagemodel'、me.messages}）; message ['Timestamp'] = ext.date.format（new Date（message ['timestamp']）、 'h：i：s'）; if（message.from == user）{message.source = 'self'; } else {message.source = 'remote'; } me.store.add（message）; if（me.el.dom）{me.el.dom.scrolltop = me.el.dom.scrollheight; }}}）;このコードは、主にメッセージを表示するコンテナを実装しています。以下は、ページがロードされた後に実行を開始するコードです。
Ext.Onready（function（）{//ユーザー入力ボックスvar入力= ext.create（ 'ext.filed.htmleditor'、{region： 'south'、height：height：enablefont：false、evenableSour：false、enablealignments：false、false、リスナー：{intialize：function（）{ext.eventmanager.on（me. get.get（）{me. function {e.ctrlkey === e.preventdefault（）; ext.create（ 'ext.panel.panel'、{region： 'center'、layout： 'border'、項目：[入力、出力]、ボタン：[{'send'、handler：send}]}）; websocket（ 'ws：// localhost：8080/websocket/message'）; } websocket.onclose = function（）{//接続切断win.settitle（title + '（disconnected）'）; } //メッセージ受信websocket.onmessage = function（message）{var message = json.parse（message.data）; //ユーザーが送信したメッセージを受信しますif（message.type == 'message'）{output.receive（message）; } else if（message.type == 'get_online_user'）{//オンラインユーザーリスト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'）{//ユーザーはオンラインでvar root = onlineuser.getRootNode（）; var user = message.user; var node = root.createNode（{id：user、text：user、iconcls： 'user'、leaf：true}）; root.AppendChild（ノード）; } else if（message.type == 'user_leave'）{//ユーザーはオフラインになりますvar root = onlineuser.getRootNode（）; var user = message.user; var node = root.findchild（ 'id'、user）; root.RemoveChild（ノード）; }}}}}; //オンラインユーザーツリーvar onlineUser = ext.create（ 'ext.tree.panel'、{title： 'online'、roothisible：false、gional： 'east'、width：150、lines：false、usearrows：true、autoscroll：true、split：true、iconcls： 'user-online'、store：ext.create（ 'ext.create（' '' data.data.data） user '、展開：true、children：[]}}）}）; var title = 'ようこそ：' + user; //ウィンドウvar win = ext.create（ 'ext.window.window'、{title：title：title + '（no not connected）'、layout： 'border'、iconcls： 'user-win'、minwin '：650、minheight：460、width：650、amateTarget：' webSocketton '、resed：460、Items：ford：460、Itelus： {render：function（）{initwebsocket（）}}）; win.show（）; //メッセージ関数送信send（）{var message = {}; if（websocket！= null）{if（input.getValue（））{ext.Apply（ext.Apply（{from：user、content：input.getValue（）、timestamp：new date（）。gettime（）、type： 'message'}）; websocket.send（json.stringify（message））; //output.receive(message）; input.setValue（ ''）; }} else {ext.msg.alert（ 'tip'、 'あなたは切断され、メッセージを送信できません！'）; }}}}）;上記のコードは、ページが読み込まれて表示インターフェイスを作成した後にサーバーに自動的に接続するコードです。
知らせ
2つの点に注意してください。展開が完了した後、TomcatアプリケーションディレクトリのLIBディレクトリのCatalina.jar.jarとtomcat-coyote.jarを削除する必要があります。たとえば、プロジェクトのLIBディレクトリはd：/workspace/websocket/webroot/web-inf/libであり、展開されたアプリケーションlibディレクトリはd：/tools/apache-tomcat-7.0.32/webapps/websocket/web-inf/libです。展開ディレクトリのLIBディレクトリを削除し、2つの瓶を接続するだけです。それ以外の場合、エラーが初期化されない場合があります。覚えて。
接続がまだ不可能な場合は、最新のTomcatをダウンロードしてください。 Tomcatcreatewebsocketinboundのバージョンにはリクエストパラメーターがないことを忘れました。現在のコードにはこのパラメーターがあります。 7.0.3xxバージョンにはすべてこのパラメーターが付属しています。
要約します
WebSocketを使用してサーバープッシュを開発することは非常に便利です。これは簡単なアプリケーションです。実際、WebrTCを組み合わせてビデオチャットや音声チャットを実現することもできます。
ダウンロードの例
住所をダウンロード：デモ
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。