少なくともjdk1.7の環境要件、tomcat7
pom.xml
<依存性> <groupIdを>のjavax </のgroupId> <たartifactId>のJavaEE-API </たartifactId> <バージョン> 7.0 </バージョン> <範囲> </スコープ>提供 </依存>
WebSocket.java
com.websocketsパッケージ;
インポートjavax.websocket * ;.
インポートjavax.websocket.server.ServerEndpoint、
インポートにjava.io.IOException;
インポートjava.util.concurrent.CopyOnWriteArrayList;
@ServerEndpoint（値= "/用WebSocket"）
パブリッククラスのWebSocket {
/ **
*クライアントへの接続セッションでは、データによってクライアントに送信する必要がある
* /
プライベートセッションのセッション;
プライベートA CopyOnWriteArrayListと静的<a WebSocket>ソケットA CopyOnWriteArrayListと新しい新しい= <>（）;
/ **
*作成
* @セッションPARAM
* /
@OnOpen
公共ボイド開く時（セッションセッション）{
this.session =セッション;
のSystem.out.println（ "作成"）;
sockets.add（この）;
}
/ **
*发送消息
* @paramメッセージ
* @throwsのIOException
* /
@OnMessage
公共のsendMessage（文字メッセージ）IOExceptionが{スローボイド
ため（のWebSocketのWebSocket：ソケット）{
。webSocket.session.getBasicRemote（）sendText（メッセージ）。
}
}
/ **
*关闭
* /
@OnClose
公共ボイドOnCloseの（）{
sockets.remove（本）
}
/ **
*发生错误
* @paramセッション
* @paramエラー
* /
@OnError
公共ボイドのonError（セッションセッションのThrowableエラー）{
するSystem.out.println（ "发生错误"）。
error.printStackTrace（）;
}
}
チャット呼び出しページ
page.html
<！DOCTYPE HTML>
<HTML>
<HEAD>
<METAのcharset = "UTF-8">
<タイトル>チャットインターフェース</ TITLE>
<スタイル>
/ **リセットタグのデフォルトのスタイル* /
* {
マージン：0;
パディング：0;
のlist-style：なし;
フォントファミリ： '微軟雅黒'
}
#container {
幅：450px;
高さ：780px;
背景：#eee;
マージン：80pxオート0;
位置：相対;
箱-シャドウ：20ピクセル＃777 55×20ピクセル;
}
.header {
背景：＃000。
高さ：40ピクセル;
色：#FFF;
右：80px;
行の高さ：34px;
フォントサイズ：20ピクセル;
パディング：0 10pxの;
}
.footer {
幅：430px;
高さ：は50px;
背景：＃666;
位置：絶対;
下：0;
パディング：10pxの;
}
.footer入力{
幅：275px;
高さ：45px;
概要：なし。
フォントサイズ：20ピクセル;
テキストインデント：10pxの;
位置：絶対;
国境半径：計6Px。
}
.footerスパン{
表示：インラインブロック。
幅：62px;
高さ：48px;
背景：#CCC;
フォント重量：900;
行の高さ：45px;
カーソル：ポインタ;
テキスト整列：センター;
位置：絶対;
右：10pxの;
国境半径：計6Px。
}
スパン.footer：ホバー{
色：#FFF。
背景：＃999;
}
#user_face_icon {
表示：インラインブロック。
背景：赤;
幅：60PX;
高さ：60PX;
国境半径：30px;
位置：絶対;
下：計6Px。
左：14px;
カーソル：ポインタ;
オーバーフロー：隠されました;
}
IMG {
幅：60PX。
高さ：60PX;
}
.content {
フォントサイズ：20ピクセル。
幅：435px;
高さ：662px;
オーバーフロー：自動;
パディング：5pxの;
}
.contentリチウム{
マージントップ：10pxの。
パディング左：10pxの;
幅：412px;
表示ブロック;
クリア：両方を、
オーバーフロー：隠されました;
}
.contentのLi IMG {
フロート：左;
}
.contentリチウムスパン{
背景：＃7cfc00。
パディング：10pxの;
国境半径：10pxの;
フロート：左;
マージン：10pxの計6Px 0 10pxの;
最大幅：310px;
国境：1pxの固体#CCC。
ボックスシャドウ：0 0 3px #CCC。
}
.contentのLi img.imgleft {
フロート：左;
}
.contentのLi img.imgright {
フロート：右。
}
.contentのLi span.spanleft {
フロート：左;
背景：#FFF;
}
.contentのLi span.spanright {
フロート：右。
背景：＃7cfc00。
}
</スタイル>
</ head>
<body>
<DIV ID = "コンテナ">
<DIV CLASS = "ヘッダ">
<スパンスタイル= "フロート：左;">业余草：模拟微信聊天界面</スパン>
<スパンのスタイル= "フロート：右;">夜02時21分</ span>を
</ div>
<ulのクラス= "コンテンツ">
</ UL>
<DIV CLASS = "フッタ">
<div要素のid = "user_face_icon">
<IMG SRC = "http://www.xttblog.com/icons/favicon.ico" ALT = "">
<SCRIPT>
window.onload =関数（）{
VARのWebSocket = NULL;
IF（のWebSocket == NULL）{
/ * WS：// localhostを：8080 /試験/ *のWebSocket呼び出しアドレスのWebSocket /
用WebSocket AのWebSocket新しい新=（「WS ：// localhostを：8080 /試験/用WebSocket「）;
}他{
アラート（ "ブラウザがのWebSocketをサポートしていません"）;
}
/ *エラー* /
webSocket.onerror =関数（イベント）{
にconsole.log（イベント）。
};
/ *作成* /
webSocket.onopen =関数（イベント）{
のonMessage（ "グループチャット"）;
};
/ *メッセージを受信* /
webSocket.onmessage =関数（イベント）{
のonMessage（event.data）。
};
/ *クローズ* /
webSocket.onclose =関数（イベント）{
};
VAR arrIcon = [ 'HTTPS：//c-ssl.duita_EyjSF.thumb.700_0.jpeg'、「HTTPS：//c-ssl.duitan0_0 .JPEG '];
= 0のvar NUM; //は、画像制御変更
VAR iNow = -1; //フローティング周りに蓄積する変更
VARアイコン=のdocument.getElementById（' user_face_icon '）（IMG'）をgetElementsByTagNameの「;
VAR BTN document.getElementById =（ 'BTN'）;
VARテキスト=のdocument.getElementById（ 'テキスト'）;
VARのdocument.getElementsByTagNameコンテンツ=（ 'UL'）[0];
VAR = content.getElementsByTagName IMG（ 'IMG'）;
VAR content.getElementsByTagName =スパン（ 'スパン'）;
+値+ '</ span>を</ LI>';
}
}
</ SCRIPT>
</ HTML>