Vue+Websocketはチャット機能を実装するだけです

Vue+Websocketはチャット機能を実装するだけです

この記事では、チャット機能を簡単に実装するためのVue+Websocketの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

効果画像:

チャットルーム

この記事は、 Nodejsを使ってサーバーを構築するだけで実現されるWebsocketの簡単な理解と応用です。

まずVueプロジェクトを作成します

次に、サーバーフォルダーを作成し、ターミナルでフォルダーを開き、 vue initと入力し (「Enter」キーを押し続けます)、最後に次に示すようにserver.jsファイルを作成します。

コードは次のとおりです。

server.js /

サーバーファイルターミナルで、 npm install --s wsを実行します。

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でサーバーを起動します

HelloWorld.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) {
        // 192.168.0.115 はローカル IP アドレスです。ここで、ポート番号はバックエンド構成と一致している必要があります。let ws = new WebSocket("ws://192.168.0.115:8181");
        _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;
    幅: 100%;
    高さ: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秒;
    }
    .btn-アクティブ{
      背景: #409eff;
    }
  }
}
</スタイル>

192.168.0.115は私のローカルIPアドレスです(デフォルトはlocalhostです)。これを自分のIPアドレスに変更することができます。

次にnpm run dev を実行すると、LAN 上でチャットできるようになります。ワイヤレスがある場合は、携帯電話を使用してワイヤレスに接続し、IP アドレスにアクセスできます。ワイヤレスでない場合は、さらにいくつかのウィンドウを開いて、効果を確認してください。 !

チャットルームに入ってメッセージを送信すると、サーバーはログを出力します。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • VueはWebSocketを使用してチャット機能をシミュレートします
  • Websocket+Vuexはリアルタイムチャットソフトウェアを実装します
  • Vue + WebSocket + WaveSurferJS を使用した H5 チャットダイアログインタラクションの例の実装
  • node+vue をベースにしたシンプルな WebSocket チャット機能を実装する
  • Vue と Websocket をベースにした複数人用オンライン チャット ルーム
  • Vue+ウェブ端末がWeChatウェブ版チャットルーム機能を模倣
  • Vue.js は WeChat チャットウィンドウを模倣してコンポーネント機能を表示します
  • Vue + socket.io はシンプルなチャットルームのサンプルコードを実装します
  • Vue は Websocket カスタマー サービス チャット機能を実装します

<<:  PhpStormがVirtualBoxに接続できない問題を解決する

>>:  MySQL トランザクション分離レベルの原則例分析

推薦する

ウェブサイトのカラースキーム ウェブサイトに適した色の選択

色はウェブサイト訪問者に影響を与えますか?数年前までは、ウェブサイトはまだ贅沢品でしたが、今ではほと...

JavaScriptがDOMツリーの構築にどのように影響するかについて詳しく説明します。

目次ドキュメント オブジェクト モデル (DOM) DOM と JavaScript DOMツリーの...

MySQLのconcat関連関数の詳細な説明

1. concat() 関数機能: 複数の文字列を 1 つの文字列に連結する構文: concat(s...

Centos8でdockerがインストールできない問題の解決方法

問題 [root@zh ~]# [root@zh ~]# [root@zh ~]# yum -y d...

Linux centos7 環境での MySQL インストール チュートリアル

Linux centos7 環境に MySQL をインストールする手順の詳細な紹介MySQLをインス...

nginx の 2 つのモジュールの proxy_pass の違い

1. 1.ngx_stream_proxy_moduleモジュールのproxy_passディレクティ...

Windows および Linux での Redis のインストールとデーモン設定

# Windows および Linux 上の Redis のインストール デーモン構成Redis の...

iframe なしの div ネスト HTML

最近、宿題をしているときに、iframe を使用せずにページをネストする必要があったため、jquer...

Vue で video.js を使用して m3u8 形式のビデオを再生する方法

目次1. インストール2. videojsの紹介3. コンポーネントでのテストと使用1. 基本的な自...

JavaScript の非同期処理で待機時間を節約できますか?

JavaScriptで非同期実行の結果を同期的に取得するには、 for ループ内でawaitを使用...

Dockerでudpポート番号を指定する問題を解決する

Docker はコンテナを起動するときにアクセス ポートを指定します。複数の -p オプションを使用...

非常に便利な CSS 開発ツール 8 つを紹介

CSS3 パターン ギャラリーこの CSS3 パターン ライブラリには、純粋な CSS3 を使用して...

入力テキストボックスの入力実装プロパティを無効にする

今日は、開発でよく使われる、非常に便利な HTML タグをいくつかまとめてみたいと思います。これらの...

Bootstrap 3.0 学習ノートのボタンとドロップダウン メニュー

前回の記事はBootstrap CSS部分の簡単なレビューであり、多くの詳細が見落とされていました。...

React の調整アルゴリズム Diffing アルゴリズム戦略の詳細な説明

目次アルゴリズム戦略単一ノードの差分配列ノードの差分キー値の使用要件アルゴリズム戦略React の調...