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のロック構造の詳細な説明

推薦する

暗号化における https の Apache 展開の概要

目次目的実験環境実験原理実験手順1. 独立したCAを生成する2. サーバーの秘密鍵と署名要求ファイル...

IMG での UserMap の使用例

usemap は <img> タグの属性であり、使用するイメージ マップの名前を指定する...

HTMLでのラジオ値の取得、割り当て、登録の詳細な説明

1. ラジオのグループ化名前が同じであれば、それらはグループであり、つまり、次のようにグループ内で選...

Nginx Httpモジュールシリーズにおけるautoindexモジュールの具体的な使用法

ブラウザ モジュールの主な機能は、http リクエスト ヘッダーの「User-Agent」の値とブラ...

MySQL データベースのホットスタンバイにおける問題点の分析

以前、MySQL データベースのデュアルマシン ホット スタンバイの設定方法を紹介しました。ご興味の...

sqlとmysqlの違いは何ですか?

SQL とは何ですか? SQL はデータベースを操作するために使用される言語です。 SQL はすべ...

React のネストされたコンポーネントの構築順序

目次Reactの公式サイトではライフサイクルの説明を見ることができます次に、ネストされたコンポーネン...

時点に基づくMySQLクイックリカバリソリューション

なぜこのような記事を書いたかというと、数日前の夜、仕事が終わろうとしていたときに、業務側で突然、テー...

ウェブサイトデザインの基礎知識:初心者の方はぜひお読みください

今では多くの人がウェブサイト作成に参加していますが、ウェブサイトはどのように作成すればよいのでしょう...

Vueはコードのハイライトを実現するためにモナコを使用しています

Vue 言語と要素コンポーネントを使用して、コード コンテンツの入力を必要とし、ハイライト表示が可能...

CentOS 6.5 に MySQL 5.6 をインストールするチュートリアル

1. Linuxに対応するRPMパッケージをダウンロードする5.6 より前のバージョンhttp://...

goaccess を使用して nginx ログを分析する詳細な方法

最近、goaccess を使って nginx ログを分析したいのですが、nginx ログの設定形式が...

Vue のフィルターウィジェットの詳細な使用方法

この記事では、参考までにVue More Filter Itemウィジェットの実装方法を例として紹介...

Spring環境を構成するためのDocker-composeの手順

最近、メンバーがテストできるようにプロジェクトをパッケージ化する必要がありますが、パッケージ化された...

MySQLクエリ時にフィールドにデフォルト値を割り当てる方法

必要フィールドをクエリする場合、フィールドに同じ値を指定する必要があります。この値はハードコードする...