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

À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques.

1. Qu'est-ce que WebSocket
WebSocket est un protocole de communication full-duplex sur une seule connexion TCP. Il peut établir une connexion persistante entre le navigateur et le serveur pour établir une communication en temps réel. Par rapport aux requêtes HTTP traditionnelles, WebSocket peut envoyer et recevoir des données plus rapidement.

2. Exemple d'analyse des besoins
Nous supposons que nous développons un système de réservation en ligne pour une salle de sport. Les utilisateurs peuvent sélectionner une période appropriée pour prendre rendez-vous via le site Web, et le système communiquera rapidement à l'utilisateur l'état de la période sélectionnée.

Sur la base des exigences ci-dessus, nous pouvons diviser le système en deux rôles : client et serveur. Le client fournit une interface exploitable par l'utilisateur et le serveur est responsable du traitement de la demande de réservation de l'utilisateur et de la transmission du statut de réservation en temps réel au client.

3. Implémentation du client

1. Établissement d'une connexion WebSocket
   Dans le code JavaScript sur le client, nous devons utilisernew WebSocket(url)pour établir une connexion WebSocket au serveur. Oùurlest l'adresse WebSocket du serveur.new WebSocket(url)来建立到服务器的WebSocket连接。其中url为服务端的WebSocket地址。

const socket = new WebSocket("ws://localhost:8080/ws"); socket.addEventListener("open", (event) => { console.log("WebSocket连接已建立。"); }); socket.addEventListener("message", (event) => { const message = JSON.parse(event.data); console.log("收到消息：", message); });

2. 处理用户预约请求
   当用户在网页中选择了适当的时间段并点击预约按钮时，我们需要将用户的预约请求发送给服务器。

function bookTimeslot(timeslot) { const message = { action: "book", timeslot: timeslot }; socket.send(JSON.stringify(message)); }

3. 更新预约状态
   当服务器有新的预约状态时，我们需要更新网页中的状态显示。

function updateTimeslotStatus(timeslot, status) { const element = document.getElementById(timeslot); element.innerHTML = status; }

4. 完整的客户端代码示例

    
  
健身房预约系统
 
可预约时间段：
 
 
8:00-9:00
 
9:00-10:00
 
10:00-11:00
 
  

四、服务器实现
在服务器端，我们需要处理客户端发送的预约请求，并根据系统状态更新预约状态。同时，服务器还需要将新的预约状态发送给客户端。

1. 创建WebSocket服务器
   在Node.js环境下，我们可以使用ws

const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); const timeslots = { timeslot1: "可预约", timeslot2: "可预约", timeslot3: "可预约" }; wss.on('connection', (ws) => { ws.on('message', (message) => { const data = JSON.parse(message); if (data.action === "book") { if (timeslots[data.timeslot] === "可预约") { timeslots[data.timeslot] = "已预约"; ws.send(JSON.stringify({ timeslot: data.timeslot, status: timeslots[data.timeslot] })); } } }); ws.send(JSON.stringify(timeslots)); });

Copier après la connexion

Copier après la connexion

Traitement des demandes de rendez-vous des utilisateurs
2. Lorsque l'utilisateur sélectionne la période appropriée dans la page Web et clique sur le bouton de rendez-vous, nous devons envoyer la demande de rendez-vous de l'utilisateur au serveur.

const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); const timeslots = { timeslot1: "可预约", timeslot2: "可预约", timeslot3: "可预约" }; wss.on('connection', (ws) => { ws.on('message', (message) => { const data = JSON.parse(message); if (data.action === "book") { if (timeslots[data.timeslot] === "可预约") { timeslots[data.timeslot] = "已预约"; ws.send(JSON.stringify({ timeslot: data.timeslot, status: timeslots[data.timeslot] })); } } }); ws.send(JSON.stringify(timeslots)); });

Mettre à jour le statut de réservation
Lorsque le serveur a un nouveau statut de réservation, nous devons mettre à jour l'affichage du statut sur la page Web.

rrreee
Exemple complet de code clientrrreee4. Implémentation du serveurCôté serveur, nous devons traiter la demande de rendez-vous envoyée par le client et mettre à jour le statut du rendez-vous en fonction du système. statut. Dans le même temps, le serveur doit également envoyer le nouveau statut de réservation au client. Créer un serveur WebSocketDans l'environnement Node.js, nous pouvons utiliser le module wspour créer un serveur WebSocket. rrreeeExemple complet de code de serveurrrreee 5. RésuméCet article présente comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples complets de code côté client et côté serveur. En utilisant WebSocket pour établir une communication en temps réel, nous pouvons mettre en œuvre un système de réservation en ligne plus efficace et en temps réel. Il peut également être appliqué dans d’autres scénarios nécessitant une communication en temps réel. J’espère que cet article sera utile au développement de votre projet !

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!