집 > 기사 > 웹 프론트엔드 > WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법

WBOY원래의: 2023-12-17 09:39:02640검색

오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. WebSocket이란
WebSocket은 단일 TCP 연결에서 전이중 통신을 위한 프로토콜입니다. 실시간 통신을 달성하기 위해 브라우저와 서버 사이에 지속적인 연결을 설정할 수 있습니다. 기존 HTTP 요청에 비해 WebSocket은 더 빠르게 데이터를 보내고 받을 수 있습니다.

2. 샘플 요구사항 분석
체육관의 온라인 예약 시스템을 개발하고 있다고 가정합니다. 사용자는 웹사이트를 통해 적절한 시간대를 선택해 예약을 할 수 있으며, 시스템은 선택한 시간대의 상태를 사용자에게 즉시 피드백합니다.

위의 요구 사항을 기반으로 시스템을 클라이언트와 서버의 두 가지 역할로 나눌 수 있습니다. 클라이언트는 사용자가 조작할 수 있는 인터페이스를 제공하고, 서버는 사용자의 예약 요청을 처리하고 실시간 예약 상태를 클라이언트에 푸시하는 역할을 담당합니다.

3. 클라이언트 구현

WebSocket 연결 설정
클라이언트의 JavaScript 코드에서 new WebSocket(url)을 사용하여 서버에 대한 WebSocket 연결을 설정해야 합니다. 여기서 url은 서버의 WebSocket 주소입니다. 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));
});

사용자가 웹페이지에서 적절한 기간을 선택하고 약속 버튼을 클릭하면 사용자의 약속 요청을 서버로 보내야 합니다.

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

예약 상태 업데이트
서버에 새로운 예약 상태가 생기면 웹페이지의 상태 표시를 업데이트해야 합니다.

ws

위 내용은 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript JS http websocket

성명：

이전 기사：ECharts 지도 히트맵: 지도에 데이터 밀도를 표시하는 방법다음 기사：ECharts 지도 히트맵: 지도에 데이터 밀도를 표시하는 방법