この記事では、オンラインチャットを実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLクエリで大文字と小文字を区別しない問題を解決する方法
>>: CentOS7.5にHarbor1.7をインストールして設定するプロセス全体
今日は仮想マシンを使って実験をしました。システムをインストールし、いくつかのオプションを最適化した後...
目次序文1. パンくずリストはなぜ必要なのでしょうか? 2. 一次包装1. 実装のアイデア2. コー...
これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...
まず、どのフィールドまたはフィールドの組み合わせがデータ行を一意に識別できるかを決定する必要がありま...
目次コンポーネントの再帰呼び出しレンダリングメソッドの使用プロジェクトに取り組んでいると、左側のメニ...
Win10システムにMySQL8.0.20をローカルにインストールし、個人的にテストして利用可能であ...
MYSQL 5.6 スレーブレプリケーションの展開と監視MYSQL 5.6 のインストールと展開 #...
1. カスタムテキスト選択 ::選択{ 背景: 赤; 色: 黒; } 2. ビデオコントロールからダ...
前回、非常に熱心なファンから、月を呼吸する光の効果にできるかどうか尋ねられました。月の大きさの写真が...
MySQL の運用と保守において、R&D の同僚が 2 つの異なるインスタンスのデータを比較...
この記事では、最も単純なものから最も複雑なものまで、Nginx の現在の制限構成を例を使って説明しま...
目次概要1. store.jsを定義する2. store.js を使用するコンポーネント3. 成果を...
この記事では、3階層ナビゲーションの表示と非表示を実現するためのVueの具体的なコードを例として紹介...
前提条件クラウドサーバー(Alibaba Cloud、Tencent CloudなどのcentOS)...