オンラインチャットを実現するVue+sshフレームワーク

<テンプレート>
<el-コンテナ>
  <el-ヘッダー>
  </el-header>
  <メイン>
    <div class="cht">
   <div v-for="(d,index) in mycontent" :key="index">
      <my :message="d.mess" :time="d.time" :bl="d.bl"></my>
      </div>
      </div>
<div class="smess">
  <el-行>
    <el-col :span="18">
<el-input type="textarea" placeholder="コンテンツを入力してください" v-model="textarea" class="text"></el-input>
    </el-col>
     <el-col :span="6">
       <br>
      <el-button type="primary" round @click="mess()">メッセージを送信</el-button>
    </el-col>
  </el-row>
  </div>
  </el-main>
</el-コンテナ>
</テンプレート>
<スタイル>
.smess{
  残り：20%
  幅:70%;
  位置: 絶対;
  トップ:70%
}
。文章{
境界線: 1px 実線 #409eff;
}
.cht{
幅: 55%;
高さ: 30%;
背景色: バーリーウッド;
左マージン: 18%;
}
</スタイル>
<スクリプト>
「../../router/router.js」からルーターをインポートします。
「./my」からmyをインポートします。
「axios」からaxiosをインポートします。
「qs」からQsをインポートします。
var mylogo=localStorage.getItem("logo");//現在のユーザーアバター var identity=localStorage.getItem("identity");//現在の ID var name=localStorage.getItem("username");//現在のユーザー名//前のページから教師の名前を取得します var teacher='';
エクスポートデフォルト{
   コンポーネント:
      私の
  },
  メソッド: {
    //メソッド内でthis.websocketsend()を呼び出してサーバーにデータを送信します onConfirm() {
      // 送信されるデータ var data="Hello";
      this.websocketsend(JSON.stringify(data));
    },
//クリックするとバックグラウンドmess()にメッセージが送信されます{
        var mydata = this.textarea;
         データを {msg: mydata} とします。
      this.websocketsend(JSON.stringify(data));
    },
    /* */
    WebSocketの初期化() {
      // wesocketを初期化する
      //現在のユーザー名を取得します this.websock = new WebSocket(
        "ws://localhost:8080/PsychoSys/javasocket/" +名前
      );
      this.websocketonmessage は、次のメッセージを返します。
      this.websocketonerror をオーバーライドします。
      this.websocket.onopen = this.websocketonopen;
      this.websocket.onclose は this.websocketclose です。
    },
    ウェブソケットオープン() {
      // 接続が確立されたら、send メソッドを実行してデータを送信します。let data = { code: 0, msg: "This is client: first connection" };
    },
    ウェブソケットエラー() {
      console.log("WebSocket接続に失敗しました");
    },
    ウェブソケットメッセージ(e) {
      // データ受信 var s=eval('(' + e.data + ')');
  //すべてのデータを挿入します this.mycontent.push({mess:s.msg,time:s.date,bl:s.isSelf,mylogo:mylogo});
    },
    websocketsend(データ) {
      // データ送信 this.websock.send(Data)
    },
    ウェブソケットを閉じる(e) {
      // 閉じる console.log("接続が閉じられました", e);
    }
  },
  作成された() {
    console.log("作成されました");
    このメソッドは、WebSocket を初期化します。
  },
  データ（） {
    戻る {
     ウェブソケット: null、
     テキストエリア:''、
     私のコンテンツ:[],
     識別: 真
     };
  },
  破壊された() {
    このWebSockメソッドは、次の例のように機能します。
  }
};
</スクリプト>

