vue+node+socket ioは複数人のインタラクションを実現し、プロセス全体を解放します

vue+node+socket ioは複数人のインタラクションを実現し、プロセス全体を解放します

1. 背景

1. フロントエンドはvue + vuex + socket.io-clientを使用します

npm で socket.io-client をインストールします --save-dev

2. バックエンドはnode + express + socketioを使用する

1. ノード開発環境を構築する

npm 初期化 -y

必要な依存関係をインストールする

npm インストール express --save-dev
npm で socket.io-client をインストールします --save-dev

2. socket.ioの使用法の概要

1. イベントの送信

socket.emit('イベント名', データ => {
	// データは送信されるデータであり、ブール値、文字列、数値、オブジェクトなどになります。})

2. イベントのリスニング

socket.on('送信時のイベント名', data => {
	//イベントによって送信されたデータ})

3. イベントの放送

// 他のユーザーに送信する(自分には送信しない)
socket.broadcast.emit('イベント名', データ => {
	// データは送信されるデータであり、ブール値、文字列、数値、オブジェクトなどになります。})

3. 開発プロセス

1. フロントエンドにsocket.jsファイルを作成し、ソケット関連のイベントを受信します。

// socket.io-client をインポートする
'socket.io-client' から io をインポートします

// リンクを作成する const socket = io()

// リスニング socket.on('connect', () => {
  console.log('サーバーに正常に接続しました!!')
})

> ==============中間部分は、バックエンドから送信されたソケットイベントをリッスンするために使用されます。例: =====================
// 部屋に入る socket.on('enter_room', (data) => {
  // 必要なデータはストレージに保存できます
  localStorage.setItem('counts', JSON.stringify(データ))
  store.commit('setData', JSON.parse(localStorage.getItem('data')))
})

// サービスの接続切断を処理する socket.on('disconnect', () => {
  console.log('切断')
})

2. バックエンド関連コード

const app = require('express')()
const http = require('http').Server(app)
var io = require('socket.io')(http)

onlineUsers = {} とします
ユーザーに = [] させる
onlineCounts = 0 とします

io.on('接続', ソケット => {
	// ユーザーがゲームに参加する socket.on('enter', (data) => 
		// ユーザー情報を追加 const sid = socket.id
		ソケット名 = データ名

		// 新しいユーザーを追加する if(!onlineUsers.hasOwnProperty(data.name)) {
			onlineUsers[データ名] = sid
			オンラインカウント++
		}
		if (!users.length) {
			ユーザー.push({
				名前: onlineUsers[sid]
			})
		}

		// 現在のクライアント数 let clientCount = io.sockets.server.engine.clientsCount

		// ユーザーリストを現在のユーザーに送信します (コードのフロントエンド監視 enter_room 部分に対応)
		io.emit('enter_room', {
			役割: データ.役割、
			ユーザー、
			オンラインカウント
		})
		// 新しいユーザーを他のユーザーに送信する(自分自身には送信しない)
		socket.broadcast.emit('user_enter', データ名)
	})
})

// バックエンドはリスニングポートを開き、フロントエンドはバックエンドサーバーにプロキシするように proxyTable を構成して、フロントエンドとバックエンドのデータを接続できるようにします http.listen(port, () => {
	console.log('バックエンド サーバーが正常に起動しました!!!')
})

4. リリースと発売

1. フロントエンド:

1) http-server をインストールし、サーバーに接続してサーバーに入り、リモート ウェアハウスのフロントエンド コードを取得します (通常はサーバーの www ディレクトリから取得されます)。コードを複製していない場合は、ダウンロードする前にサーバー上で公開キーを設定する必要があります。

公開鍵の設定

ssh-keygen -t rsa -C "あなたのメールアドレス"

公開鍵を生成したら、公開鍵が生成されたファイル ディレクトリに移動し、コード ホスティング プラットフォームにコピーします。その後、公開鍵を追加してコードを複製できます。

2) フロントエンドコードをパッケージ化し、distファイルを生成する

npm 実行ビルド

3) distと入力し、フロントエンドを起動するコマンドを実行します。

pm2 start http-server ---p はポート番号を指定します

4) フロントエンドアクセス、サーバーアドレス + ポート番号

2. バックエンド:

1) フロントエンドと同様に (http サーバーをインストールする必要はありません)、サーバーに入った後、リモート ウェアハウスからフロントエンド コードをプルします (通常はサーバーの www ディレクトリからプルします)。コードを複製していない場合は、ダウンロードする前にサーバー上で公開キーを構成する必要があります。
2) コマンドを実行する

