ピアツーピア チャットのサンプル コードの HTML5 WebSocket 実装

昨日、HTML5 WebSocket と Tomcat を使用して複数人チャットを実装しました。これは最も単純で最も基本的なものですが、注意すべきは開発環境です。もちろん、これは jdk1.7 と tomcat8.063 を満たしている必要があります。も働きます！

今日は国慶節の最終日なので、残業してコーディングを続けなければなりません。幸いなことに、私は Google を使用して WebSocket に関するピアツーピア チャットを見つけました。さらに良いことに、レンダリングを見てみましょう。

シミュレートされているため、ここに示されているのは 2 つの JSP ページ A と B で、それぞれセッションに Xiaoming と Xiaohua という 2 つの名前が含まれています。ここでのセッションは HttpSession セッションであり、前の複数人チャットのセッションは javax であることに注意してください。 .websocket.Session は異なります。

ここで考えてみましょう。HttpSession セッションを使用してチャット ユーザーを制御すると、どのようなメリットがあるでしょうか ~~~

ここでは注釈は使用されません。従来の web.xml 構成方法では、システムの起動時に最初に InitServlet メソッドが呼び出されます。

 public class InitServlet extends HttpServlet { private staticfinallongserialVersionUID = -3163557381361759907L; public void init(ServletConfig config) throws ServletException { InitServlet.socketList = new HashMap<String,MessageInbound>(); super.init(config); System.out.println(チャットコンテナの初期化); } public static HashMap<String,MessageInbound> getSocketList() { return InitServlet.socketList;

ここで、独自のシステムと組み合わせることができます。対応する Web 構成コードは次のとおりです。

 <?xml version=1.0coding=UTF-8?><web-app version=3.0 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_3_0.xsd> <servlet> <servlet-name>websocket</servlet-name> <servlet-class>socket.MyWebSocketServlet</servlet-class > </servlet> <servlet-mapping> <servlet-name>websocket</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <servlet> <servlet-name>initServlet</servlet-name> <servlet-class>socket.InitServlet</servlet-class> <load-on-startup>1</load-on-startup ><!--メソッド実行レベル--> </servlet> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list></web-app>

これは、フロント デスクがバックグラウンドにリクエストを送信する最も一般的なプロセスであり、独自のシステムに簡単に組み込むこともできます。

MyWebSocketサーブレット:

 public class MyWebSocketServlet extends WebSocketServlet { public String getUser(HttpServletRequest request){ String userName = (String) request.getSession().getAttribute(user); if(userName==null){ return null; } protected StreamInbound createWebSocketInbound (文字列 arg0、HttpServletRequest リクエスト) { System.out.println(user + request.getSession().getAttribute(user) + login); return new MyMessageInbound(this.getUser(request));

MyMessageInbound は MessageInbound を継承します

パッケージ ソケット;インポート java.io.IOException;インポート java.nio.ByteBuffer;インポート java.nio.CharBuffer;インポート java.util.HashMap;インポート org.apache.catalina.websocket.MessageInbound;インポート org.apache.catalina.websocket .WsOutbound;import util.MessageUtil;public class MyMessageInbound extends MessageInbound { private String名前; public MyMessageInbound() { super(); } public MyMessageInbound(String name) { super(); } @Override protected void onBinaryMessage(ByteBuffer arg0) throws IOException { } @Override protected void onTextMessage(CharBuffer) msg) throws IOException { //ユーザーによって送信されたメッセージを処理した後のマップ HashMap<String,String> messageMap = MessageUtil.getMessage(msg); // メッセージ クラスの処理 // オンライン ユーザー コレクション クラス マップ HashMap<String, MessageInbound> userMsgMap = InitServlet.getSocketList(); // メッセージは、ユーザーの userId String toName = messageMap.get(toName) //メッセージの送信先のユーザー ID //ユーザーの MessageInbound を取得します messageInbound = userMsgMap.get(toName); // ウェアハウス内のユーザーに送信された MessageInbound を取得します MessageInbound messageFromInbound = userMsgMap.get(fromName); if(messageInbound!=null && messageFromInbound!=null){ // 送信者が存在する場合は、次の処理を実行します操作 WsOutbound アウトバウンド = messageInbound.getWsOutbound(); messageFromInbound.getWsOutbound(); String content = messageMap.get(content); //メッセージの内容を取得します String msgContentString = fromName +say: + content; //コンテンツ CharBuffer を Msg = CharBuffer に送信します。ラップ(msgContentString .toCharArray()); CharBuffer fromMsg = CharBuffer.wrap(msgContentString.toCharArray()); outFromBound.writeTextMessage(fromMsg); outbound.writeTextMessage(toMsg); // outFromBound.flush(); } } @Override protected void onClose(int status) { InitServlet.getSocketList().remove(this) ; super.onClose(ステータス); } @Override protected void onOpen(WsOutbound アウトバウンド) { super.onOpen(outbound); //ログインユーザーが登録されている if(name!=null){ InitServlet.getSocketList().put(name, this);//ストレージカスタマーサービスIDとユーザー} } @Override public int getReadTimeout( ) { 0 を返す } }

onTextMessage 内のフォアグラウンドによって送信された情報を処理し、その情報をターゲットにカプセル化します。

messageutilもあります

package util;import java.nio.CharBuffer;import java.util.HashMap;public class MessageUtil { public static HashMap<String,String> getMessage(CharBuffer msg) { HashMap<String,String> map = new HashMap<String,String> (); 文字列 msgString = msg.toString(); msgString.split(,); map.put(fromName, m[1]); マップを返します。

もちろんフロントも所定のフォーマットで情報を発信しなければなりません。

 <%@ ページ言語=java contentType=text/html; charset=UTF-8 pageEncoding=UTF-8%><!DOCTYPE html><html><head><meta http-equiv=Content-Type content=text/html ; charset=UTF-8><title>インデックス</title><script type=text/javascript src=js/jquery-1.7.2.min.js></script><%session.setAttribute(user, minimum);%><script type=text/javascript>var ws = null;function startWebSocket() { if (ウィンドウ内の「WebSocket」) ws = new WebSocket(ws://localhost:8080/WebSocketUser/websocket.do); else if (ウィンドウ内の「MozWebSocket」) ws = new MozWebSocket(ws://localhost:8080/WebSocketUser/websocket.do) else warning(not support) { //alert(evt.data) ); console.log(evt); // $(#xiaoxi).val(evt.data); }; function setMessageInnerHTML(innerHTML){ document.getElementById('message').innerHTML += innerHTML + '<br/>' } ws.onclose = function(evt) { //alert(close); 'denglu').innerHTML=オフライン }; ws.onopen = function(evt) { //alert(open); document.getElementById('denglu').innerHTML=online; document.getElementById('userName').innerHTML='xiaohua'; };}function sendMsg() { var fromName = xiaoxing; 'name ').value; //送信先 var content = document.getElementById('writeMsg').value; //コンテンツを送信 ws.send(fromName+,+toName+,+content);//形式に注意}</script></head><body onload=startWebSocket();><p>チャット機能の実装</ p> ログイン ステータス: <span id=denglu style=color:red;>ログイン中</span><br>ログイン者: <span id=userName></span><br><br><br>宛先: < 入力タイプ=テキストid=name value=小明></input><br>コンテンツの送信: <input type=text id=writeMsg></input><br>チャット ボックス: <div id=message style=height: 250px;width: 280px ;border: 1px ソリッド; オーバーフロー: auto;></div><br><input type=button value=send onclick=sendMsg()></input></body></html>

これは A.jsp ページです。B は上記と同じです

上記のコードにより、ポイントツーポイントのチャット機能が実現でき、大規模であればチャットルームや1人チャットも含めたWeb版のチャットシステムにすることができるとのこと。 websocket はバイナリ送信をサポートしていませんが、大きな Liu が次のようなことを言っているのを見ました

しかし今ではバイナリを使う意味はあまりないように感じています。私は長い間混乱していましたが、JS はバイナリをサポートしていないと言われていましたが、実際にはこれを勉強していない詐欺師の集団であることがわかりました。 。 (ファイルリーダーを使用)

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。