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 を使用する詳細な手順
目次目的実験環境実験原理実験手順1. 独立したCAを生成する2. サーバーの秘密鍵と署名要求ファイル...
usemap は <img> タグの属性であり、使用するイメージ マップの名前を指定する...
1. ラジオのグループ化名前が同じであれば、それらはグループであり、つまり、次のようにグループ内で選...
ブラウザ モジュールの主な機能は、http リクエスト ヘッダーの「User-Agent」の値とブラ...
以前、MySQL データベースのデュアルマシン ホット スタンバイの設定方法を紹介しました。ご興味の...
SQL とは何ですか? SQL はデータベースを操作するために使用される言語です。 SQL はすべ...
目次Reactの公式サイトではライフサイクルの説明を見ることができます次に、ネストされたコンポーネン...
なぜこのような記事を書いたかというと、数日前の夜、仕事が終わろうとしていたときに、業務側で突然、テー...
今では多くの人がウェブサイト作成に参加していますが、ウェブサイトはどのように作成すればよいのでしょう...
Vue 言語と要素コンポーネントを使用して、コード コンテンツの入力を必要とし、ハイライト表示が可能...
1. Linuxに対応するRPMパッケージをダウンロードする5.6 より前のバージョンhttp://...
最近、goaccess を使って nginx ログを分析したいのですが、nginx ログの設定形式が...
この記事では、参考までにVue More Filter Itemウィジェットの実装方法を例として紹介...
最近、メンバーがテストできるようにプロジェクトをパッケージ化する必要がありますが、パッケージ化された...
必要フィールドをクエリする場合、フィールドに同じ値を指定する必要があります。この値はハードコードする...