pm2 start index.js (ファイルエントリ、app.js がファイルエントリの場合は app.js を実行) -- -p はポート番号を指定します

注記:

socket.io がオンラインにリリースされると、フロントエンドは socket.io プロキシ アドレス ポートをバックエンド ポートに変更する必要があります。変更しないと 404 が報告されます。変更場所は次のとおりです (ここではバックエンド ポートは 3000 です)

ここに画像の説明を挿入

2. Nginxはsocket.ioのプロキシ転送アドレスを変更する必要があります。そうしないと404も報告されます。

ここに画像の説明を挿入

補足1.pm2 共通コマンド

pm2 リスト // pm2 スタートアップ リストを表示します
pm2 stopはポート番号を指定します // 現在のポートでpm2を停止します
pm2 restartはポート番号を指定します // 指定されたポートのpm2を再起動します
pm2 delete はポート番号を指定します // 現在のウィンドウの pm2 を削除します
pm2 start http-server / index.js -- -p はポート番号を指定します // 対応するフロントエンドとバックエンドを起動します

2. コマンドラインでのnginxの関連命令

cd /nginx 指定されたディレクトリ
cat nginx.conf // nginxファイルの内容を表示する
vim nginx.conf // nginix を編集します。入力後、編集モードに入るには「i」、前の編集を元に戻すには「u」、編集モードを終了するには「esc」、保存して終了するには「shift + :」を使用します。

この時点で、上記の手順に従うことで、ソケット関連の開発を何でも実行できます。ぜひ試してみてください。ご質問があれば、メッセージを残してください。

これで、vue+node+socketio による複数人インタラクションの実現と、そのプロセス全体のオンライン公開に関するこの記事は終了です。vue socketio による複数人インタラクションの実現に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue-socket.io がデータを受信できない問題の解決方法
  • vue-socket.io クロスドメイン問題に対する効果的な解決策
  • Vue.js で Socket.IO を使用する方法のサンプルコード
  • vue-cli でソケット IO を使用するためのサンプル コード
  • socket.io 経由で Node.js と通信する Vue のサンプルコード
  • Vue + socket.io はシンプルなチャットルームのサンプルコードを実装します

<<:  Spring Cloud での Docker デプロイメントに jib を使用する詳細な手順

>>:  MySQLのロック構造の詳細な説明

推薦する

docker公式mysqlイメージのカスタム構成の詳細な説明

インストール時間を節約するために、公式の mysql docker イメージを使用して mysql ...

Linux システムのパフォーマンスを分析するための top コマンドの詳細な説明

Linux topコマンドの紹介top コマンドは、Linux でよく使用されるパフォーマンス分析ツ...

MySQL シーケンス AUTO_INCREMENT の詳細な説明とサンプルコード

MySQL シーケンス AUTO_INCREMENT の詳細な説明とサンプルコードMySQL シーケ...

Docker コンテナのマウントディレクトリ操作の表示

Dockerコンテナのマウントディレクトリ情報のみを表示する docker 検査 --format ...

HTML フォーム コンポーネントのサンプル コード

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。次のコードは、HTM...

WEB中国語フォントアプリケーションガイド

Web 上でフォントを使用することは、基本的なスキルであると同時に芸術でもあります。英語のフォントに...

アイデアを使用して Springboot 初期化サーバーを構築する際の問題分析

問題の説明最近、Springbootプロジェクトを構築していたところ、会社のネットワークケーブルに接...

VMware仮想マシンにLinux(CentOS)をインストールするための詳細な構成手順

CentOS7をダウンロード私がダウンロードしたイメージはCentOS-7-x86_64-DVD-1...

Vueは3段階のナビゲーション表示と非表示を実装します

この記事では、3階層ナビゲーションの表示と非表示を実現するためのVueの具体的なコードを例として紹介...

mysql-8.0.11-winx64.zip の詳細なインストール チュートリアル

zip インストール パッケージをダウンロードします。 MySQL8.0 For Windows z...

vueはel-tableの列幅の適応を完璧に実現します

目次背景技術的ソリューション具体的な実装要約する背景Element UI は、PC で人気の Vue...

動的なテーブル効果を実現するJavaScript

この記事では、動的なテーブル効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

XHTMLコードの一般的なアプリケーション問題をまとめる

<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...

Zabbix 5.0 ディスク自動検出と読み取り/書き込み監視の問題を分析する

ディスクを自動的に検出する構成キーの値注: このキー値は Linux プラットフォームでのみサポート...

要素 el-table テーブルの二次カプセル化 (テーブルの高さの調整付き)

序文会社でのインターンシップ中、フロントエンド開発にはvue+element-uiフレームワークを使...