Tomcat 7ベースのHTML 5 WebSocketアプリケーションの例
8246 ワード
Tomcat 7ベースのHTML 5 WebSocketアプリケーションの例
次世代のWeb規格として、HTML 5には、Canvas、ローカルストレージ、マルチメディアプログラミングインターフェース、WebSocketなど、多くの注目を集める新しい特性があります.このうち「WebのTCP」と呼ばれるWebSocketは開発者の注目を集めている.WebSocketの登場により、ブラウザがSocketのサポートを提供することが可能になり、ブラウザとサーバの間にTCP接続に基づく双方向チャネルが提供される.Web開発者は、WebSocketを使用してリアルタイムのWebアプリケーションを構築するのに非常に便利です.
Webアプリケーションの情報インタラクションプロセスは、通常、クライアントがブラウザを通じて要求を発行し、サーバ側が要求を受信して審査した後、処理を行い、結果をクライアントに返し、クライアントブラウザが情報を提示するメカニズムであり、情報の変化が特に頻繁ではないアプリケーションに対しては安全であるが、リアルタイムの要求が高いアプリケーションにとっては、例えば、オンラインゲーム、オンライン証券、デバイスモニタリング、ニュースオンライン放送、RSS購読プッシュなど、クライアントブラウザがこれらの情報を表示する準備をしている場合、これらの情報はサーバ側では時代遅れになっている可能性があります.したがって,クライアントとサーバ側の情報同期を維持することはリアルタイムWebアプリケーションの重要な要素であり,Web開発者にとっても難題である.
WebSocket仕様が登場する前に、開発者はこれらのリアルタイムのWebアプリケーションを実現するために、いくつかのトレードオフ案を採用しなければならない.その中で最もよく使われているのはポーリング(Polling)とComet技術であり、Comet技術は実際にポーリング技術の改善であり、2つの実現方式に細分化することができる.1つはロングポーリングメカニズムであり、1つはストリーミング技術と呼ばれる.これらの技術を簡単に紹介します.
ポーリング:
これは、リアルタイムのWebアプリケーションを実現するための最初のスキームです.クライアントは、クライアントとサーバの同期を維持するために頻繁に要求されるように、サービス側に一定の時間間隔で要求を発行する.この同期スキームの最大の問題は、クライアントが一定の周波数でサーバに要求を開始すると、サーバ側のデータが更新されない可能性があり、無駄なネットワーク転送が多くなるため、非常に非効率なリアルタイムスキームである.
長いポーリング:
ロングポーリングは、無効なネットワーク伝送を低減するために、タイミングポーリングの改善と向上である.サーバ側にデータ更新がない場合、接続は、データまたはステータスが変化したり、期限が切れたりするまで一定の期間維持されます.このメカニズムにより、無効なクライアントとサーバ間のインタラクションが減少します.もちろん,サービス側のデータ変更が非常に頻繁であれば,このメカニズムはタイミングポーリングと比較して本質的な性能の向上はない.
ストリーム:
ストリーム・テクノロジー・スキームは、通常、クライアントのページで非表示のウィンドウを使用して、サービス側に長い接続を要求する.サーバ側は、この要求に応答し、クライアント側とサーバ側の接続が期限切れにならないように接続状態を更新し続けます.このようなメカニズムにより、サーバ側の情報をクライアントに絶えずプッシュすることができる.このメカニズムはユーザー体験に問題があり、異なるブラウザに対して異なる方案を設計してユーザー体験を改善する必要がある.同時に、このメカニズムは同時比較的大きな状況で、サーバー側の資源に対して大きな試練である.
これらのシナリオを総合すると、現在使用されているリアルタイムテクノロジーとは真のリアルタイムテクノロジーではなく、Ajax方式でリアルタイムの効果をシミュレートしているだけで、クライアントとサーバが相互作用するたびにHTTPのリクエストと応答のプロセスであることがわかります.一方、HTTPリクエストと応答ごとに完全なHTTPヘッダ情報が含まれているため、送信ごとのデータ量が増加し、これらのスキームではクライアント側とサーバ側のプログラミング実装が複雑であり、実際のアプリケーションでは、よりリアルなリアルタイム効果をシミュレートするために、開発者は往々にして2つのHTTP接続を構築してクライアントとサーバ間の双方向通信をシミュレートする必要があり、1つの接続はクライアントからサーバ側へのデータ伝送を処理するために使用され、1つの接続はサーバ側からクライアントへのデータ伝送を処理するために使用され、これはプログラミングの実現の複雑さを避けられず、サーバ側の負荷も増加した.応用システムの拡張性を制約した.
この文書では、簡単な例を用いて、WebSocketアプリケーションをTomcat 7(注:Tomcat 7以降ではWebSocketのサポートが提供されない)上で実行することを説明する.
一、WebSocket
WebSocket APIは、次世代クライアントサーバの非同期通信方法である.この通信は単一のTCPソケットに取って代わり、wsまたはwssプロトコルを使用して、任意のクライアントおよびサーバプログラムに使用することができる.WebSocketは現在W 3 Cで標準化されている.WebSocketは、Firefox 4、Chrome 4、Opera 10.70、Safari 5などのブラウザでサポートされています.
WebSocket APIの最も偉大な点は、サーバとクライアントが所定の時間範囲内の任意の時点で、互いに情報をプッシュできることである.WebSocketはAjax(またはXHR)方式で通信することに限定されない.Ajax技術はクライアントが要求を開始する必要があり、WebSocketサーバとクライアントは互いに情報をプッシュすることができるからである.XHRはドメインによって制限され、WebSocketはドメイン間通信を許可する.Ajaxテクノロジーが賢いのは、使用する方法を設計していないことです.WebSocketは、メッセージを双方向にプッシュするために指定されたターゲットのために作成されます.
二、servletの作成
カスタムservletはorgから継承する必要があります.apache.catalina.websocket.WebSocketServicelet、以下は完全なコードです.
三、配置Web.xml
四、indexを書く.htmlファイル
注意:Tomcat 7ディレクトリのcatalinaをコピーする必要があります.义齿JAr、デプロイ時にプログラムディレクトリのcatalinaを削除する必要があります.JAr、そうしないとservletのロードに失敗します.
次世代のWeb規格として、HTML 5には、Canvas、ローカルストレージ、マルチメディアプログラミングインターフェース、WebSocketなど、多くの注目を集める新しい特性があります.このうち「WebのTCP」と呼ばれるWebSocketは開発者の注目を集めている.WebSocketの登場により、ブラウザがSocketのサポートを提供することが可能になり、ブラウザとサーバの間にTCP接続に基づく双方向チャネルが提供される.Web開発者は、WebSocketを使用してリアルタイムのWebアプリケーションを構築するのに非常に便利です.
Webアプリケーションの情報インタラクションプロセスは、通常、クライアントがブラウザを通じて要求を発行し、サーバ側が要求を受信して審査した後、処理を行い、結果をクライアントに返し、クライアントブラウザが情報を提示するメカニズムであり、情報の変化が特に頻繁ではないアプリケーションに対しては安全であるが、リアルタイムの要求が高いアプリケーションにとっては、例えば、オンラインゲーム、オンライン証券、デバイスモニタリング、ニュースオンライン放送、RSS購読プッシュなど、クライアントブラウザがこれらの情報を表示する準備をしている場合、これらの情報はサーバ側では時代遅れになっている可能性があります.したがって,クライアントとサーバ側の情報同期を維持することはリアルタイムWebアプリケーションの重要な要素であり,Web開発者にとっても難題である.
WebSocket仕様が登場する前に、開発者はこれらのリアルタイムのWebアプリケーションを実現するために、いくつかのトレードオフ案を採用しなければならない.その中で最もよく使われているのはポーリング(Polling)とComet技術であり、Comet技術は実際にポーリング技術の改善であり、2つの実現方式に細分化することができる.1つはロングポーリングメカニズムであり、1つはストリーミング技術と呼ばれる.これらの技術を簡単に紹介します.
ポーリング:
これは、リアルタイムのWebアプリケーションを実現するための最初のスキームです.クライアントは、クライアントとサーバの同期を維持するために頻繁に要求されるように、サービス側に一定の時間間隔で要求を発行する.この同期スキームの最大の問題は、クライアントが一定の周波数でサーバに要求を開始すると、サーバ側のデータが更新されない可能性があり、無駄なネットワーク転送が多くなるため、非常に非効率なリアルタイムスキームである.
長いポーリング:
ロングポーリングは、無効なネットワーク伝送を低減するために、タイミングポーリングの改善と向上である.サーバ側にデータ更新がない場合、接続は、データまたはステータスが変化したり、期限が切れたりするまで一定の期間維持されます.このメカニズムにより、無効なクライアントとサーバ間のインタラクションが減少します.もちろん,サービス側のデータ変更が非常に頻繁であれば,このメカニズムはタイミングポーリングと比較して本質的な性能の向上はない.
ストリーム:
ストリーム・テクノロジー・スキームは、通常、クライアントのページで非表示のウィンドウを使用して、サービス側に長い接続を要求する.サーバ側は、この要求に応答し、クライアント側とサーバ側の接続が期限切れにならないように接続状態を更新し続けます.このようなメカニズムにより、サーバ側の情報をクライアントに絶えずプッシュすることができる.このメカニズムはユーザー体験に問題があり、異なるブラウザに対して異なる方案を設計してユーザー体験を改善する必要がある.同時に、このメカニズムは同時比較的大きな状況で、サーバー側の資源に対して大きな試練である.
これらのシナリオを総合すると、現在使用されているリアルタイムテクノロジーとは真のリアルタイムテクノロジーではなく、Ajax方式でリアルタイムの効果をシミュレートしているだけで、クライアントとサーバが相互作用するたびにHTTPのリクエストと応答のプロセスであることがわかります.一方、HTTPリクエストと応答ごとに完全なHTTPヘッダ情報が含まれているため、送信ごとのデータ量が増加し、これらのスキームではクライアント側とサーバ側のプログラミング実装が複雑であり、実際のアプリケーションでは、よりリアルなリアルタイム効果をシミュレートするために、開発者は往々にして2つのHTTP接続を構築してクライアントとサーバ間の双方向通信をシミュレートする必要があり、1つの接続はクライアントからサーバ側へのデータ伝送を処理するために使用され、1つの接続はサーバ側からクライアントへのデータ伝送を処理するために使用され、これはプログラミングの実現の複雑さを避けられず、サーバ側の負荷も増加した.応用システムの拡張性を制約した.
この文書では、簡単な例を用いて、WebSocketアプリケーションをTomcat 7(注:Tomcat 7以降ではWebSocketのサポートが提供されない)上で実行することを説明する.
一、WebSocket
WebSocket APIは、次世代クライアントサーバの非同期通信方法である.この通信は単一のTCPソケットに取って代わり、wsまたはwssプロトコルを使用して、任意のクライアントおよびサーバプログラムに使用することができる.WebSocketは現在W 3 Cで標準化されている.WebSocketは、Firefox 4、Chrome 4、Opera 10.70、Safari 5などのブラウザでサポートされています.
WebSocket APIの最も偉大な点は、サーバとクライアントが所定の時間範囲内の任意の時点で、互いに情報をプッシュできることである.WebSocketはAjax(またはXHR)方式で通信することに限定されない.Ajax技術はクライアントが要求を開始する必要があり、WebSocketサーバとクライアントは互いに情報をプッシュすることができるからである.XHRはドメインによって制限され、WebSocketはドメイン間通信を許可する.Ajaxテクノロジーが賢いのは、使用する方法を設計していないことです.WebSocketは、メッセージを双方向にプッシュするために指定されたターゲットのために作成されます.
二、servletの作成
カスタムservletはorgから継承する必要があります.apache.catalina.websocket.WebSocketServicelet、以下は完全なコードです.
package cn.jess.websocket;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;
public class EchoServlet extends WebSocketServlet {
/**
*
*/
private static final long serialVersionUID = -2581942001009336822L;
//private static final Logger log = Logger.getLogger("EchoServlet");
private static List<MessageInbound> socketList = new ArrayList<MessageInbound>();
// privat static final long ser
private static List<WebSocketMessageInbound> connsList = new ArrayList<WebSocketMessageInbound>();
protected StreamInbound createWebSocketInbound(String subProtocol,HttpServletRequest request){
return new WebSocketMessageInbound();
}
public class WebSocketMessageInbound extends MessageInbound{
protected void onClose(int status){
super.onClose(status);
socketList.remove(this);
}
protected void onOpen(WsOutbound outbound){
super.onOpen(outbound);
socketList.add(this);
}
//@Override
protected void onBinaryMessage(ByteBuffer message) throws IOException {
// TODO Auto-generated method stub
System.out.println("onBinarymessage");
}
@Override
protected void onTextMessage(CharBuffer message) throws IOException {
// TODO Auto-generated method stub
for(MessageInbound messageInbound : socketList){
CharBuffer buffer = CharBuffer.wrap(message);
WsOutbound outbound = messageInbound.getWsOutbound();
outbound.writeTextMessage(buffer);
outbound.flush();
}
}
}
}三、配置Web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>websocket</servlet-name>
<servlet-class>cn.jess.websocket.EchoServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>websocket</servlet-name>
<url-pattern>/websocket</url-pattern>
</servlet-mapping>
</web-app>四、indexを書く.htmlファイル
<!DOCTYPE html>
<html>
<head>
<title>WebSockete Demo</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
// WebSocket
if(!window.WebSocket){
alert("WebSockeet not supported by this browser!");
}
var ws;
function display(){
ws = new WebSocket("ws://localhost:8980/WebSocketHTML5/websocket");
//
ws.onmessage = function(event){
log(event.data);
}
// WebSocket
ws.onclose = function(event){
}
// WebSocket
ws.onopen = function(event){
ws.send("Hello,Server");
}
ws.onerror = function(event){
}
}
var log = function(s){
if(document.readyState !== "complete"){
log.buffer.pust(s);
}else{
document.getElementById("contendId").innerHTML += (s + "
");
}
}
function sendMsg(){
var msg = document.getElementById("messageId");
ws.send(msg.value);
}
</script>
</head>
<body onload="display();">
<div id="valueLabel"></div>
<textarea rows="20" cols="30" id="contendId"></textarea>
<br/>
<input name="message" id="messageId"/>
<button id="sendButton" onClick="javascript:sendMsg()">Send</button>
</body>
</html>注意:Tomcat 7ディレクトリのcatalinaをコピーする必要があります.义齿JAr、デプロイ時にプログラムディレクトリのcatalinaを削除する必要があります.JAr、そうしないとservletのロードに失敗します.