Vue+SSH-Framework zur Realisierung von Online-Chat

<Vorlage>
<el-container>
  <el-header>
  </el-header>
  <el-main>
    <div class="cht">
   <div v-for="(d,index) in meinInhalt" :key="index">
      <meine :message="d.mess" :time="d.time" :bl="d.bl"></mein>
      </div>
      </div>
<div Klasse="smess">
  <el-Zeile>
    <el-col :span="18">
<el-input type="textarea" placeholder="Bitte Inhalt eingeben" v-model="textarea" class="text"></el-input>
    </el-col>
     <el-col :span="6">
       <br>
      <el-button type="primary" round @click="mess()">Nachricht senden</el-button>
    </el-col>
  </el-row>
  </div>
  </el-main>
</el-container>
</Vorlage>
<Stil>
.smess{
  links: 20%;
  Breite: 70 %;
  Position: absolut;
  oben: 70 %
}
.Text{
Rand: 1px durchgezogen #409eff;
}
.cht{
Breite: 55 %;
Höhe: 30%;
Hintergrundfarbe: Burlywood;
Rand links: 18 %;
}
</Stil>
<Skript>
Router aus "../../router/router.js" importieren;
importiere mein von "./my";
importiere Axios von „Axios“;
importiere Qs von „qs“;
var mylogo=localStorage.getItem("logo");//Aktueller Benutzeravatar var identity=localStorage.getItem("identity");//Aktuelle Identität var name=localStorage.getItem("username");//Aktueller Benutzername//Namen eines Lehrers von der vorherigen Seite abrufen var teacher='';
Standard exportieren {
   Komponenten:
      Mein
  },
  Methoden: {
    //Rufen Sie this.websocketsend() in der Methode auf, um Daten an den Server zu senden onConfirm() {
      //Zu übertragende Daten var data="Hello";
      dies.websocketsend(JSON.stringify(Daten));
    },
//Klicken Sie, um die Nachricht an das Hintergrund-Message() zu senden{
        var meineDaten=dieser.Textbereich;
         let data = {msg: meinedaten};
      dies.websocketsend(JSON.stringify(Daten));
    },
    /* */
    initWebSocket() {
      // Weosocket initialisieren
      //Den aktuellen Benutzernamen abrufen this.websock = new WebSocket(
        "ws://localhost:8080/PsychoSys/javasocket/" +Name
      );
      dies.websock.onmessage = dies.websocketonmessage;
      dies.websock.onerror = dies.websocketonerror;
      dies.websock.onopen = dies.websocketonopen;
      dies.websock.onclose = dies.websocketclose;
    },
    websocketonopen() {
      // Nachdem die Verbindung hergestellt ist, führen Sie die Sendemethode aus, um Daten zu senden. let data = { code: 0, msg: "Dies ist Client: erste Verbindung" };
    },
    websocketonerror() {
      console.log("WebSocket-Verbindung fehlgeschlagen");
    },
    websocketonmessage(e) {
      // Daten empfangen var s=eval('(' + e.data + ')');
  //Alle Daten hier einfügen this.mycontent.push({mess:s.msg,time:s.date,bl:s.isSelf,mylogo:mylogo});
    },
    websocketsend(Daten) {
      // Daten senden this.websock.send(Daten)
    },
    websocketclose(e) {
      // Schließen console.log("Verbindung geschlossen", e);
    }
  },
  erstellt() {
    console.log("erstellt");
    dies.initWebSocket();
  },
  Daten() {
    zurückkehren {
     WebSocket: null,
     Textbereich:'',
     meinInhalt:[],
     iden:true
     };
  },
  zerstört() {
    dies.websock.close();
  }
};
</Skript>

