この記事では、オンラインチャットを実現するための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をインストールして設定するプロセス全体
Q1: データベースにはどのようなインデックスがありますか?メリットとデメリットは何ですか? 1. ...
MySQLはOracleのようなシーケンスを実装しているOracle は通常、主キー フィールドを処...
IE 8 以降では互換モードが追加され、これを有効にすると IE の下位バージョンでレンダリングされ...
目次基本的な手順と使用方法行コンポーネントの分析レンダリング機能ソースコード分析Col成分の分析コン...
目次序文プロジェクトを初期化するデザインコードの実装オンデマンドロードオーディオを再生録音長押しイベ...
MySQL サービスを使用する場合、通常の状況では、MySQL のタイムアウト設定は 8 時間 (2...
key_lenの意味MySQL では、次に示すように、explain を使用して SQL ステートメ...
目次繰り返しレンダリングループを避ける副作用の除去についてReact16.8 の新しい useEff...
チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...
1. MySQLデータベースを作成する1. データベース構文を作成する --「testdb」という名...
今日はベテランの貴重な経験を共有します。著者は技術管理の経験が7年あり、多い時は80人以上を率いてい...
1. Windows Server 2019 のインストールVmware に Windows Se...
ネットで検索してみたところ、多くの面接でモバイル適応方法について質問されることが分かりました。最近い...
1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...
方法1:リスピンを使用するには、次の手順に従ってください。 sudo add-apt-reposit...