Inhaltsverzeichnis
健身房预约系统
可预约时间段:
Heim Web-Frontend js-Tutorial So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript

Dec 17, 2023 am 09:39 AM
javascript websocket 在线预约

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript

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

    Herstellen einer WebSocket-Verbindung
  1. 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);
});
Nach dem Login kopieren
  1. 处理用户预约请求
    当用户在网页中选择了适当的时间段并点击预约按钮时,我们需要将用户的预约请求发送给服务器。
function bookTimeslot(timeslot) {
  const message = {
    action: "book",
    timeslot: timeslot
  };
  socket.send(JSON.stringify(message));
}
Nach dem Login kopieren
  1. 更新预约状态
    当服务器有新的预约状态时,我们需要更新网页中的状态显示。
function updateTimeslotStatus(timeslot, status) {
  const element = document.getElementById(timeslot);
  element.innerHTML = status;
}
Nach dem Login kopieren
  1. 完整的客户端代码示例
<!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 id="健身房预约系统">健身房预约系统</h1>
  
  <h2 id="可预约时间段">可预约时间段:</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>
Nach dem Login kopieren

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

  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));
    });
    Nach dem Login kopieren
    Nach dem Login kopieren
Verarbeitung von Terminanfragen des Benutzers
    Wenn der Benutzer den entsprechenden Zeitraum auf der Webseite auswählt und auf die Schaltfläche „Termin“ klickt, müssen wir die Terminanfrage des Benutzers an den Server senden.
  1. 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));
    });
    Nach dem Login kopieren
    Nach dem Login kopieren
      Reservierungsstatus aktualisieren

      Wenn der Server einen neuen Reservierungsstatus hat, müssen wir die Statusanzeige auf der Webseite aktualisieren.

      rrreee
        🎜Vollständiges Client-Codebeispiel🎜🎜rrreee🎜4. Server-Implementierung🎜Auf der Serverseite müssen wir die vom Client gesendete Terminanfrage verarbeiten und den Terminstatus entsprechend dem System aktualisieren Status. Gleichzeitig muss der Server auch den neuen Reservierungsstatus an den Client senden. 🎜🎜🎜WebSocket-Server erstellen🎜In der Node.js-Umgebung können wir das Modul ws verwenden, um einen WebSocket-Server zu erstellen. 🎜🎜rrreee🎜🎜Vollständiges Servercodebeispiel🎜🎜rrreee🎜 5. Zusammenfassung🎜Dieser Artikel stellt vor, wie man WebSocket und JavaScript verwendet, um ein Online-Reservierungssystem zu implementieren, und bietet vollständige clientseitige und serverseitige Codebeispiele. Durch die Verwendung von WebSocket zur Echtzeitkommunikation können wir ein effizienteres Online-Reservierungssystem in Echtzeit implementieren. Es kann auch in anderen Szenarien angewendet werden, die eine Echtzeitkommunikation erfordern. Ich hoffe, dass dieser Artikel für Ihre Projektentwicklung hilfreich sein wird! 🎜

      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!

    Erklärung dieser Website
    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

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    Video Face Swap

    Video Face Swap

    Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

    Heiße Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    Die Kombination von Java und WebSocket: So erreichen Sie Echtzeit-Videostreaming Die Kombination von Java und WebSocket: So erreichen Sie Echtzeit-Videostreaming Dec 17, 2023 pm 05:50 PM

    Mit der kontinuierlichen Weiterentwicklung der Internettechnologie ist Echtzeit-Videostreaming zu einer wichtigen Anwendung im Internetbereich geworden. Zu den Schlüsseltechnologien für Echtzeit-Videostreaming gehören WebSocket und Java. In diesem Artikel wird die Verwendung von WebSocket und Java zur Implementierung der Echtzeit-Video-Streaming-Wiedergabe vorgestellt und relevante Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist ein Protokoll für die Vollduplex-Kommunikation über eine einzelne TCP-Verbindung. Es wird im Web verwendet

    So erreichen Sie Echtzeitkommunikation mit PHP und WebSocket So erreichen Sie Echtzeitkommunikation mit PHP und WebSocket Dec 17, 2023 pm 10:24 PM

    Mit der kontinuierlichen Weiterentwicklung der Internettechnologie ist Echtzeitkommunikation zu einem unverzichtbaren Bestandteil des täglichen Lebens geworden. Mit der WebSockets-Technologie kann eine effiziente Echtzeitkommunikation mit geringer Latenz erreicht werden, und PHP als eine der am weitesten verbreiteten Entwicklungssprachen im Internetbereich bietet auch entsprechende WebSocket-Unterstützung. In diesem Artikel wird erläutert, wie Sie mithilfe von PHP und WebSocket eine Echtzeitkommunikation erreichen, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist ein Single

    PHP und WebSocket: Best Practices für die Echtzeit-Datenübertragung PHP und WebSocket: Best Practices für die Echtzeit-Datenübertragung Dec 18, 2023 pm 02:10 PM

    PHP und WebSocket: Best-Practice-Methoden für die Echtzeit-Datenübertragung Einführung: Bei der Entwicklung von Webanwendungen ist die Echtzeit-Datenübertragung eine sehr wichtige technische Anforderung. Das herkömmliche HTTP-Protokoll ist ein Anforderungs-Antwort-Modellprotokoll und kann keine Datenübertragung in Echtzeit effektiv erreichen. Um den Anforderungen der Echtzeit-Datenübertragung gerecht zu werden, wurde das WebSocket-Protokoll entwickelt. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das eine Möglichkeit zur Vollduplex-Kommunikation über eine einzelne TCP-Verbindung bietet. Im Vergleich zu H

    WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

    WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

    Wie implementiert Java Websocket die Online-Whiteboard-Funktion? Wie implementiert Java Websocket die Online-Whiteboard-Funktion? Dec 17, 2023 pm 10:58 PM

    Wie implementiert JavaWebsocket die Online-Whiteboard-Funktion? Im modernen Internetzeitalter legen die Menschen immer mehr Wert auf das Erlebnis der Zusammenarbeit und Interaktion in Echtzeit. Online-Whiteboard ist eine auf Websocket implementierte Funktion, die es mehreren Benutzern ermöglicht, in Echtzeit zusammenzuarbeiten, um dasselbe Zeichenbrett zu bearbeiten und Vorgänge wie Zeichnen und Anmerkungen durchzuführen. Es bietet eine praktische Lösung für Online-Schulungen, Remote-Meetings und Teamzusammenarbeit andere Szenarien. 1. Technischer Hintergrund WebSocket ist ein neues Protokoll, das von HTML5 implementiert wird

    So verwenden Sie Java und WebSocket, um den Push von Aktienkursen in Echtzeit zu implementieren So verwenden Sie Java und WebSocket, um den Push von Aktienkursen in Echtzeit zu implementieren Dec 17, 2023 pm 09:15 PM

    So implementieren Sie mithilfe von Java und WebSocket einen Aktienkurs-Push in Echtzeit. Einführung: Mit der rasanten Entwicklung des Internets ist der Echtzeit-Aktienkurs-Push zu einem der Schwerpunkte der Anleger geworden. Die traditionelle Börsen-Push-Methode weist Probleme wie hohe Verzögerungen und langsame Aktualisierungsgeschwindigkeit auf. Für Anleger kann die Unfähigkeit, rechtzeitig die neuesten Börseninformationen zu erhalten, zu Fehlern bei Anlageentscheidungen führen. Echtzeit-Aktienkurs-Push auf Basis von Java und WebSocket kann dieses Problem effektiv lösen, sodass Anleger so schnell wie möglich die neuesten Aktienkursinformationen erhalten.

    SSE und WebSocket SSE und WebSocket Apr 17, 2024 pm 02:18 PM

    In diesem Artikel vergleichen wir Server Sent Events (SSE) und WebSockets, beides zuverlässige Methoden zur Übermittlung von Daten. Wir werden sie in acht Aspekten analysieren, darunter Kommunikationsrichtung, zugrunde liegendes Protokoll, Sicherheit, Benutzerfreundlichkeit, Leistung, Nachrichtenstruktur, Benutzerfreundlichkeit und Testtools. Ein Vergleich dieser Aspekte lässt sich wie folgt zusammenfassen: Kategorie Server Sent Event (SSE) WebSocket-Kommunikationsrichtung Einseitig bidirektional Zugrundeliegendes Protokoll HTTP WebSocket-Protokoll Sicherheit Gleich wie HTTP Vorhandene Sicherheitslücken Benutzerfreundlichkeit Einstellungen Einfache Einstellungen Komplexe Leistung Schnelle Nachrichtenversandgeschwindigkeit Betroffen von der Nachrichtenverarbeitung und dem Verbindungsmanagement. Nachrichtenstruktur Nur Text oder Binär. Benutzerfreundlichkeit. Weit verbreitet. Hilfreich für die WebSocket-Integration

    golang WebSocket-Programmiertipps: Umgang mit gleichzeitigen Verbindungen golang WebSocket-Programmiertipps: Umgang mit gleichzeitigen Verbindungen Dec 18, 2023 am 10:54 AM

    Golang ist eine leistungsstarke Programmiersprache und ihre Verwendung in der WebSocket-Programmierung wird von Entwicklern zunehmend geschätzt. WebSocket ist ein TCP-basiertes Protokoll, das eine bidirektionale Kommunikation zwischen Client und Server ermöglicht. In diesem Artikel stellen wir vor, wie Sie mit Golang einen effizienten WebSocket-Server schreiben, der mehrere gleichzeitige Verbindungen gleichzeitig verarbeitet. Bevor wir die Techniken vorstellen, lernen wir zunächst, was WebSocket ist. Einführung in WebSocketWeb

    See all articles