ホームページ >ウェブフロントエンド >jsチュートリアル >WebSocketとJavaScriptを使ったオンライン予約システムの実装方法
WebSocketとJavaScriptを使ったオンライン予約システムの実装方法
- WBOYオリジナル
- 2023-12-17 09:39:02706ブラウズ
WebSocket と JavaScript を使用してオンライン予約システムを実装する方法
今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。
1. WebSocket とは
WebSocket は、単一の TCP 接続で全二重通信を行うためのプロトコルです。ブラウザとサーバーの間に永続的な接続を確立して、リアルタイム通信を実現できます。従来の HTTP リクエストと比較して、WebSocket はデータをより迅速に送受信できます。
2. 要件分析のサンプル
ジムのオンライン予約システムを開発していると仮定しましょう。ユーザーはウェブサイトを通じて予約するのに適切な期間を選択でき、システムは選択した期間のステータスをユーザーに即座にフィードバックします。
上記の要件に基づいて、システムをクライアントとサーバーの 2 つの役割に分けることができます。クライアントはユーザーが操作可能なインターフェイスを提供し、サーバーはユーザーの予約リクエストを処理し、リアルタイムの予約ステータスをクライアントにプッシュする役割を果たします。
3. クライアントの実装
- 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);
});- ユーザー予約リクエストの処理
ユーザーが Web ページで適切な期間を選択して予約ボタンをクリックすると、ユーザーの予約リクエストをサーバーに送信する必要があります。
function bookTimeslot(timeslot) {
const message = {
action: "book",
timeslot: timeslot
};
socket.send(JSON.stringify(message));
}- 予約ステータスの更新
サーバーに新しい予約ステータスがある場合、Web ページ上のステータス表示を更新する必要があります。
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>4. サーバー実装
サーバー側では、クライアントから送信された予約リクエストを処理する必要があります。 , そしてシステムの状況に応じて予約状況を更新します。同時に、サーバーは新しい予約ステータスをクライアントに送信する必要もあります。
- 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));
});- 完全なサーバー コード例
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));
});5. 概要
この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、クライアント側とサーバー側の完全なコード例が提供されています。 WebSocketを利用してリアルタイム通信を実現することで、より効率的かつリアルタイムなオンライン予約システムを実現できます。リアルタイム通信が必要な他のシナリオにも適用できます。この記事があなたのプロジェクト開発に役立つことを願っています。
以上がWebSocketとJavaScriptを使ったオンライン予約システムの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。