<テンプレート>
<div v-if="bl" class="rborders">
  <el-row クラス="ms">
    <el-col :span="22">
      <el-row><span>{{メッセージ}}</span></el-row>
      <br>
       <el-row><span class="time">{{time}}</span></el-row>
  </el-col>
    <el-col :span="2">
      <img src="mylogo" class="logo"/>
  </el-col>
    </el-row>
  </div>
  <div v-else class="lborders">
 <el-行>
  <el-col :span="2">
      <img src="http://localhost:8080/PsychoSys/title/user.png" class="logo"/>
  </el-col>
  <br>
    <el-col :span="12">
      <el-行>
        <el-col :span="24"><span >{{メッセージ}}</span></el-col>
        </el-row>
      <br>
       <el-row><span class="time">{{time}}</span></el-row>
  </el-col>
    </el-row>
  </div>
</テンプレート>
<スタイル>
。MS{
テキスト配置: 右;
右マージン: 0%;
}
。ロゴ{
    幅:60ピクセル;
    高さ: 60px;
    境界線の半径: 50%;
}
。時間{
  フォントサイズ:14px;
}
.lborders{
  位置: 相対的;
  左マージン:0%;
}
.rborders{
  位置: 相対的;
  右マージン:0%;
}
</スタイル>
<スクリプト>
エクスポートデフォルト{
   プロパティ: ['メッセージ','時間','bl','mylogo'],
     データ（） {
        戻る {
     };
      },
}
</スクリプト>

パッケージ cn.com.socket;
java.io.IOException をインポートします。
java.text.SimpleDateFormat をインポートします。
java.util.Date をインポートします。
java.util.Map をインポートします。
java.util.concurrent.ConcurrentHashMap をインポートします。
 
javax.websocket.OnClose をインポートします。
javax.websocket.OnError をインポートします。
javax.websocket.OnMessage をインポートします。
javax.websocket.OnOpen をインポートします。
javax.websocket.Session をインポートします。
javax.websocket.server.PathParam をインポートします。
javax.websocket.server.ServerEndpoint をインポートします。
 
org.hibernate.SessionFactory をインポートします。
 
net.sf.json.JSONObject をインポートします。
@ServerEndpoint("/javasocket/{uname}")
パブリッククラスSocketPart{
 //日付 private static final SimpleDateFormat DATE_FORMAT = new SimpleDateFormat("yyyy-MM-dd HH:mm"); 
 //セッションのコレクションを保存します。値の型は java クラス SocketPart です。
 プライベート静的 Map<String,SocketPart> map=new ConcurrentHashMap<String,SocketPart>();
    プライベート文字列ユーザー名;
    プライベートセッションセッション。
 プライベート SessionFactory sf;
 パブリックセッションファクトリーgetSf() {
  sf を返します。
 }
 パブリック void setSf(SessionFactory sf) {
  sf は sf の後に続きます。
 }
 オープン中
 public void open(@PathParam("uname")String ユーザー名、セッション セッション){
  this.username=ユーザー名;
  this.session=セッション;
  map.put(ユーザー名、これ);
 }
 @閉じる
 パブリックボイドクローズ(){
  map.remove(このユーザー名);
  試す {
   このセッションを閉じます。
  } キャッチ (IOException e) {
   // TODO 自動生成されたキャッチブロック
   e.printStackTrace();
  }
  System.out.println("閉じる");
 }
 @エラー時
 パブリック void error(Throwable t) {
  // エラー処理操作 close() を追加します。
  System.out.println("エラーが発生しました");
  
  t.printStackTrace();
 }
 @メッセージ
 パブリック void メッセージ(文字列メッセージ、セッションセッション){
  JSONObject jsonObject = JSONObject.fromObject(メッセージ);
  jsonObject.put("date", DATE_FORMAT.format(新しいDate()));
  // 現在のコレクション サイズをフロント デスクに渡します。そうしないと、保存方法がわかりません。jsonObject.put("cusize",map.size());
 // (String s : map.keySet()) の情報を受け取ります {
   if (this.username.equals(map.get(s).username)) {
    jsonObject.put("isSelf", true);
   }それ以外{
    jsonObject.put("isSelf", false);
   }
   map.get(s).session.getAsyncRemote().sendText(jsonObject.toString());
  }
 }
}