<Vorlage>
<div v-if="bl" Klasse="rborders">
  <el-row Klasse="ms">
    <el-col :span="22">
      <el-row><span>{{Nachricht}}</span></el-row>
      <br>
       <el-row><span class="time">{{Zeit}}</span></el-row>
  </el-col>
    <el-col :span="2" >
      <img src="meinLogo" class="logo"/>
  </el-col>
    </el-row>
  </div>
  <div v-else Klasse="lborders">
 <el-Zeile>
  <el-col :span="2" >
      <img src="http://localhost:8080/PsychoSys/title/user.png" class="logo"/>
  </el-col>
  <br>
    <el-col :span="12">
      <el-Zeile>
        <el-col :span="24"><span >{{message}}</span></el-col>
        </el-row>
      <br>
       <el-row><span class="time">{{Zeit}}</span></el-row>
  </el-col>
    </el-row>
  </div>
</Vorlage>
<Stil>
.MS{
Textausrichtung: rechts;
Rand rechts: 0 %;
}
.Logo{
    Breite: 60px;
    Höhe: 60px;
    Randradius: 50 %;
}
.Zeit{
  Schriftgröße: 14px;
}
.lborders{
  Position: relativ;
  Rand links: 0 %;
}
.rborders{
  Position: relativ;
  Rand rechts: 0 %;
}
</Stil>
<Skript>
Standard exportieren {
   Requisiten: ['Nachricht', 'Zeit', 'bl', 'meinLogo'],
     Daten() {
        zurückkehren {
     };
      },
}
</Skript>

Paket cn.com.socket;
importiere java.io.IOException;
importiere java.text.SimpleDateFormat;
importiere java.util.Date;
importiere java.util.Map;
importiere java.util.concurrent.ConcurrentHashMap;
 
importiere javax.websocket.OnClose;
importiere javax.websocket.OnError;
importiere javax.websocket.OnMessage;
importiere javax.websocket.OnOpen;
importiere javax.websocket.Session;
importiere javax.websocket.server.PathParam;
importiere javax.websocket.server.ServerEndpoint;
 
importiere org.hibernate.SessionFactory;
 
importiere net.sf.json.JSONObject;
@ServerEndpoint("/javasocket/{uname}")
öffentliche Klasse SocketPart {
 //Datum private static final SimpleDateFormat DATE_FORMAT = neues SimpleDateFormat("yyyy-MM-dd HH:mm"); 
 //Speichern Sie eine Sammlung von Sitzungen, der Werttyp ist die Java-Klasse SocketPart
 private statische Map<String,SocketPart> map=neue ConcurrentHashMap<String,SocketPart>();
    privater String-Benutzername;
    private Sitzungssitzung;
 private SessionFactory sf;
 öffentliche SessionFactory getSf() {
  Rückkehr sf;
 }
 öffentliche void setSf(SessionFactory sf) {
  dies.sf = sf;
 }
 @BeimÖffnen
 public void open(@PathParam("uname")String Benutzername,Session Sitzung){
  this.username=Benutzername;
  diese.session=Sitzung;
  map.put(Benutzername,dies);
 }
 @BeimSchließen
 öffentliche Leere schließen(){
  map.remove(dieser.Benutzername);
  versuchen {
   diese.Sitzung.schließen();
  } Fang (IOException e) {
   // TODO Automatisch generierter Catch-Block
   e.printStackTrace();
  }
  System.out.println("Schließen");
 }
 @BeiFehler
 öffentliche void Fehler(Throwable t) {
  // Fehlerbehandlungsoperation close() hinzufügen;
  System.out.println("Es ist ein Fehler aufgetreten");
  
  t.printStackTrace();
 }
 @OnMessage
 öffentliche void-Nachricht (String-Nachricht, Sitzungssitzung) {
  JSONObject jsonObject = JSONObject.fromObject(Nachricht);
  jsonObject.put("Datum", DATE_FORMAT.format(neues Datum()));
  //Geben Sie der Rezeption die aktuelle Sammlungsgröße weiter, sonst weiß ich nicht, wie ich sie speichern solljsonObject.put("cusize",map.size());
 //Informationen empfangen für (String s : map.keySet()) {
   wenn (dieser.Benutzername.ist gleich(map.get(s).Benutzername)) {
    jsonObject.put("istSelbst", true);
   }anders{
    jsonObject.put("istSelbst", false);
   }
   map.get(s).session.getAsyncRemote().sendText(jsonObject.toString());
  }
 }
}