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 トランザクション分離レベルの原則例分析

推薦する

MySQL 5.7 解凍版のインストールとアンインストール、およびよくある問題の概要

1. インストール1. ダウンロードMySQLをダウンロードするには、MySQL公式サイトhttp:...

読めばわかるVueの8つのヒント

1. v-forでは常に:keyを使用するデータを操作する必要があるときにプログラムを一定かつ予測可...

Vue3 ドキュメント クイックスタート

目次1. セットアップ1. セットアップ関数の最初のパラメータ - props 2. 文脈2. セッ...

リモート接続を許可するようにMySQLを変更する方法

MySQLリモート接続の問題に関しては、会社で働いているときに誰かのコンピュータに保存されているMy...

ubuntu14.04 に jdk1.8 をインストールするチュートリアル

1. jdkダウンロードアドレスをダウンロードする我下載的是jdk-8u221-linux-x64....

Linux運用保守ツールSupervisor(プロセス管理ツール)のインストールと使用

1. はじめにSupervisor は Python で開発された汎用プロセス管理プログラムです。通...

Webデザインチュートリアル(7):Webデザインの効率化

<br />前の記事:Webデザインチュートリアル(6):デザインへの情熱を持ち続けまし...

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

1. まず、Springbootを使用して簡単なDubboテストプログラムを構築し、関連する依存関係...

MySQLデータベーステーブルの定期バックアップの実装の詳細な説明

Mysqlデータベーステーブルの定期的なバックアップの実装0. 背景実際の開発環境では、フロントエン...

JSはビデオの再生速度を制御するための簡単なサンプルコードを実装します

導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに...

CSS3のボックスサイズプロパティの興味深いボックスモデルについての簡単な説明

誰もがボックス モデルの構成を、内側から外側まで、コンテンツ、パディング、境界線、マージンについて知...

Flex レイアウトで適応型ページを作成する (構文と例)

Flex レイアウトの紹介英語の Flex はフレキシブル ボックス、つまり伸縮性のあるボックスを...

Windows 10 での MySQL 5.7.21 winx64 のインストールと設定方法のグラフィック チュートリアル

mysql 5.7.21 winx64 のインストールと設定方法: MySQLのコミュニティバージョ...

15行のCSSコードがAppleデバイスをクラッシュさせる可能性があり、最新のiOS 12も例外ではない

たった15行のCSSでiPhoneがクラッシュするWire のセキュリティ研究者 Sabri Had...

SQL IDENTITY_INSERT ケーススタディ

一般的に、データ テーブル内の列を ID 列として設定すると、ID 列の表示値を手動で ID 列に挿...