この記事では、チャット機能を簡単に実装するための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に接続できない問題を解決する
色はウェブサイト訪問者に影響を与えますか?数年前までは、ウェブサイトはまだ贅沢品でしたが、今ではほと...
目次ドキュメント オブジェクト モデル (DOM) DOM と JavaScript DOMツリーの...
1. concat() 関数機能: 複数の文字列を 1 つの文字列に連結する構文: concat(s...
問題 [root@zh ~]# [root@zh ~]# [root@zh ~]# yum -y d...
Linux centos7 環境に MySQL をインストールする手順の詳細な紹介MySQLをインス...
1. 1.ngx_stream_proxy_moduleモジュールのproxy_passディレクティ...
# Windows および Linux 上の Redis のインストール デーモン構成Redis の...
最近、宿題をしているときに、iframe を使用せずにページをネストする必要があったため、jquer...
目次1. インストール2. videojsの紹介3. コンポーネントでのテストと使用1. 基本的な自...
JavaScriptで非同期実行の結果を同期的に取得するには、 for ループ内でawaitを使用...
Docker はコンテナを起動するときにアクセス ポートを指定します。複数の -p オプションを使用...
CSS3 パターン ギャラリーこの CSS3 パターン ライブラリには、純粋な CSS3 を使用して...
今日は、開発でよく使われる、非常に便利な HTML タグをいくつかまとめてみたいと思います。これらの...
前回の記事はBootstrap CSS部分の簡単なレビューであり、多くの詳細が見落とされていました。...
目次アルゴリズム戦略単一ノードの差分配列ノードの差分キー値の使用要件アルゴリズム戦略React の調...