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

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

<テンプレート>
  <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;
    }
  }
}
</スタイル>