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

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

この記事では、オンラインチャットを実現するためのVue + sshフレームワークの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

レンダリング

コア部分

Websocketプログラミング

バックエンドにメッセージを送信する

<テンプレート>
<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メソッドは、次の例のように機能します。
  }
};
</スクリプト>

コンポーネント my.vue

<テンプレート>
<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());
  }
 }
}

注: 2つのパッケージをインポートする

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue+express+Socketでチャット機能を実現
  • Vueはチャットインターフェースを実装する
  • Vue が Web オンラインチャット機能を実現
  • Vue+ウェブ端末がWeChatウェブ版チャットルーム機能を模倣
  • Vue.js は WeChat チャットウィンドウを模倣してコンポーネント機能を表示します
  • Vue + socket.io はシンプルなチャットルームのサンプルコードを実装します
  • Vue2ベースのモバイルQQを模倣したシングルページアプリケーション機能(チャットボットへのアクセス)
  • RongCloud IM を使用して Vue Cli 3 プロジェクトにチャット機能を実装する方法
  • Vue で実装された WeChat ロボット チャット機能の例 [ソース コードのダウンロードあり]
  • Vue と Websocket をベースにした複数人用オンライン チャット ルーム

<<:  MySQLクエリで大文字と小文字を区別しない問題を解決する方法

>>:  CentOS7.5にHarbor1.7をインストールして設定するプロセス全体

推薦する

CentOS7.4 起動時の緊急モードへようこそメッセージに対する解決策

今日は仮想マシンを使って実験をしました。システムをインストールし、いくつかのオプションを最適化した後...

Vue3 でパンくず関数コンポーネントをカプセル化するいくつかの方法

目次序文1. パンくずリストはなぜ必要なのでしょうか? 2. 一次包装1. 実装のアイデア2. コー...

入力ボックスのオートコンプリート機能をオフにする

これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...

MySql テーブル内の行を削除する実用的な方法

まず、どのフィールドまたはフィールドの組み合わせがデータ行を一意に識別できるかを決定する必要がありま...

VUE無限レベルツリーデータ構造表示の実装

目次コンポーネントの再帰呼び出しレンダリングメソッドの使用プロジェクトに取り組んでいると、左側のメニ...

Windows 10 での MySQL 8.0.20 のインストールと設定方法のグラフィック チュートリアル

Win10システムにMySQL8.0.20をローカルにインストールし、個人的にテストして利用可能であ...

MYSQL 5.6 スレーブレプリケーションの展開と監視

MYSQL 5.6 スレーブレプリケーションの展開と監視MYSQL 5.6 のインストールと展開 #...

あまり一般的ではないが便利な CSS 属性操作の完全ガイド

1. カスタムテキスト選択 ::選択{ 背景: 赤; 色: 黒; } 2. ビデオコントロールからダ...

Pure CSS と Flutter はそれぞれブリージング ライト効果を実現します (サンプル コード)

前回、非常に熱心なファンから、月を呼吸する光の効果にできるかどうか尋ねられました。月の大きさの写真が...

MySQL クイックデータ比較テクニック

MySQL の運用と保守において、R&D の同僚が 2 つの異なるインスタンスのデータを比較...

Nginxの現在の制限設定の詳細な説明

この記事では、最も単純なものから最も複雑なものまで、Nginx の現在の制限構成を例を使って説明しま...

Vueのシンプルな状態管理ストアモードを理解する方法

目次概要1. store.jsを定義する2. store.js を使用するコンポーネント3. 成果を...

Vueは3段階のナビゲーション表示と非表示を実装します

この記事では、3階層ナビゲーションの表示と非表示を実現するためのVueの具体的なコードを例として紹介...

docker に基づいて nginxssl 設定を開始する

前提条件クラウドサーバー(Alibaba Cloud、Tencent CloudなどのcentOS)...

...