So implementieren Sie mit JavaScript und WebSocket ein Online-Bestellsystem in Echtzeit

Einführung:
Mit der Popularit?t des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, k?nnen wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Wenn der Benutzer im Echtzeit-Online-Bestellsystem ein Gericht ausw?hlt und eine Bestellung aufgibt, kann der Server die Bestellinformationen in Echtzeit an die Küche weiterleiten und den Benutzer auch benachrichtigen, nachdem die Küche das Essen zubereitet hat Echtzeit, dass das Essen fertig ist. Im Folgenden wird detailliert beschrieben, wie mit JavaScript und WebSocket ein Echtzeit-Online-Bestellsystem implementiert wird, und es werden spezifische Codebeispiele angegeben.

1. Vorbereitung
Zuerst müssen wir die folgenden Teile vorbereiten:

1. Vorderseite: Auf dieser Seite k?nnen Benutzer Gerichte ausw?hlen und Bestellungen aufgeben.
2. Server: Empf?ngt die Bestellinformationen des Benutzers und leitet sie in Echtzeit an den Koch und die Benutzer weiter.
3. Küchenseite: Empfangen und zeigen Sie die Bestellinformationen des Benutzers an und benachrichtigen Sie den Benutzer in Echtzeit, dass das Essen fertig ist.

2. Front-End-Seite

1. Einführung in die WebSocket-JavaScript-Bibliothek
   Auf der Front-End-Seite müssen wir zun?chst die WebSocket-JavaScript-Bibliothek vorstellen. Fügen Sie den folgenden Code im -Tag von HTML hinzu:

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>

2. Herstellen einer WebSocket-Verbindung
   Auf der Front-End-Seite müssen wir eine WebSocket-Verbindung mit dem Server herstellen. In JavaScript k?nnen Sie den folgenden Code verwenden:

const socket = io('http://localhost:3000'); // 替換成實際的服務端地址

3. Vom Server gepushte Nachrichten abh?ren
   Wenn neue Nachrichten vom Server gepusht werden, muss die Front-End-Seite entsprechend verarbeitet werden. In JavaScript k?nnen Sie den folgenden Code verwenden:

socket.on('newOrder', order => {
  // 處理新的訂單信息
});

4. Bestellung senden
   Wenn der Benutzer das Gericht ausw?hlt und auf die Schaltfl?che ?Bestellung senden“ klickt, muss die Front-End-Seite die Bestellinformationen an den Server senden. In JavaScript k?nnen Sie den folgenden Code verwenden:

const order = {
  // 訂單信息
};
socket.emit('submitOrder', order);

3. Serverseitig

1. Installieren Sie die WebSocket-Bibliothek
   In der Node.js-Umgebung k?nnen wir die socket.io-Bibliothek verwenden, um die WebSocket-Verbindung zu implementieren. Führen Sie den folgenden Befehl in der Befehlszeile aus, um Abh?ngigkeiten zu installieren:

npm install socket.io

2. Eine WebSocket-Verbindung herstellen
   Im Servercode müssen wir einen WebSocket-Server erstellen und auf Client-Verbindungsanfragen warten. In Node.js k?nnen Sie den folgenden Code verwenden:

const io = require('socket.io')(http); // http為Node.js的HTTP服務器
io.on('connection', socket => {
  // 處理客戶端的連接請求
});

3. Vom Client übermittelte Bestellinformationen empfangen
   Wenn der Client die Bestellinformationen übermittelt, muss der Server diese empfangen und verarbeiten. Im serverseitigen Code k?nnen Sie den folgenden Code verwenden:

socket.on('submitOrder', order => {
  // 處理訂單信息
  // 推送訂單信息給后廚和用戶
  io.emit('newOrder', order);
});

4. Andere logische Verarbeitung
   Je nach tats?chlichem Bedarf kann der Server auch andere logische Verarbeitungen durchführen, z. B. Auftragsstatusverfolgung, Bestandsverwaltung usw.

4. Back Kitchen-Seite

1. Front-End-Seite
   Der Front-End-Teil der Back Kitchen-Seite ?hnelt der Front-End-Seite des Benutzers. Er muss eine WebSocket-Verbindung herstellen und die von ihm übertragenen Nachrichten überwachen Server. Spezifischen Code finden Sie im Codebeispiel auf der Benutzer-Frontend-Seite.
2. Bestellinformationen anzeigen
   Wenn eine neue Bestellung vom Server übertragen wird, müssen die Bestellinformationen auf der Küchenseite angezeigt werden. Der spezifische Code kann entsprechend der tats?chlichen Situation geschrieben werden.
3. Benachrichtigen Sie den Benutzer, dass das Essen fertig ist.
   Wenn die Küche das Essen zubereitet, kann sie über WebSocket eine Benachrichtigung an den Benutzer senden, um den Benutzer darüber zu informieren, dass das Essen fertig ist. Spezifischen Code finden Sie im Codebeispiel auf der Benutzer-Frontend-Seite.

Zusammenfassung:
Durch die oben genannten Schritte k?nnen wir JavaScript und WebSocket verwenden, um ein Echtzeit-Online-Bestellsystem zu implementieren. Benutzer k?nnen Gerichte ausw?hlen und Bestellungen auf der Front-End-Seite aufgeben. Der Server empf?ngt die Bestellung und leitet sie in Echtzeit an die Küche und die Benutzer weiter. Die Küchenseite zeigt die Bestellung an und benachrichtigt den Benutzer in Echtzeit, dass das Essen fertig ist. Durch die Verwendung von WebSocket kann eine bidirektionale Echtzeitkommunikation erreicht werden, wodurch das Benutzererlebnis und die Effizienz des Restaurantservices verbessert werden.

Codebeispiel:
Aus Platzgründen kann hier kein vollst?ndiges Codebeispiel angegeben werden. Leser k?nnen jedoch auf WebSocket- und Node.js-bezogene Dokumente sowie den Beispielcode für das Open-Source-Online-Bestellsystem zurückgreifen, um ihr eigenes Echtzeit-Online-Bestellsystem zu implementieren und zu verbessern.

Das obige ist der detaillierte Inhalt vonVerwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!