1. 背景1. フロントエンドはvue + vuex + socket.io-clientを使用します
2. バックエンドはnode + express + socketioを使用する 1. ノード開発環境を構築する
必要な依存関係をインストールする
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 ディレクトリから取得されます)。コードを複製していない場合は、ダウンロードする前にサーバー上で公開キーを設定する必要があります。 公開鍵の設定
公開鍵を生成したら、公開鍵が生成されたファイル ディレクトリに移動し、コード ホスティング プラットフォームにコピーします。その後、公開鍵を追加してコードを複製できます。 2) フロントエンドコードをパッケージ化し、distファイルを生成する
3) distと入力し、フロントエンドを起動するコマンドを実行します。
4) フロントエンドアクセス、サーバーアドレス + ポート番号 2. バックエンド: 1) フロントエンドと同様に (http サーバーをインストールする必要はありません)、サーバーに入った後、リモート ウェアハウスからフロントエンド コードをプルします (通常はサーバーの www ディレクトリからプルします)。コードを複製していない場合は、ダウンロードする前にサーバー上で公開キーを構成する必要があります。
socket.io がオンラインにリリースされると、フロントエンドは socket.io プロキシ アドレス ポートをバックエンド ポートに変更する必要があります。変更しないと 404 が報告されます。変更場所は次のとおりです (ここではバックエンド ポートは 3000 です) 2. Nginxはsocket.ioのプロキシ転送アドレスを変更する必要があります。そうしないと404も報告されます。 補足1.pm2 共通コマンド
2. コマンドラインでのnginxの関連命令
この時点で、上記の手順に従うことで、ソケット関連の開発を何でも実行できます。ぜひ試してみてください。ご質問があれば、メッセージを残してください。 これで、vue+node+socketio による複数人インタラクションの実現と、そのプロセス全体のオンライン公開に関するこの記事は終了です。vue socketio による複数人インタラクションの実現に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Spring Cloud での Docker デプロイメントに jib を使用する詳細な手順
インストール時間を節約するために、公式の mysql docker イメージを使用して mysql ...
Linux topコマンドの紹介top コマンドは、Linux でよく使用されるパフォーマンス分析ツ...
MySQL シーケンス AUTO_INCREMENT の詳細な説明とサンプルコードMySQL シーケ...
Dockerコンテナのマウントディレクトリ情報のみを表示する docker 検査 --format ...
HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。次のコードは、HTM...
Web 上でフォントを使用することは、基本的なスキルであると同時に芸術でもあります。英語のフォントに...
問題の説明最近、Springbootプロジェクトを構築していたところ、会社のネットワークケーブルに接...
CentOS7をダウンロード私がダウンロードしたイメージはCentOS-7-x86_64-DVD-1...
この記事では、3階層ナビゲーションの表示と非表示を実現するためのVueの具体的なコードを例として紹介...
zip インストール パッケージをダウンロードします。 MySQL8.0 For Windows z...
目次背景技術的ソリューション具体的な実装要約する背景Element UI は、PC で人気の Vue...
この記事では、動的なテーブル効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...
ディスクを自動的に検出する構成キーの値注: このキー値は Linux プラットフォームでのみサポート...
序文会社でのインターンシップ中、フロントエンド開発にはvue+element-uiフレームワークを使...