如何使用WebSocket和JavaScript實現線上預約系統

在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。

一、什麼是WebSocket
WebSocket是一種在單一TCP連線上進行全雙工通訊的協定。它可以在瀏覽器和伺服器之間建立一個持久性的連接，以實現即時通訊。相較於傳統的HTTP請求，WebSocket能夠更快速地實現資料的發送和接收。

二、範例需求分析
我們假設我們正在開發一個健身房的線上預約系統。使用者可以透過網站選擇合適的時間段進行預約，系統會及時回饋給使用者所選時段的狀態。

基於上述需求，我們可以將系統分成兩個角色：客戶端和伺服器。客戶端提供使用者可操作的介面，而伺服器負責處理使用者的預約請求，同時將即時的預約狀態推送給客戶端。

三、客戶端實作

1. 建立WebSocket連線
   在客戶端的JavaScript程式碼中，我們需要使用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模組來建立WebSocket伺服器。

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

2. 完整的伺服器程式碼範例

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

五、總結
本文介紹如何使用WebSocket和JavaScript來實現一個線上預約系統，並提供了完整的客戶端和伺服器端程式碼範例。透過使用WebSocket實現即時通信，我們能夠實現更有效率、即時的線上預約系統。它也可以應用在其他需要即時通訊的場景中。希望本文對你的專案開發有幫助！

以上是如何使用WebSocket和JavaScript實現線上預約系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！