vue + node + socket io realisiert die Interaktion mehrerer Personen und gibt den gesamten Prozess frei

1. Hintergrund

1. Das Frontend verwendet vue + vuex + socket.io-client

npm installiere socket.io-client --save-dev

2. Das Backend verwendet Node + Express + Socketio

1. Erstellen Sie eine Knotenentwicklungsumgebung

npm init -y

Installieren Sie die erforderlichen Abhängigkeiten

npm install express --save-dev
npm installiere socket.io-client --save-dev

2. Übersicht über die Verwendung von socket.io

1. Ereignisse senden

socket.emit('Ereignisname', Daten => {
	// Daten sind die zu übertragenden Daten, die Boolesch, Zeichenfolge, Zahl, Objekt usw. sein können})

2. Auf Ereignisse achten

socket.on('Ereignisname beim Senden', data => {
	//vom Ereignis gesendete Daten})

3. Übertragung von Veranstaltungen

// An andere Benutzer senden (nicht an dich selbst)
socket.broadcast.emit('Ereignisname', Daten => {
	// Daten sind die zu übertragenden Daten, die Boolesch, Zeichenfolge, Zahl, Objekt usw. sein können})

3. Entwicklungsprozess

1. Erstellen Sie auf dem Frontend eine socket.js-Datei, um Socket-bezogene Ereignisse wie folgt zu empfangen

// Socket.io-Client importieren
importiere io von „socket.io-client“

// Einen Link erstellen const socket = io()

// Abhören socket.on('connect', () => {
  console.log('Erfolgreich mit dem Server verbunden!!')
})

> =============Der mittlere Teil wird verwendet, um die vom Backend gesendeten Socket-Ereignisse abzuhören, zum Beispiel: ======================
// Betrete den Raum socket.on('enter_room', (data) => {
  // Erforderliche Daten können im Speicher abgelegt werden
  localStorage.setItem('Anzahl', JSON.stringify(Daten))
  store.commit('setData', JSON.parse(localStorage.getItem('data')))
})

// Dienstverbindung verloren gehen behandeln socket.on('disconnect', () => {
  console.log('Trennen')
})

2. Backend-bezogener Code

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

let onlineUsers = {}
lass Benutzer = []
let onlineCounts = 0

io.on('Verbindung', Socket => {
	// Der Benutzer betritt das Spiel socket.on('enter', (data) => 
		// Benutzerinformationen hinzufügen const sid = socket.id
		socket.name = daten.name

		// Neuen Benutzer hinzufügen if(!onlineUsers.hasOwnProperty(data.name)) {
			onlineUsers[data.name] = sid
			onlineCounts++
		}
		wenn (!users.length) {
			Benutzer.push({
				Name: onlineUsers[sid]
			})
		}

		// Aktuelle Anzahl der Clients let clientsCount = io.sockets.server.engine.clientsCount

		//Senden Sie die Benutzerliste an den aktuellen Benutzer (entspricht dem Enter_Room-Teil des Codes, der die Front-End-Überwachung übernimmt)
		io.emit('Raum betreten', {
			Rolle: Datenrolle,
			Benutzer,
			onlineCounts
		})
		// Neue Benutzer an andere Benutzer senden (nicht an sich selbst)
		socket.broadcast.emit('Benutzereingabe', Datenname)
	})
})

// Das Backend öffnet den Abhörport und das Frontend konfiguriert die Proxytabelle als Proxy für den Backend-Server, damit eine Verbindung zwischen Frontend- und Backend-Daten hergestellt werden kann. http.listen(port, () => {
	console.log('Backend-Server erfolgreich gestartet!!!')
})

4. Veröffentlichung und Einführung

1. Frontend:

1) Installieren Sie den http-Server, stellen Sie dann eine Verbindung zum Server her, rufen Sie den Server auf und ziehen Sie den Front-End-Code des Remote-Warehouses (normalerweise aus dem WWW-Verzeichnis des Servers gezogen). Wenn Sie den Code nicht geklont haben, müssen Sie vor dem Herunterladen den öffentlichen Schlüssel auf dem Server konfigurieren.

Öffentliche Schlüsselkonfiguration

ssh-keygen -t rsa -C "Ihre E-Mail"

Geben Sie nach dem Generieren des öffentlichen Schlüssels das Dateiverzeichnis ein, in dem der öffentliche Schlüssel generiert wurde, kopieren Sie ihn auf die Code-Hosting-Plattform und klonen Sie den Code, nachdem Sie den öffentlichen Schlüssel hinzugefügt haben.

2) Packen Sie den Front-End-Code und generieren Sie die Dist-Datei

npm-Ausführung erstellen

3) Geben Sie dist ein und führen Sie den Befehl aus, um das Frontend zu starten

pm2 start http-server ---p gibt die Portnummer an

4) Front-End-Zugriff, Serveradresse + Portnummer

2. Backend:

1) Genau wie beim Front-End (es muss kein HTTP-Server installiert werden), rufen Sie nach dem Aufrufen des Servers den Front-End-Code aus dem Remote-Warehouse ab (normalerweise aus dem WWW-Verzeichnis des Servers). Wenn Sie den Code nicht geklont haben, müssen Sie vor dem Herunterladen den öffentlichen Schlüssel auf dem Server konfigurieren.
2) Befehle ausführen

pm2 start index.js (Dateieintrag, wenn Ihre app.js der Dateieintrag ist, führen Sie app.js aus) --p gibt die Portnummer an

Notiz:

Wenn socket.io online veröffentlicht wird, muss das Frontend den Socket.io-Proxy-Adressport auf den Backend-Port ändern, andernfalls wird 404 gemeldet. Der Änderungsort ist wie folgt (hier ist mein Backend-Port 3000).

2. Nginx muss die Proxy-Weiterleitungsadresse von socket.io ändern, sonst wird auch 404 gemeldet

Ergänzung 1.pm2 Allgemeine Befehle

pm2-Liste // Sehen Sie sich die pm2-Startliste an
pm2 stop gibt die Portnummer an // Stoppt pm2 unter dem aktuellen Port
pm2 restart gibt die Portnummer an // startet pm2 des angegebenen Ports neu
pm2 delete gibt die Portnummer an // lösche pm2 im aktuellen Fenster
pm2 start http-server / index.js --p gibt die Portnummer an // Startet das entsprechende Frontend und Backend

2. Verwandte Anweisungen von nginx in der Befehlszeile

cd /nginx angegebenes Verzeichnis
cat nginx.conf // Den Inhalt der nginx-Datei anzeigen
vim nginx.conf // Nginix bearbeiten. Beachten Sie, dass Sie nach der Eingabe mit „i“ in den Bearbeitungsmodus wechseln, mit „u“ die vorherige Bearbeitung rückgängig machen, mit „esc“ den Bearbeitungsmodus verlassen und mit „shift + :“ speichern und beenden können.

An diesem Punkt können Sie mit den oben genannten Schritten jede Art von Socket-bezogener Entwicklung durchführen. Probieren Sie es aus. Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht.

Dies ist das Ende dieses Artikels über vue+node+socketio, um Mehrpersoneninteraktion zu erreichen und den gesamten Prozess online freizugeben. Weitere relevante Inhalte zu vue socketio, um Mehrpersoneninteraktion zu erreichen, finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder weiter in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!