VueはWebSocketを使用してチャット機能をシミュレートします

VueはWebSocketを使用してチャット機能をシミュレートします

この効果は、2つのブラウザが互いにシミュレートしていることを示しています

ここに画像の説明を挿入

ここに画像の説明を挿入

1. シミュレートされたノードサービスを作成する

バックエンドサーバーをシミュレートするために、vueルートディレクトリにserver.jsファイルを作成します。

ここに画像の説明を挿入

**サーバーターミナルディレクトリにダウンロード**

npm インストール --s ws

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('サーバーが正常に作成されました')

次にnpm run startでサーバーを起動します

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;
    }
  }
}
</スタイル>
  1. 次に npm run dev を実行すると、LAN 上でチャットできるようになります。ワイヤレスがある場合は、携帯電話を使用してワイヤレスに接続し、IP アドレスにアクセスできます。ワイヤレスでない場合は、さらにいくつかのウィンドウを開いて、効果を確認してください。 !
  2. チャットルームに入ってメッセージを送信すると、サーバーはログを出力します。

ここに画像の説明を挿入

Vue が WebSocket を使用してチャット機能をシミュレートする方法についての記事はこれで終わりです。Vue が WebSocket を使用してチャットを実装する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue で webSocket を使用してリアルタイムの天気を更新する方法
  • Vue が websocket を使用する方法の例の分析
  • SockJS を使用して vue で webSocket 通信を実装するプロセス
  • Vue プロジェクトで Websocket を使用する正しい方法

<<:  WebApi を使用して複数のサーバーを展開し、Nginx ロード バランシングを構成するチュートリアル

>>:  MySQL 8.0.13 のインストールと設定のグラフィックチュートリアル

推薦する

Linux スケジュールタスクの関連操作の概要

皆様の参考と操作を容易にするために、様々な主要ウェブサイトを検索し、関連するスケジュールされたタスク...

Vueコンポーネント化の基本的な使用方法の詳細

目次1. コンポーネント化とは何ですか? 2. 基本的な使い方序文:場合によっては、HTML 構造化...

MySQLインデックスに関する重要な面接の質問をいくつか共有します

序文インデックスは、データベース内の 1 つ以上の列の値を並べ替え、データベースが効率的にデータを取...

CentOS7にMySQL 8.0.26をインストールする手順

1. まず、お使いのマシンに応じて、MySQL 公式サイトから対応するデータベースをダウンロードしま...

Dockerを使用してAngularプロジェクトをデプロイする方法

Docker を使用して Angular プロジェクトをデプロイする方法は 2 つあります。1 つは...

フロントエンドJavaScriptのクラス

目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...

Linux サーバーで MySQL リモート接続を有効にする方法

序文以前の非MKレコードを再編成するためのMySQLの学習説明する有効になっていない場合、データベー...

goaccess を使用して nginx ログを分析する詳細な方法

最近、goaccess を使って nginx ログを分析したいのですが、nginx ログの設定形式が...

テーブルの追加と削除の操作を実装する js

この記事の例では、テーブルを追加および削除するためのjsの具体的なコードを参考までに共有しています。...

CentOS で Mysql を再起動するさまざまな方法 (推奨)

1. rpm パッケージ経由でインストールされた MySQL サービスmysqldを再起動 /et...

Apache SkyWalkingのセルフモニタリングを素早く有効にする方法を説明します

1. Prometheusテレメトリデータを有効にするデフォルトでは、テレメトリは次のように無効にな...

5分でReactルーティングについてお教えします

目次ルーティングとは純粋コンポーネントの基本的な使用純粋なコンポーネントの使用に関する注意事項ルーテ...

MySQLとOracleの違いを簡単に説明してください

1. Oracle は大規模データベースですが、MySQL は小規模から中規模のデータベースです。O...

Mybatis+mysqlはストアドプロシージャを使用してシリアル番号実装コードを生成します。

同時操作によるデータの重複を避けるために、データベースを操作するときにストアドプロシージャを使用して...