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 をよろしくお願いいたします。