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

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'); // 替换成实际的服务端地址

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服务器
io.on('connection', socket => {
  // 处理客户端的连接请求
});

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!