Maison > Article > interface Web > Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript

Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript

WBOYoriginal: 2023-12-17 09:39:02578parcourir

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

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

Établissement d'une connexion WebSocket
Dans le code JavaScript sur le client, nous devons utiliser new WebSocket(url) pour établir une connexion WebSocket au serveur. Où url est 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);
});

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

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

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

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

完整的客户端代码示例

<!DOCTYPE html>
<html>
<head>
  <script>
    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);
      updateTimeslotStatus(message.timeslot, message.status);
    });

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

    function updateTimeslotStatus(timeslot, status) {
      const element = document.getElementById(timeslot);
      element.innerHTML = status;
    }
  </script>
</head>
<body>
  <h1>健身房预约系统</h1>
  
  <h2>可预约时间段：</h2>
  <ul>
    <li id="timeslot1"><button onclick="bookTimeslot('timeslot1')">8:00-9:00</button></li>
    <li id="timeslot2"><button onclick="bookTimeslot('timeslot2')">9:00-10:00</button></li>
    <li id="timeslot3"><button onclick="bookTimeslot('timeslot3')">10:00-11:00</button></li>
  </ul>
</body>
</html>

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

创建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));
});

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.

ws

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!

JavaScript JS http websocket

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Carte thermique de la carte ECharts : comment afficher la densité des données sur la carteArticle suivant：Carte thermique de la carte ECharts : comment afficher la densité des données sur la carte

Articles Liés

Voir plus