JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法

はじめに:
インターネットの普及とテクノロジーの進歩により、ますます多くの飲食店がオンライン注文サービスを開始しました。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンライン注文システムでは、ユーザーが料理を選択して注文すると、サーバーは注文情報をリアルタイムでキッチンにプッシュすることができ、キッチンが料理を準備した後、ユーザーに通知することもできます。食べ物の準備ができていることをリアルタイムで確認します。ここでは、JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法と、具体的なコード例を詳しく紹介します。

1. 準備作業
まず、次の部分を準備する必要があります:

1. フロントエンド ページ: ユーザーはこのページで料理を選択し、注文を送信できます。
2. サーバー: ユーザーの注文情報を受信し、リアルタイムでキッチンとユーザーにプッシュします。
3. キッチン ページ: ユーザーの注文情報を受信して​​表示し、食事の準備ができたことをリアルタイムでユーザーに通知します。

2. フロントエンド ページ

1. WebSocket JavaScript ライブラリの紹介
   フロントエンド ページでは、まず WebSocket JavaScript ライブラリを紹介する必要があります。 HTML の タグに次のコードを追加します:

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>

2. WebSocket 接続の確立
   フロントエンド ページで、WebSocket 接続を確立する必要があります。サーバ。 JavaScript では、次のコードを使用できます。

const socket = io('http://localhost:3000'); // 替换成实际的服务端地址

3. サーバーによってプッシュされたメッセージを聞く
   新しいメッセージがサーバーからプッシュされるとき、フロントエンド ページはそれに応じて処理されます。 JavaScript では、次のコードを使用できます。

socket.on('newOrder', order => {
  // 处理新的订单信息
});

4. 注文を送信
   ユーザーが料理を選択して注文を送信ボタンをクリックすると、フロントエンド ページは注文情報をサーバーに送信します。 JavaScript では、次のコードを使用できます。

const order = {
  // 订单信息
};
socket.emit('submitOrder', order);

3. サーバー

1. WebSocket ライブラリをインストールします
   Node.js 環境では、次のコードを使用できますsocket.ioWebSocket 接続を実装するライブラリ。コマンド ラインで次のコマンドを実行して、依存関係をインストールします。

npm install socket.io

2. WebSocket 接続を確立する
   サーバー コードでは、WebSocket サーバーを作成し、クライアント接続リクエストをリッスンする必要があります。 。 Node.js では、次のコードを使用できます。

const io = require('socket.io')(http); // http为Node.js的HTTP服务器
io.on('connection', socket => {
  // 处理客户端的连接请求
});

3. クライアントから送信された注文情報を受信する
   クライアントが注文情報を送信すると、サーバーは受信して処理する必要があります。それ。サーバー コードでは、次のコードを使用できます。

socket.on('submitOrder', order => {
  // 处理订单信息
  // 推送订单信息给后厨和用户
  io.emit('newOrder', order);
});

4. その他の論理処理
   実際のニーズに応じて、サーバーは注文ステータスの追跡などの他の論理処理を実行することもできます。在庫管理もお待ちしております。

4. バック キッチン ページ

1. フロントエンド ページ
   バック キッチン ページのフロントエンド部分は、ユーザーのフロントエンド ページと似ています。 WebSocket 接続を確立し、サーバーのプッシュされたメッセージを監視する必要があります。特定のコードについては、ユーザー フロントエンド ページのコード例を参照してください。
2. 注文情報の表示
   新しい注文がサーバーからプッシュされると、注文情報がキッチン ページに表示される必要があります。実際の状況に応じて具体的なコードを記述することができます。
3. 料理の準備ができたことをユーザーに通知する
   シェフが料理を準備すると、WebSocket を通じてユーザーに通知メッセージを送信して、料理の準備ができたことをユーザーに知らせることができます。特定のコードについては、ユーザー フロントエンド ページのコード例を参照してください。

概要:
上記の手順により、JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装できます。ユーザーはフロントエンド ページで料理を選択し、注文を送信できます。サーバーは注文を受信し、リアルタイムでキッチンとユーザーにプッシュします。キッチン ページには注文が表示され、料理の準備ができていることがリアルタイムでユーザーに通知されます。 WebSocket を使用すると、リアルタイムの双方向通信が実現し、ユーザー エクスペリエンスとレストラン サービスの効率が向上します。

コード例:
スペースの制限のため、完全なコード例をここに示すことはできません。ただし、読者は、WebSocket および Node.js 関連のドキュメント、およびオープンソースのオンライン注文システムのサンプル コードを参照して、独自のリアルタイム オンライン注文システムを実装および改善することができます。

以上がJavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。