この記事では、チャット機能を簡単に実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: PhpStormがVirtualBoxに接続できない問題を解決する
1. インストール1. ダウンロードMySQLをダウンロードするには、MySQL公式サイトhttp:...
1. v-forでは常に:keyを使用するデータを操作する必要があるときにプログラムを一定かつ予測可...
目次1. セットアップ1. セットアップ関数の最初のパラメータ - props 2. 文脈2. セッ...
MySQLリモート接続の問題に関しては、会社で働いているときに誰かのコンピュータに保存されているMy...
1. jdkダウンロードアドレスをダウンロードする我下載的是jdk-8u221-linux-x64....
1. はじめにSupervisor は Python で開発された汎用プロセス管理プログラムです。通...
<br />前の記事:Webデザインチュートリアル(6):デザインへの情熱を持ち続けまし...
1. まず、Springbootを使用して簡単なDubboテストプログラムを構築し、関連する依存関係...
Mysqlデータベーステーブルの定期的なバックアップの実装0. 背景実際の開発環境では、フロントエン...
導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに...
誰もがボックス モデルの構成を、内側から外側まで、コンテンツ、パディング、境界線、マージンについて知...
Flex レイアウトの紹介英語の Flex はフレキシブル ボックス、つまり伸縮性のあるボックスを...
mysql 5.7.21 winx64 のインストールと設定方法: MySQLのコミュニティバージョ...
たった15行のCSSでiPhoneがクラッシュするWire のセキュリティ研究者 Sabri Had...
一般的に、データ テーブル内の列を ID 列として設定すると、ID 列の表示値を手動で ID 列に挿...