メインテキストを紹介する前に、WebSocketの背景と原則を紹介しましょう。
背景
ブラウザのHTTPを通じて、片道通信のみを実現できます。 Cometは双方向通信をある程度シミュレートできますが、効率が低く、サーバーからの適切なサポートが必要です。 SocketとXmlSocket in Flashは、真の双方向通信を実現でき、これら2つの機能はFlex Ajax Bridgeを介してJavaScriptで使用できます。 WebSocketがブラウザに実装されている場合、上記の2つのテクノロジーを置き換えて広く使用されることが予見可能です。この状況に直面して、HTML5はWebSocketプロトコルを定義します。これにより、サーバーリソースと帯域幅をより適切に節約し、リアルタイム通信を実現できます。
WebSocketプロトコルはJavaee7にも実装されています。
原理
WebSocketプロトコル。
今日、インスタントコミュニケーションを実現するために、多くのウェブサイトがポーリングを使用しています。ポーリングは、特定の時間間隔（1秒ごとなど）でサーバーにHTTPリクエストを送信し、サーバーは最新のデータをクライアントのブラウザに返します。この従来のHTTP要求パターンは、明らかな欠点をもたらします。ブラウザは、サーバーに継続的にリクエストを行う必要があります。ただし、HTTP要求のヘッダーは非常に長く、そこに含まれる有用なデータはわずかな値であり、多くの帯域幅を占める可能性があります。
投票するための新しいテクノロジーの効果は、CometがAjaxを使用していることです。ただし、このテクノロジーは全二重通信を実現できますが、それでもリクエストが必要です。
WebSocket APIでは、ブラウザとサーバーは握手するだけで、ブラウザとサーバーの間に高速チャネルが形成されます。データは、2つの間に直接送信できます。このWebSocketプロトコルでは、インスタントサービスを実装することに2つの大きな利点があります。
1。ヘッダー
互いに通信するヘッダーは非常に小さいです - おそらく2バイトだけ
2。サーバープッシュ
サーバーによってプッシュすると、サーバーはデータを返す前にブラウザの要求を受動的に受信しなくなりますが、新しいデータが利用可能になったときに積極的にブラウザにプッシュします。
1。プロジェクトの紹介
WebSocketは、HTML5の新しいプロトコルです。ブラウザとサーバー間の完全な二重通信を実装します。ここでは、WebSocketがWebチャットルームの開発に使用されます。フロントエンドのフレームワークでは、Amazeui、バックグラウンドでJava、編集者のUMeditorを使用します。
2。知識ポイントを含む
Webフロントエンド（HTML+CSS+JS）およびJava
3.ソフトウェア環境Tomcat 7 JDK 7 Eclipse Javaee Modern Browser
4。効果スクリーンショット
効果1
効果2
5。プロジェクトの実用的な戦闘
1.新しいプロジェクトを作成します
Eclipse Javaeeを開き、Chatという名前の新しいダイナミックWebプロジェクトを作成し、JSON形式の文字列を処理するために必要なパッケージをインポートし、Commons-Beanutils-1.8.0.jar、Commons-Collections-3.2.1.jar、Commons-Lang-2.5.Jar、Commons-Logging-1.1.Jar、jar、ezmorph-1.0.6.6.6.6.6.6.6.6.6.Jar JSON-LIB-2.4-JDK15.JARおよびその他のパッケージは、WebContent/Web-INF/LIBディレクトリに配置され、最後にプロジェクトをTomcatサーバーに公開します。この時点で、空のプロジェクトが完了します。
2。フロントエンドページを書きます
WebContentディレクトリにindex.jspという名前の新しいページを作成します。 Amazeuiフレームワークはここで使用されています。クロススクリーン適応フロントエンドフレームワークです。メッセージ入力ボックスはUMeditorを使用します。これは、メッセージコンテンツをカラフルにすることができる豊富なテキストオンラインエディターです。
まず、Amazeuiの公式Webサイトから圧縮パッケージをダウンロードしてから、Assetsフォルダーを解凍してWebContentディレクトリをコピーして、AmazeUIを使用できるようにします。
次に、UEDITER公式WebサイトからJSPバージョンの圧縮パッケージのミニバージョンをダウンロードし、ディレクトリ全体をWebContentディレクトリに解凍し、フロントエンドコードを書くことができます。コードは次のとおりです（好みに応じて書くことができます）：
<％@ page Language = "Java" contentType = "text/html; charset = utf-8" pageencoding = "utf-8"％> <！ name = "Viewport" content = "width = device-width、initial-scale = 1、maximing-scale = 1、user-scalable = no"> <title> shiyanlouチャット</title> <！ - > <meta name = "renderer" content = "webkit"> <！ content = "no-siteapp"/> <link rel = "代替アイコン" href = "assets/i/favicon.ico"> <link rel = "styleSheet" href = "assets/css/amazeui.min.css"> <link rel = "styleSheet" href = "asss/css/app.css href = "umeditor/themes/default/css/umeditor.css" rel = "styleSheet"> <style> .title {text-align：center;}。chat-content-container {height：29rem;オーバーフロー-Y：スクロール;ボーダー：1pxソリッドシルバー;} </style> </head> <body> <！ - タイトルスタート - > <div> <div> <div> <div> <h1> shiyanlouチャット</h1> </div> </div> </div> <チャットコンテンツの開始 - > <！ - メッセージ入力開始 - > <div> <div> <form> <div> <スクリプトタイプ= "テキスト/プレーン" id = "myeditor"> </script> </div> </form> </div> div> <div> <div> <div> <div> <div> div = "message-input-nickname" type = "text" placeholder = "ニックネーム"/> </div> </div> <div> <script src = "assets/js/jquery.min.js"> </script> <！ - <！ - [if lte ie 8]> <script src = "http://libs.baidu.com/jquery/1.11.1/jquery.min.js"> </script> <！ - <！ - <！ - < umeditor js-> <script charset = "utf-8" src = "umeditor/umeditor.config.js"> </script> <charset = "utf-8" src = "umeditor/umeditor.min.js"> </scrip {//メッセージ入力ボックスvar um = um.geteditor（ 'myeditor'）; //ニックネームボックスを作成しますfocus $（ '＃nickname'）[0] .focus（）; }）; </script> </body> </html>書き込み後、Tomcatサーバーを起動してから、http：// localhost：8080/chat/index.jspにアクセスすると、次のインターフェイスが表示されます。
3.背景コードを書きます
com.shiyanlou.chatの新しいパッケージを作成し、パッケージにChatserverというクラスを作成します。 WebSocket APIはJavaee 7以降統一されています。したがって、どのサーバーであっても、Javaで記述されたコードは同じであり、コードは次のとおりです。
パッケージcom.shiyanlou.chat; import java.text.simpledateformat; Import java.util.date; import javax.websocket.onclose; import javax.websocket.onerror; import javax.websocket.onmessage; javax.websocket.server.serverendpoint; import net.sf.json.jsonobject;/** *チャットサーバークラス * @author shiyanlou * */ @serverendpoint（ "/websocket"）パブリッククラスチャットサーバー{プライベート静的最終simpledateformat date_format = new simpledateformat（ "yyymmddhh"） @Onopen public void open（セッションセッション）{//初期化操作を追加} / ***クライアントのメッセージを受け入れ、接続されたすべてのセッションにメッセージを送信*クライアントからのメッセージメッセージ* @paramセッション//メッセージに送信日を追加jsonobject.put（ "date"、date_format.format（new date（）））; //（Session Opensession：Session.GetOpenSesions（））のすべての接続されたセッションにメッセージを送信します。 // json-formattedメッセージopensession.getasyncremote（）。sendtext（jsonobject.tostring（））を送信します。 }} @onclose public void close（）{//セッションを閉じるときに操作を追加} @onerror public void error（throwable t）{//エラーを処理するために操作を追加}}}4。フロントおよびバックステージの相互作用
背景を書いた後、フロントデスクはWebSocketを使用してバックグラウンドに接続する必要があります。新しいWebSocketオブジェクトを作成する必要があります。その後、サーバーと対話し、ブラウザからメッセージをサーバーに送信し、同時に入力ボックスのコンテンツが空であるかどうかを確認し、サーバーから送信されたメッセージを受け入れ、チャットコンテンツボックスにダイナミックに追加します。
var um = um = um.geteditor（ 'myeditor'）; $（ '＃nickname'）[0] .focus（）; //新しいwebsocketオブジェクトを作成し、最後/websocketはserver-side @serverendpoint（ "/websocket"）var socket = newに対応しますwebSocket（ 'ws：// $ {pagecontext.request.getServername（）}：$ {pagecontext.request.getServerport（）} $ {pagecontext.request.contextpath}/websocket'）; //サーバー側のsocket.onmessage = function（event）{addmessage（event.data）;によって送信されたプロセスデータ}; // action $（ '＃send'） setimeout（ "$（'。edui-container '） $（ '＃message-input-nickname'）。 //メッセージ入力um.setContent（ ''）; //チャットコンテンツ関数にメッセージを追加するaddmessage（message）{message = json.parse（message）; var messageItem = '<li>' + '<a href = "javascript：void（0）"> <img src = "assets/images/' +（message.isself？ 'self.png'： 'others.jpg'） + '" // </a>' + ' +' + '<header> <divas " message.nickname + '</a> <time>' + message.date + '</time> </div> </header>' + '<div>' + message.content + '</div> </div> </li>'; $（messageItem）.appendto（ '＃message-list'）; // scrollbarを下の$にスクロールします（ "。Chat-Content-container"）。scrolltop（$（ "。Chat-Content-Container"）[0] .scrollheight）; }この時点で、シンプルなWebチャットルームが完成しました。さらにいくつかのウィンドウを開いたり、友人を招待してLANで一緒にテストすることができます。
6。概要
このプロジェクトクラスは、WebSocketを使用して、シンプルなWebチャットルームを実装しています。実際、WebSocketはブラウザだけでなく、デスクトップクライアントにも適用できます。
7。質問を考えています
このプロジェクトクラスは、チャットルームの簡単な実装にすぎません。実際、アバターアップロード機能、1対1のチャット機能など、追加できる多くの機能があります。チャットルームを一緒に改善しましょう。
これを見たらすぐに試してみませんか？ここをクリックしてください---環境の構築を心配する必要がなくなるように、無料のオンラインコンピレーション環境を提供してください
上記は、JavaとWebsocketを使用してWebチャットルームの例コードを実装したことに関する関連する知識です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！