オンラインチャットを実現する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をインストールして設定するプロセス全体

推薦する

MySQL インデックスの一般的な問題の概要

Q1: データベースにはどのようなインデックスがありますか?メリットとデメリットは何ですか? 1. ...

MySQLはOracleシーケンスに似たソリューションを実装しています

MySQLはOracleのようなシーケンスを実装しているOracle は通常、主キー フィールドを処...

HTML を使用して IE8 および IE9 の互換表示モードを無効にするヒント

IE 8 以降では互換モードが追加され、これを有効にすると IE の下位バージョンでレンダリングされ...

Element-ui レイアウト (行と列コンポーネント) の実装

目次基本的な手順と使用方法行コンポーネントの分析レンダリング機能ソースコード分析Col成分の分析コン...

vue3を使用して人間と猫のコミュニケーションアプレットを実装する

目次序文プロジェクトを初期化するデザインコードの実装オンデマンドロードオーディオを再生録音長押しイベ...

操作タイムアウトがないときにMySQLサーバーがアクティブに切断される問題を解決します

MySQL サービスを使用する場合、通常の状況では、MySQL のタイムアウト設定は 8 時間 (2...

MySQLクエリプランでken_lenの値を計算する方法

key_lenの意味MySQL では、次に示すように、explain を使用して SQL ステートメ...

React useEffect の理解と使用

目次繰り返しレンダリングループを避ける副作用の除去についてReact16.8 の新しい useEff...

1 つの記事で Nginx ロケーション マッチングの実装を理解する

チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...

mysql データベースの作成、ユーザーの追加、ユーザー認証の実用的な方法

1. MySQLデータベースを作成する1. データベース構文を作成する --「testdb」という名...

実務経験7年のフロントエンドスーパーバイザーによる経験共有

今日はベテランの貴重な経験を共有します。著者は技術管理の経験が7年あり、多い時は80人以上を率いてい...

Windows Server 2019 のセットアップ方法 (画像とテキスト付き)

1. Windows Server 2019 のインストールVmware に Windows Se...

モバイルフロントエンド適応ソリューション(概要)

ネットで検索してみたところ、多くの面接でモバイル適応方法について質問されることが分かりました。最近い...

CSSレイアウトにおけるフローティング問題に対する4つの解決策の詳細な説明

1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...

Ubuntuのバックアップ方法(4種類)のまとめ

方法1:リスピンを使用するには、次の手順に従ってください。 sudo add-apt-reposit...