Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata

Pengenalan:
Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan, pelayan boleh menolak maklumat pesanan ke dapur dalam masa nyata, dan selepas dapur menyediakan makanan, ia juga boleh memberitahu pengguna dalam masa nyata bahawa makanan sudah siap. Berikut akan memperkenalkan secara terperinci cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata, dan memberikan contoh kod khusus.

1. Penyediaan
Pertama, kita perlu menyediakan bahagian berikut:

1. Halaman hadapan: Pengguna boleh memilih hidangan dan menghantar pesanan di halaman ini.
2. Pelayan: Menerima maklumat pesanan pengguna dan menolaknya kepada tukang masak dan pengguna dalam masa nyata.
3. Halaman dapur: Terima dan paparkan maklumat pesanan pengguna, dan maklumkan pengguna bahawa hidangan sudah siap dalam masa nyata.

2. Halaman hadapan

1. Memperkenalkan perpustakaan JavaScript WebSocket
   Di halaman hujung hadapan, kami perlu memperkenalkan perpustakaan JavaScript WebSocket terlebih dahulu. Tambahkan kod berikut dalam teg HTML:

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

2. Mewujudkan sambungan WebSocket
   Di halaman hujung hadapan, kita perlu mewujudkan sambungan WebSocket dengan pelayan. Dalam JavaScript, anda boleh menggunakan kod berikut:

const socket = io('http://localhost:3000'); // 替換成實(shí)際的服務(wù)端地址

3. Dengar mesej yang ditolak oleh pelayan
   Apabila mesej baharu ditolak dari pelayan, halaman hadapan perlu diproses dengan sewajarnya. Dalam JavaScript, anda boleh menggunakan kod berikut:

socket.on('newOrder', order => {
  // 處理新的訂單信息
});

4. Hantar pesanan
   Apabila pengguna memilih hidangan dan mengklik butang hantar pesanan, halaman hadapan perlu menghantar maklumat pesanan ke pelayan. Dalam JavaScript, anda boleh menggunakan kod berikut:

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

3. Bahagian pelayan

1. Pasang perpustakaan WebSocket
   Dalam persekitaran Node.js, kami boleh menggunakan perpustakaan socket.io untuk melaksanakan sambungan WebSocket. Jalankan arahan berikut pada baris arahan untuk memasang dependensi:

npm install socket.io

2. Wujudkan sambungan WebSocket
   Dalam kod pelayan, kita perlu mencipta pelayan WebSocket dan mendengar permintaan sambungan pelanggan. Dalam Node.js, anda boleh menggunakan kod berikut:

const io = require('socket.io')(http); // http為Node.js的HTTP服務(wù)器
io.on('connection', socket => {
  // 處理客戶端的連接請(qǐng)求
});

3. Terima maklumat pesanan yang diserahkan oleh pelanggan
   Apabila pelanggan menyerahkan maklumat pesanan, pelayan perlu menerima dan memprosesnya. Dalam kod sisi pelayan, anda boleh menggunakan kod berikut:

socket.on('submitOrder', order => {
  // 處理訂單信息
  // 推送訂單信息給后廚和用戶
  io.emit('newOrder', order);
});

4. Pemprosesan logik lain
   Mengikut keperluan sebenar, pelayan juga boleh melakukan pemprosesan logik lain, seperti penjejakan status pesanan, pengurusan inventori, dsb.

4. Halaman Belakang Dapur

1. Halaman Hadapan
   Bahagian hadapan halaman Dapur Belakang adalah serupa dengan halaman hujung hadapan pengguna Ia perlu mewujudkan sambungan WebSocket dan memantau mesej yang ditolak oleh pelayan. Untuk kod tertentu, sila rujuk contoh kod pada halaman hujung hadapan pengguna.
2. Paparkan maklumat pesanan
   Apabila pesanan baharu ditolak dari pelayan, maklumat pesanan perlu dipaparkan di halaman dapur. Kod khusus boleh ditulis mengikut situasi sebenar.
3. Memaklumkan pengguna bahawa makanan sudah siap
   Apabila dapur menyediakan makanan, ia boleh menghantar mesej pemberitahuan kepada pengguna melalui WebSocket untuk memaklumkan pengguna bahawa makanan sudah siap. Untuk kod tertentu, sila rujuk contoh kod pada halaman hujung hadapan pengguna.

Ringkasan:
Melalui langkah di atas, kita boleh menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata. Pengguna boleh memilih hidangan dan menghantar pesanan pada halaman hadapan Pelayan menerima pesanan dan menolaknya ke dapur dan pengguna dalam masa nyata Halaman dapur memaparkan pesanan dan memberitahu pengguna dalam masa nyata bahawa makanan sudah siap. Menggunakan WebSocket boleh mencapai komunikasi dua hala masa nyata, meningkatkan pengalaman pengguna dan kecekapan perkhidmatan restoran.

Contoh Kod:
Disebabkan had ruang, contoh kod lengkap tidak boleh diberikan di sini. Walau bagaimanapun, pembaca boleh merujuk kepada dokumen berkaitan WebSocket dan Node.js, serta kod sampel sistem pesanan dalam talian sumber terbuka, untuk melaksanakan dan menambah baik sistem pesanan dalam talian masa nyata mereka sendiri.

Atas ialah kandungan terperinci Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!