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 のインストールと設定のグラフィックチュートリアル

推薦する

モバイルの赤い封筒の雨機能ページを実装するための JavaScript HTML

この記事の例では、モバイル紅包雨機能ページを実現するためのHTMLの具体的なコードを共有しています。...

Linuxのseqコマンドを使用して数字のシーケンスを生成します(推奨)

Linux の seq コマンドは、数字のリストを非常に高速に生成でき、使いやすく柔軟性に優れてい...

MySQL 5.7.9 バージョンの sql_mode=only_full_group_by 問題を解決する

MySQL 5.7.9 バージョンの sql_mode=only_full_group_by の問題...

Docker で php-nginx-alpine イメージをゼロから構築する方法

これまでにも Docker 環境でいくつかのプロジェクトを実行したことはありますが、まだイメージをよ...

Ubuntu で nginx を使用して WebDAV ファイル サーバーを構築する詳細なプロセス

nginxをインストールするnginx-fullをインストールする必要があることに注意してください。...

Docker の詳細なイラスト

1. Dockerの紹介1.1 仮想化1.1.1 仮想化とは何ですか?コンピュータにおける仮想化とは...

VMware Workstation16 と Navicat リモート接続での Centos7 での MySQL8.0 インストール プロセス

目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...

MySQL データベース設計 3 つのパラダイム例分析

3つのパラダイム1NF: フィールドは分離不可能です。 2NF: 主キーがあり、非主キー フィールド...

Webpack ファイル パッケージ化エラー例外

webpack をパッケージ化する前に、次の作業が完了していることを確認する必要があります。 1) ...

MySQL インデックスの原理と最適化の詳細な説明

序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...

Vueは小さな天気予報アプリケーションを実装します

これは私が Vue フレームワークを独学していたときに真似したウェブサイトです。いくつかの都市の天気...

Linuxの運用と保守、基本的なプロセス管理、リアルタイム監視と制御

目次1. バックグラウンドで実行されるジョブ2. 信号を使用してプロセスを制御する基本的なプロセス管...

Mac での MySQL と Squel Pro の設定

Node.js の人気に応えて、最近、いくつかのサーバー側機能を実装するために Node.js を使...

Linuxロスレス展開方法

概要クラウド プラットフォームのお客様のサーバーでは、業務量が拡大し続けるとディスク容量が不足する場...

Vue のすべてのカプセル化方法の簡単な概要

目次1. カプセル化API 2. グローバルツールコンポーネントを登録する3. グローバル関数をカプ...