Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel

Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel

Introduction :
Avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à fournir des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne un plat et passe une commande, le serveur peut transmettre les informations de commande à la cuisine en temps réel, et une fois que la cuisine a préparé la nourriture, il peut également informer l'utilisateur dans en temps réel que la nourriture est prête. Ce qui suit présentera en détail comment utiliser JavaScript et WebSocket pour implémenter un système de commande en ligne en temps réel et donnera des exemples de code spécifiques.

1. Préparation
Tout d'abord, nous devons préparer les parties suivantes :

1. Page d'accueil : les utilisateurs peuvent sélectionner des plats et soumettre des commandes sur cette page.
2. Serveur : reçoit les informations de commande de l'utilisateur et les transmet au chef et aux utilisateurs en temps réel.
3. Page Cuisine : Recevez et affichez les informations de commande de l'utilisateur, et informez l'utilisateur que le repas est prêt en temps réel.

2. Page frontale

1. Présentation de la bibliothèque JavaScript WebSocket
   Dans la page frontale, nous devons d'abord présenter la bibliothèque JavaScript WebSocket. Ajoutez le code suivant dans la balise du HTML :

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

2. Établissement d'une connexion WebSocket
   Dans la page front-end, nous devons établir une connexion WebSocket avec le serveur. En JavaScript, vous pouvez utiliser le code suivant :

const socket = io('http://localhost:3000'); // 替换成实际的服务端地址

3. Écoutez les messages poussés par le serveur
   Lorsque de nouveaux messages sont poussés depuis le serveur, la page frontale doit être traitée en conséquence. En JavaScript, vous pouvez utiliser le code suivant :

socket.on('newOrder', order => {
  // 处理新的订单信息
});

4. Soumettre la commande
   Lorsque l'utilisateur sélectionne le plat et clique sur le bouton Soumettre la commande, la page frontale doit envoyer les informations de commande au serveur. En JavaScript, vous pouvez utiliser le code suivant :

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

3. Côté serveur

1. Installer la bibliothèque WebSocket
   Dans l'environnement Node.js, nous pouvons utiliser la bibliothèque socket.io pour implémenter la connexion WebSocket. Exécutez la commande suivante sur la ligne de commande pour installer les dépendances :

npm install socket.io

2. Établir une connexion WebSocket
   Dans le code du serveur, nous devons créer un serveur WebSocket et écouter les demandes de connexion des clients. Dans Node.js, vous pouvez utiliser le code suivant :

const io = require('socket.io')(http); // http为Node.js的HTTP服务器
io.on('connection', socket => {
  // 处理客户端的连接请求
});

3. Recevoir les informations de commande soumises par le client
   Lorsque le client soumet les informations de commande, le serveur doit les recevoir et les traiter. Dans le code côté serveur, vous pouvez utiliser le code suivant :

socket.on('submitOrder', order => {
  // 处理订单信息
  // 推送订单信息给后厨和用户
  io.emit('newOrder', order);
});

4. Autres traitements logiques
   Selon les besoins réels, le serveur peut également effectuer d'autres traitements logiques, comme le suivi de l'état des commandes, la gestion des stocks, etc.

4. Page Back Kitchen

1. Page Front-End
   La partie frontale de la page Back Kitchen est similaire à la page frontale de l'utilisateur. Elle doit établir une connexion WebSocket et surveiller les messages transmis par le. serveur. Pour un code spécifique, veuillez vous référer à l'exemple de code sur la page frontale de l'utilisateur.
2. Afficher les informations de commande
   Lorsqu'une nouvelle commande est envoyée depuis le serveur, les informations de commande doivent être affichées sur la page de la cuisine. Le code spécifique peut être écrit en fonction de la situation réelle.
3. Avertissez l'utilisateur que la nourriture est prête
   Lorsque la cuisine prépare la nourriture, elle peut envoyer un message de notification à l'utilisateur via WebSocket pour l'informer que la nourriture est prête. Pour un code spécifique, veuillez vous référer à l'exemple de code sur la page frontale de l'utilisateur.

Résumé :
Grâce aux étapes ci-dessus, nous pouvons utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel. Les utilisateurs peuvent sélectionner des plats et soumettre des commandes sur la page frontale. Le serveur reçoit la commande et la transmet à la cuisine et aux utilisateurs en temps réel. La page de la cuisine affiche la commande et informe l'utilisateur en temps réel que la nourriture est prête. L'utilisation de WebSocket permet d'établir une communication bidirectionnelle en temps réel, améliorant ainsi l'expérience utilisateur et l'efficacité du service de restauration.

Exemple de code :
En raison du manque d'espace, un exemple de code complet ne peut pas être donné ici. Cependant, les lecteurs peuvent se référer aux documents liés à WebSocket et Node.js, ainsi qu'à l'exemple de code du système de commande en ligne open source, pour implémenter et améliorer leur propre système de commande en ligne en temps réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!