Heim > Artikel > Web-Frontend > So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript

WBOYOriginal: 2023-12-17 09:39:02636Durchsuche

So implementieren Sie mit WebSocket und JavaScript ein Online-Reservierungssystem

Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt.

1. Was ist WebSocket? WebSocket ist ein Protokoll für die Vollduplex-Kommunikation über eine einzelne TCP-Verbindung. Es kann eine dauerhafte Verbindung zwischen dem Browser und dem Server herstellen, um eine Echtzeitkommunikation zu erreichen. Im Vergleich zu herkömmlichen HTTP-Anfragen kann WebSocket Daten schneller senden und empfangen.

2. Musterbedarfsanalyse

Wir gehen davon aus, dass wir ein Online-Reservierungssystem für ein Fitnessstudio entwickeln. Benutzer können über die Website einen geeigneten Zeitraum für die Terminvereinbarung auswählen und das System gibt dem Benutzer umgehend eine Rückmeldung über den Status des ausgewählten Zeitraums.

Basierend auf den oben genannten Anforderungen können wir das System in zwei Rollen unterteilen: Client und Server. Der Client stellt eine vom Benutzer bedienbare Schnittstelle bereit, und der Server ist dafür verantwortlich, die Reservierungsanfrage des Benutzers zu verarbeiten und den Reservierungsstatus in Echtzeit an den Client weiterzuleiten.

3. Client-Implementierung

Im JavaScript-Code auf dem Client müssen wir new WebSocket(url) verwenden, um eine WebSocket-Verbindung zum Server herzustellen. Dabei ist url die WebSocket-Adresse des Servers.
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));
});

Verarbeitung von Terminanfragen des Benutzers

```
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));
});
```
Reservierungsstatus aktualisieren
Wenn der Server einen neuen Reservierungsstatus hat, müssen wir die Statusanzeige auf der Webseite aktualisieren.
rrreee

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript JS http websocket

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：ECharts-Karten-Heatmap: So zeigen Sie die Datendichte auf der Karte anNächster Artikel：ECharts-Karten-Heatmap: So zeigen Sie die Datendichte auf der Karte an

In Verbindung stehende Artikel

Mehr sehen