この効果は、2つのブラウザが互いにシミュレートしていることを示しています 1. シミュレートされたノードサービスを作成するバックエンドサーバーをシミュレートするために、vueルートディレクトリに **サーバーターミナルディレクトリにダウンロード**
2. server.jsファイルを書くコードは次のとおりです var userNum = 0; //オンラインユーザーの数をカウントします var chatList = []; //チャット履歴を記録します var WebSocketServer = require('ws').Server; wss = new WebSocketServer({ port: 8181 }); //8181 はフロントエンドに対応します //データの相互通信とリアルタイム更新を実現するためにブロードキャストを呼び出します wss.broadcast = function (msg) { wss.clients.forEach(関数 each(client) { クライアント.send(メッセージ); }); }; wss.on('接続', 関数(ws) { userNum++; //接続が正常に確立されました。オンライン人数 +1 wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList })); //接続が成功すると、現在オンラインの人数がブロードキャストされます console.log('接続されたクライアント:', userNum); //フロントエンドから送信されたデータを受信する ws.on('message', function (e) { var resData = JSON.parse(e) console.log('クライアントからメッセージを受信しました:' + resData.msg) chatList.push({ userId: resData.userId, content: resData.msg }); //メッセージが送信されるたびに、保存されてからブロードキャストされるため、参加する各ユーザーは以前のデータを見ることができます。 wss.broadcast(JSON.stringify({ userId: resData.userId, msg: resData.msg })); //送信される各メッセージは、メッセージのブロードキャストと同等です。 }); ws.on('close', 関数(e) { userNum--; //接続を確立し、オンライン人数をクローズ - 1 wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList })); //接続を確立し、ブロードキャストを一度閉じます。現在のオンライン クライアントの数 console.log('接続されたクライアント:', userNum); console.log('長い接続が閉じられました') }) }) console.log('サーバーが正常に作成されました') 次に 3.vueフロントエンドページコードは次のとおりです <テンプレート> <div class="チャットボックス"> <header>チャットルームの人数: {{count}}</header> <div class="msg-box" ref="msg-box"> <div v-for="(i,index) リスト内" :key="インデックス" クラス="msg" :style="i.userId == userId?'flex-direction:row-reverse':''" > <div class="ユーザーヘッド"> <div クラス="head" :style="` 背景: hsl(${getUserHead(i.userId,'bck')}, 88%, 62%); クリップパス: polygon(${getUserHead(i.userId,'polygon')}% 0,100% 100%,0% 100%); 変換: rotate(${getUserHead(i.userId,'rotate')}deg)`" </div> </div> <div class="ユーザーメッセージ"> <span :style="i.userId == userId?'float: right':''" :class="i.userId == userId?'right':'left'" >{{i.content}}</span> </div> </div> </div> <div class="入力ボックス"> <input type="text" ref="sendMsg" v-model="contentText" @keyup.enter="sendText()" /> <div class="btn" :class="{['btn-active']:contentText}" @click="sendText()">送信</div> </div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ() { 戻る { ws: null、 カウント: 0, userId: null, //現在のユーザーID list: [], //チャット記録の配列 contentText: "", //入力値}; }, 作成された() { ユーザーIDを取得します。 }, マウント() { このメソッドは、WebSocket を初期化します。 }, メソッド: { //タイムスタンプを現在のユーザーIDとして使用します 取得ユーザーID() { time = new Date().getTime(); とします。 this.userId = 時間; }, // ユーザーIDに基づいてランダムなアバターを生成する getUserHead(id, type) { ID = String(id); とします。 if (type == "bck") { Number(ID.substring(ID.length - 3))を返します。 } if (type == "ポリゴン") { Number(ID.substring(ID.length - 2))を返します。 } if (type == "回転") { Number(ID.substring(ID.length - 3))を返します。 } }, // 一番下までスクロールバー scrollBottm() { el = this.$refs["msg-box"]とします。 el.scrollTop = el.scrollHeight; }, //チャットメッセージを送信する sendText() { _this = this とします。 _this.$refs["sendMsg"].focus(); _this.contentText の場合 戻る; } パラメータ = { ユーザーID: _this.userId、 メッセージ: _this.contentText、 }; _this.ws.send(JSON.stringify(params)); // WebSocket send() を呼び出して情報を送信します _this.contentText = ""; タイムアウトを設定する(() => { _this.scrollBottm(); }, 500); }, //WebSocket接続を作成するページに入る initWebSocket() { _this = this とします。 //ページ上にWebSocket接続があるかどうかを判断します。if (window.WebSocket) { // ここでのポート番号 :8181 はバックエンド構成と一致している必要があります let ws = new WebSocket("ws://192.168.5.42:9502"); // let ws = new WebSocket("ws://192.168.5.8:8181"); // ローカルの test_this.ws = ws です。 ws.onopen = 関数 (e) { console.log("サーバー接続に成功しました"); }; ws.onclose = 関数 (e) { console.log("サーバー接続が閉じられました"); }; ws.onerror = 関数(){ console.log("サーバー接続エラー"); }; ws.onmessage = 関数 (e) { //サーバーから返されたデータを受信する let resData = JSON.parse(e.data); resData.funName == "userCount"の場合{ _this.count = resData.users; _this.list = resData.chat; } それ以外 { _this.list = [ ..._this.list、 { ユーザーID: resData.userId、コンテンツ: resData.msg }, ]; } }; } }, }, }; </スクリプト> <style lang="scss" スコープ> .チャットボックス{ マージン: 0 自動; 背景: #fafafa; 位置: 絶対; 高さ: 100%; 幅: 100%; // 最大幅: 700px; ヘッダー { 位置: 固定; 幅: 100%; 高さ: 3rem; 背景: #409eff; // 最大幅: 700px; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 フォントの太さ: 太字; 色: 白; フォントサイズ: 1rem; } .msg-box { 位置: 絶対; 高さ: calc(100% - 6.5rem); 幅: 100%; 上マージン: 3rem; overflow-y: スクロール; .msg{ 幅: 95%; 最小高さ: 2.5rem; マージン: 1rem 0.5rem; 位置: 相対的; ディスプレイ: フレックス; justify-content: flex-start !important; .user-head { 最小幅: 2.5rem; 幅: 20%; 幅: 2.5rem; 高さ:2.5rem; 境界線の半径: 50%; 背景: #f1f1f1; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 。頭 { 幅: 1.2rem; 高さ:1.2rem; } // 位置: 絶対; } .ユーザーメッセージ{ 幅: 80%; // 位置: 絶対; 単語区切り: 全区切り; 位置: 相対的; zインデックス: 5; スパン { 表示: インラインブロック; パディング: 0.5rem 0.7rem; 境界線の半径: 0.5rem; 上マージン: 0.2rem; フォントサイズ: 0.88rem; } 。左 { 背景: 白; アニメーション: toLeft 0.5s、ease both 1; } 。右 { 背景: #53a8ff; 色: 白; アニメーション: toright 0.5s ease both 1; } @keyframesを左へ{ 0% { 不透明度: 0; 変換: translateX(-10px); } 100% { 不透明度: 1; 変換: translateX(0px); } } @keyframes toright { 0% { 不透明度: 0; 変換: translateX(10px); } 100% { 不透明度: 1; 変換: translateX(0px); } } } } } .入力ボックス{ パディング: 0 0.5rem; 位置: 絶対; 下部: 0; 幅: 97%; 高さ:3.5rem; 背景: #fafafa; ボックスシャドウ: 0 0 5px #ccc; ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; アイテムの位置を中央揃えにします。 入力{ 高さ:2.3rem; 表示: インラインブロック; 幅: 100%; パディング: 0.5rem; 境界線: なし; 境界線の半径: 0.2rem; フォントサイズ: 0.88rem; } .btn{ 高さ:2.3rem; 最小幅: 4rem; 背景: #e0e0e0; パディング: 0.5rem; フォントサイズ: 0.88rem; 色: 白; テキスト配置: 中央; 境界線の半径: 0.2rem; 左マージン: 0.5rem; 遷移: 0.5秒; 行の高さ: 2.3rem; } .btn-アクティブ{ 背景: #409eff; } } } </スタイル>
Vue が WebSocket を使用してチャット機能をシミュレートする方法についての記事はこれで終わりです。Vue が WebSocket を使用してチャットを実装する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: WebApi を使用して複数のサーバーを展開し、Nginx ロード バランシングを構成するチュートリアル
>>: MySQL 8.0.13 のインストールと設定のグラフィックチュートリアル
皆様の参考と操作を容易にするために、様々な主要ウェブサイトを検索し、関連するスケジュールされたタスク...
目次1. コンポーネント化とは何ですか? 2. 基本的な使い方序文:場合によっては、HTML 構造化...
序文インデックスは、データベース内の 1 つ以上の列の値を並べ替え、データベースが効率的にデータを取...
1. まず、お使いのマシンに応じて、MySQL 公式サイトから対応するデータベースをダウンロードしま...
Docker を使用して Angular プロジェクトをデプロイする方法は 2 つあります。1 つは...
目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...
序文以前の非MKレコードを再編成するためのMySQLの学習説明する有効になっていない場合、データベー...
最近、goaccess を使って nginx ログを分析したいのですが、nginx ログの設定形式が...
この記事の例では、テーブルを追加および削除するためのjsの具体的なコードを参考までに共有しています。...
1. rpm パッケージ経由でインストールされた MySQL サービスmysqldを再起動 /et...
1. Prometheusテレメトリデータを有効にするデフォルトでは、テレメトリは次のように無効にな...
目次ルーティングとは純粋コンポーネントの基本的な使用純粋なコンポーネントの使用に関する注意事項ルーテ...
1. Oracle は大規模データベースですが、MySQL は小規模から中規模のデータベースです。O...
同時操作によるデータの重複を避けるために、データベースを操作するときにストアドプロシージャを使用して...
理由: MySQL 5.7.5 以降では機能依存関係の検出が実装されています。 only_full_...